Add pod triage log jump

Author: rootsec1

src/components/AppShell.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import type { KiteData } from "../hooks/useKiteData";
 import { defaultResourceSort, nextResourceSort, sortResources } from "../lib/resourceSort";
 import { pinnedResourcesNavId } from "../theme/resourceTheme";
@@ -52,12 +52,14 @@ export function AppShell({ data, usesNativeWindowControls }: AppShellProps) {
   const clusterName = data.clusters[0]?.name ?? data.selectedContext ?? "No context";
   const detailResource = detailOpen ? data.selectedResource : null;
 
-  function openResource(id: string, intent: "logs" | null = null) {
+  const openResource = useCallback((id: string, intent: "logs" | null = null) => {
     data.onSelectResource(id);
     setDetailIntent(intent);
     setDetailOpen(true);
     window.requestAnimationFrame(() => primaryPaneRef.current?.scrollTo({ top: 0 }));
-  }
+  }, [data.onSelectResource]);
+
+  const openResourceLogs = useCallback((id: string) => openResource(id, "logs"), [openResource]);
 
   function selectNavigation(id: string) {
     setActiveId(id);
@@ -112,7 +114,11 @@ export function AppShell({ data, usesNativeWindowControls }: AppShellProps) {
                 <>
                   <SummaryStrip counts={counts} warningCount={warningCount} />
                   {(!activeItem?.kind || activeItem.kind === "Pod") ? (
-                    <PodTriageRail pods={podTriageResources} onSelect={openResource} />
+                    <PodTriageRail
+                      pods={podTriageResources}
+                      onOpenLogs={openResourceLogs}
+                      onSelect={openResource}
+                    />
                   ) : null}
                   <ScopeTabs activeId={activeId} counts={counts} items={scopeTabs} onSelect={selectNavigation} />
                   <ResourceTable

src/components/PodTriageRail.tsx

@@ -1,5 +1,5 @@
 import { memo, useCallback, useMemo, useState, type CSSProperties } from "react";
-import { AlertTriangle, Container, ImageOff, RotateCw, ServerCrash, Timer } from "lucide-react";
+import { AlertTriangle, Container, FileText, ImageOff, RotateCw, ServerCrash, Timer } from "lucide-react";
 import type { HealthState, ResourceRow } from "../types/kube";
 import { StatusDot } from "./status";
 
@@ -10,7 +10,15 @@ type PodTriageBucket = {
   tone: Exclude<HealthState, "healthy" | "syncing">;
 };
 
-export function PodTriageRail({ pods, onSelect }: { pods: ResourceRow[]; onSelect: (id: string) => void }) {
+export function PodTriageRail({
+  onOpenLogs,
+  onSelect,
+  pods,
+}: {
+  onOpenLogs: (id: string) => void;
+  onSelect: (id: string) => void;
+  pods: ResourceRow[];
+}) {
   const [activeBucketId, setActiveBucketId] = useState<PodTriageBucket["id"] | null>(null);
   const buckets = useMemo(() => podTriageBuckets(pods), [pods]);
   const activeBucket = buckets.find((bucket) => bucket.id === activeBucketId && bucket.count > 0) ?? null;
@@ -51,7 +59,7 @@ export function PodTriageRail({ pods, onSelect }: { pods: ResourceRow[]; onSelec
         </div>
         <div className="pod-triage-items">
           {visiblePods.map((pod) => (
-            <PodTriageButton key={pod.id} pod={pod} onSelect={onSelect} />
+            <PodTriageButton key={pod.id} pod={pod} onOpenLogs={onOpenLogs} onSelect={onSelect} />
           ))}
         </div>
       </div>
@@ -87,26 +95,40 @@ function TriageBucket({
 }
 
 const PodTriageButton = memo(function PodTriageButton({
+  onOpenLogs,
   onSelect,
   pod,
 }: {
+  onOpenLogs: (id: string) => void;
   onSelect: (id: string) => void;
   pod: ResourceRow;
 }) {
   const handleSelect = useCallback(() => onSelect(pod.id), [onSelect, pod.id]);
+  const handleOpenLogs = useCallback(() => onOpenLogs(pod.id), [onOpenLogs, pod.id]);
   const triageTone = pod.status === "healthy" && pod.restarts > 0 ? "warning" : pod.status;
   const diagnostic = pod.diagnostic || (pod.restarts > 0 ? `${pod.restarts} restarts` : pod.status);
 
   return (
-    <button className={`pod-triage-item ${triageTone}`} type="button" onClick={handleSelect}>
-      <StatusDot state={triageTone} />
-      <span>
-        <strong title={pod.name}>{pod.name}</strong>
-        <small title={pod.namespace}>{pod.namespace}</small>
-      </span>
-      <em title={diagnostic}>{diagnostic}</em>
-      <small>{pod.restarts}r</small>
-    </button>
+    <div className={`pod-triage-item ${triageTone}`}>
+      <button className="pod-triage-open" type="button" onClick={handleSelect}>
+        <StatusDot state={triageTone} />
+        <span>
+          <strong title={pod.name}>{pod.name}</strong>
+          <small title={pod.namespace}>{pod.namespace}</small>
+        </span>
+        <em title={diagnostic}>{diagnostic}</em>
+        <small>{pod.restarts}r</small>
+      </button>
+      <button
+        aria-label={`Open logs for ${pod.name}`}
+        className="pod-triage-log"
+        title="Open logs"
+        type="button"
+        onClick={handleOpenLogs}
+      >
+        <FileText size={13} />
+      </button>
+    </div>
   );
 });
 

src/styles/base.css

@@ -612,25 +612,46 @@ summary:focus-visible {
 }
 
 .pod-triage-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 34px;
+  min-block-size: 78px;
+  min-inline-size: 0;
+  border-inline-start: 1px solid var(--line);
+  background: transparent;
+}
+
+.pod-triage-item:first-child {
+  border-inline-start: 0;
+}
+
+.pod-triage-open {
   display: grid;
   grid-template-columns: 10px minmax(0, 1fr) minmax(72px, 0.55fr) auto;
   gap: 9px;
   align-items: center;
-  min-block-size: 78px;
   min-inline-size: 0;
   padding-inline: 12px;
   border: 0;
-  border-inline-start: 1px solid var(--line);
   background: transparent;
   text-align: start;
   cursor: pointer;
 }
 
-.pod-triage-item:first-child {
-  border-inline-start: 0;
+.pod-triage-log {
+  display: grid;
+  place-items: center;
+  align-self: stretch;
+  inline-size: 34px;
+  min-block-size: 100%;
+  border: 0;
+  border-inline-start: 1px solid var(--line);
+  color: var(--green-deep);
+  background: transparent;
+  cursor: pointer;
 }
 
-.pod-triage-item:hover {
+.pod-triage-open:hover,
+.pod-triage-log:hover {
   background: var(--surface-soft);
 }
 
@@ -639,26 +660,26 @@ summary:focus-visible {
   box-shadow: inset 0 2px 0 color-mix(in srgb, var(--orange) 72%, transparent);
 }
 
-.pod-triage-item > span {
+.pod-triage-open > span {
   display: grid;
   gap: 4px;
   min-inline-size: 0;
 }
 
-.pod-triage-item strong,
-.pod-triage-item small,
-.pod-triage-item em {
+.pod-triage-open strong,
+.pod-triage-open small,
+.pod-triage-open em {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.pod-triage-item strong {
+.pod-triage-open strong {
   color: var(--text);
   font-weight: 500;
 }
 
-.pod-triage-item em {
+.pod-triage-open em {
   justify-self: start;
   max-inline-size: 100%;
   padding: 4px 6px;
@@ -667,8 +688,8 @@ summary:focus-visible {
   background: var(--surface-soft);
 }
 
-.pod-triage-item.warning em,
-.pod-triage-item.critical em {
+.pod-triage-item.warning .pod-triage-open em,
+.pod-triage-item.critical .pod-triage-open em {
   border-color: color-mix(in srgb, var(--orange) 42%, var(--line));
   color: #7d5317;
   background: color-mix(in srgb, var(--yellow) 10%, var(--surface));
@@ -3218,18 +3239,21 @@ summary:focus-visible {
   }
 
   .pod-triage-item {
-    grid-template-columns: 10px minmax(0, 1fr) auto;
-    gap: 6px 9px;
     border-inline-start: 0;
     border-block-end: 1px solid var(--line);
   }
 
-  .pod-triage-item em {
+  .pod-triage-open {
+    grid-template-columns: 10px minmax(0, 1fr) auto;
+    gap: 6px 9px;
+  }
+
+  .pod-triage-open em {
     grid-column: 2;
     max-inline-size: 100%;
   }
 
-  .pod-triage-item > small {
+  .pod-triage-open > small {
     grid-column: 3;
     grid-row: 1 / span 2;
   }