feat(drawer): add ?view=yaml URL deep link for resource drawer

packages/k8s-ui/src/components/workload/ResourceDetailDrawer.tsx

@@ -9,6 +9,8 @@ interface ResourceDetailDrawerProps {
   onNavigate?: (resource: SelectedResource) => void
   /** Open directly to YAML view */
   initialTab?: 'detail' | 'yaml'
+  /** Called when the user toggles the YAML view inside the drawer (for URL sync). */
+  onYamlChange?: (yaml: boolean) => void
   /** Controls slide-in/out animation (driven by useAnimatedUnmount) */
   isOpen?: boolean
   /** Whether the drawer is expanded to full-screen WorkloadView */
@@ -28,6 +30,7 @@ interface ResourceDetailDrawerProps {
     resource: SelectedResource
     expanded: boolean
     initialTab?: 'detail' | 'yaml'
+    onYamlChange?: (yaml: boolean) => void
     onClose: () => void
     onExpand?: () => void
     onBack?: () => void
@@ -51,7 +54,7 @@ function getDefaultWidth(kind: string): number {
   return WIDE_KINDS.has(kind.toLowerCase()) ? WIDE_WIDTH : DEFAULT_WIDTH
 }
 
-export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab, isOpen = true, expanded, onCollapse, onExpand, onNavigateToResource, headerHeight: headerHeightProp, leftOffset = 0, children }: ResourceDetailDrawerProps) {
+export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab, onYamlChange, isOpen = true, expanded, onCollapse, onExpand, onNavigateToResource, headerHeight: headerHeightProp, leftOffset = 0, children }: ResourceDetailDrawerProps) {
   const [drawerWidth, setDrawerWidth] = useState(() => getDefaultWidth(resource.kind))
   const [isResizing, setIsResizing] = useState(false)
   const resizeStartX = useRef(0)
@@ -147,6 +150,7 @@ export function ResourceDetailDrawer({ resource, onClose, onNavigate, initialTab
         resource,
         expanded: !!expanded,
         initialTab,
+        onYamlChange,
         onClose,
         onExpand: onExpand ? () => onExpand(resource) : undefined,
         onBack: onCollapse ? () => onCollapse() : undefined,

packages/k8s-ui/src/components/workload/WorkloadView.tsx

@@ -109,6 +109,8 @@ interface WorkloadViewProps {
   activeTab?: TabType
   /** Called when tab changes (for URL sync etc.) */
   onTabChange?: (tab: TabType) => void
+  /** Called when the drawer YAML toggle flips (for URL sync of `?view=yaml`). */
+  onYamlChange?: (yaml: boolean) => void
 
   // ── Render props for platform-specific content ───────────────────────────
   /** Render the logs tab content */
@@ -184,6 +186,7 @@ export function WorkloadView({
   // Tab state
   activeTab: controlledTab,
   onTabChange,
+  onYamlChange,
   // Render props
   renderLogsTab,
   renderMetricsTab,
@@ -223,7 +226,8 @@ export function WorkloadView({
     // a new transition supersedes an in-flight one (rapid clicks).
     // (SKY-833 bug 49)
     startViewTransitionSafe(() => flushSync(() => setShowYaml(yaml)))
-  }, [])
+    onYamlChange?.(yaml)
+  }, [onYamlChange])
 
   const [selectedEventId, setSelectedEventId] = useState<string | null>(null)
   const [zoom, setZoom] = useState<ZoomLevel>(1)

web/src/App.tsx

@@ -1280,7 +1280,12 @@ function AppInner() {
           <ResourcesView
             namespaces={namespaces}
             selectedResource={routeSelectedResource}
-            onResourceClick={(res) => res ? navigateToResource(res) : setSelectedResource(null)}
+            onResourceClick={(res) => {
+              if (!res) { setSelectedResource(null); return }
+              // Honor `?view=yaml` when restoring from a deep link.
+              const view = new URLSearchParams(window.location.search).get('view')
+              navigateToResource(res, view === 'yaml' ? 'yaml' : 'detail')
+            }}
             onResourceClickYaml={(res) => navigateToResource(res, 'yaml')}
             onKindChange={() => setSelectedResource(null)}
           />
@@ -1374,9 +1379,22 @@ function AppInner() {
         <ResourceDetailDrawer
           resource={drawerResource}
           initialTab={drawerInitialTab}
+          onYamlChange={(yaml) => {
+            setDrawerInitialTab(yaml ? 'yaml' : 'detail')
+            const params = new URLSearchParams(window.location.search)
+            if (yaml) params.set('view', 'yaml'); else params.delete('view')
+            setSearchParams(params, { replace: true })
+          }}
           isOpen={resourceDrawer.isOpen}
           expanded={drawerExpanded}
-          onClose={() => { setSelectedResource(null); setDrawerInitialTab('detail'); setDrawerExpanded(false) }}
+          onClose={() => {
+            setSelectedResource(null)
+            setDrawerInitialTab('detail')
+            setDrawerExpanded(false)
+            const params = new URLSearchParams(window.location.search)
+            params.delete('view')
+            setSearchParams(params, { replace: true })
+          }}
           onNavigate={(res) => navigateToResource(res)}
           onExpand={(res) => {
             suppressViewClearRef.current = true

web/src/components/resources/ResourceDetailDrawer.tsx

@@ -8,6 +8,8 @@ interface ResourceDetailDrawerProps {
   onNavigate?: (resource: SelectedResource) => void
   /** Open directly to YAML view */
   initialTab?: 'detail' | 'yaml'
+  /** Called when the drawer YAML toggle flips (for `?view=yaml` URL sync). */
+  onYamlChange?: (yaml: boolean) => void
   /** Controls slide-in/out animation (driven by useAnimatedUnmount) */
   isOpen?: boolean
   /** Whether the drawer is expanded to full-screen WorkloadView */
@@ -23,14 +25,15 @@ interface ResourceDetailDrawerProps {
 export function ResourceDetailDrawer(props: ResourceDetailDrawerProps) {
   return (
     <BaseResourceDetailDrawer {...props}>
-      {({ resource, expanded, initialTab, onClose, onExpand, onBack, onNavigateToResource, onCollapseToDrawer }) => (
+      {({ resource, expanded, initialTab, onYamlChange, onClose, onExpand, onBack, onNavigateToResource, onCollapseToDrawer }) => (
         <WorkloadView
           kind={resource.kind}
           namespace={resource.namespace}
           name={resource.name}
           group={resource.group}
           expanded={expanded}
           initialTab={initialTab}
+          onYamlChange={onYamlChange}
           onClose={onClose}
           onExpand={onExpand}
           onBack={onBack ?? (() => {})}

web/src/components/workload/WorkloadView.tsx

@@ -110,6 +110,7 @@ interface WorkloadViewProps {
   onClose?: () => void
   onExpand?: () => void
   initialTab?: 'detail' | 'yaml'
+  onYamlChange?: (yaml: boolean) => void
   group?: string
 }