@skyhook-io/k8s-ui 1.17.1 → 1.18.1

package/src/components/timeline/DiffViewer.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react'
 import { clsx } from 'clsx'
-import { ArrowRight, Plus, Minus, RefreshCw } from 'lucide-react'
+import { ArrowRight, EyeOff, Plus, Minus, RefreshCw } from 'lucide-react'
 import type { DiffInfo, FieldChange } from '../../types'
 
 interface DiffViewerProps {
@@ -34,19 +34,128 @@ export const DiffViewer = memo(function DiffViewer({ diff, compact = false }: Di
 
       {/* Field changes */}
       <div className="space-y-1.5">
-        {diff.fields.map((field, idx) => (
-          <FieldChangeRow key={`${field.path}-${idx}`} field={field} />
-        ))}
+        {diffRows(diff.fields).map((row, idx) =>
+          row.kind === 'keys' ? (
+            <KeyListRow key={`${row.field}-${idx}`} row={row} />
+          ) : (
+            <FieldChangeRow key={`${row.field.path}-${idx}`} field={row.field} />
+          ),
+        )}
       </div>
     </div>
   )
 })
 
+// Secret and ConfigMap diffs report which keys changed as name lists, under
+// paths like "data (modified keys)", never values. Rendered as an old→new
+// pair, a modified key reads as removed and re-added, so key lists of one
+// field are merged into a single row that names what happened to each key.
+const KEY_LIST_PATH = /^(.+) \((added|removed|modified) keys\)$/
+
+type KeyChange = 'added' | 'removed' | 'modified'
+
+interface KeyListDiffRow {
+  kind: 'keys'
+  field: string
+  keys: Record<KeyChange, string[]>
+}
+
+type DiffRow = KeyListDiffRow | { kind: 'field'; field: FieldChange }
+
+function keyNames(value: unknown): string[] | null {
+  if (value === null || value === undefined) return []
+  return Array.isArray(value) && value.every((item) => typeof item === 'string') ? value : null
+}
+
+function diffRows(fields: FieldChange[]): DiffRow[] {
+  const rows: DiffRow[] = []
+  const byField = new Map<string, KeyListDiffRow>()
+  for (const field of fields) {
+    const match = KEY_LIST_PATH.exec(field.path)
+    const oldKeys = keyNames(field.oldValue)
+    const newKeys = keyNames(field.newValue)
+    if (!match || !oldKeys || !newKeys) {
+      rows.push({ kind: 'field', field })
+      continue
+    }
+    const [, base, change] = match
+    let row = byField.get(base)
+    if (!row) {
+      row = { kind: 'keys', field: base, keys: { added: [], removed: [], modified: [] } }
+      byField.set(base, row)
+      rows.push(row)
+    }
+    const list = row.keys[change as KeyChange]
+    for (const key of [...oldKeys, ...newKeys]) {
+      if (!list.includes(key)) list.push(key)
+    }
+  }
+  return rows
+}
+
+const KEY_CHANGE_LABEL: Record<KeyChange, string> = {
+  modified: 'keys changed',
+  added: 'added',
+  removed: 'removed',
+}
+
+function KeyListRow({ row }: { row: KeyListDiffRow }) {
+  const parts = (['modified', 'added', 'removed'] as const).filter((change) => row.keys[change].length > 0)
+  return (
+    <div className="rounded bg-theme-surface/50 border border-theme-border px-3 py-2">
+      <div className="text-xs font-mono text-theme-text-tertiary mb-1 break-words [overflow-wrap:anywhere]">{row.field}</div>
+      <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-sm text-theme-text-secondary">
+        {parts.map((change, idx) => (
+          <span key={change} className="min-w-0 [overflow-wrap:anywhere]">
+            {idx > 0 ? <span aria-hidden className="mr-2 text-theme-text-tertiary">·</span> : null}
+            {KEY_CHANGE_LABEL[change]}: <span className="font-mono">{row.keys[change].join(', ')}</span>
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+}
+
 interface FieldChangeRowProps {
   field: FieldChange
 }
 
+// The backend never sends values it keeps out of the feed (secrets, config
+// blobs, large structures); it sends one of these markers instead. Older
+// events carry a bare "changed" on both sides.
+const HIDDEN_VALUE = '(value hidden)'
+const HIDDEN_SET = '(set)'
+
+function hiddenChange(field: FieldChange): 'changed' | 'set' | 'removed' | null {
+  const { oldValue, newValue } = field
+  const absent = (v: unknown) => v === null || v === undefined
+  if ((oldValue === HIDDEN_VALUE && newValue === HIDDEN_VALUE) || (oldValue === 'changed' && newValue === 'changed')) {
+    return 'changed'
+  }
+  if (absent(oldValue) && newValue === HIDDEN_SET) return 'set'
+  if (oldValue === HIDDEN_SET && absent(newValue)) return 'removed'
+  return null
+}
+
 function FieldChangeRow({ field }: FieldChangeRowProps) {
+  const hidden = hiddenChange(field)
+  if (hidden) {
+    const Icon = hidden === 'set' ? Plus : hidden === 'removed' ? Minus : RefreshCw
+    return (
+      <div className="rounded bg-theme-surface/50 border border-theme-border px-3 py-2">
+        <div className="text-xs font-mono text-theme-text-tertiary mb-1 break-words [overflow-wrap:anywhere]">{field.path}</div>
+        <div className="flex flex-wrap items-center gap-2 text-sm text-theme-text-secondary">
+          <Icon className="w-3.5 h-3.5 shrink-0" aria-hidden />
+          <span>{hidden === 'set' ? 'Set' : hidden === 'removed' ? 'Removed' : 'Changed'}</span>
+          <span className="inline-flex items-center gap-1 rounded-full bg-theme-elevated px-2 py-0.5 text-xs text-theme-text-tertiary">
+            <EyeOff className="w-3 h-3" aria-hidden />
+            value hidden
+          </span>
+        </div>
+      </div>
+    )
+  }
+
   const isAdded = field.oldValue === null || field.oldValue === undefined
   const isRemoved = field.newValue === null || field.newValue === undefined
   const isModified = !isAdded && !isRemoved

package/src/components/timeline/TimelineList.tsx

@@ -216,6 +216,10 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     const singleEvents: TimelineEvent[] = []
 
     for (const item of items) {
+      if (item.id === selectedEventId) {
+        singleEvents.push(item)
+        continue
+      }
       if (foldPerResource?.(item)) {
         const key = `fold:${item.kind}:${item.namespace}:${item.name}`
         const existing = groups.get(key) || []
@@ -344,7 +348,7 @@ export function TimelineList({ events, isLoading, onRefresh, onQueryChange, hasL
     if (older.length > 0) groups.push({ label: 'Older', items: aggregateEvents(older) })
 
     return groups
-  }, [filteredActivity, compact, foldPerResource])
+  }, [filteredActivity, compact, foldPerResource, selectedEventId])
 
   // Visible-window reporting: rows carry their time span in data attributes;
   // on scroll (rAF-throttled) and whenever the row set changes, the span of

package/src/components/timeline/shared.test.tsx

@@ -1,5 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import {
+  isRolloutEvent,
   buildHealthSpans,
   sweepAggregateHealth,
   formatAggregateHealthTooltip,
@@ -217,3 +218,50 @@ describe('buildLaneMemberSpans (leaf gathering)', () => {
     expect(members.map((m) => m.name)).toEqual(['web'])
   })
 })
+
+describe('isRolloutEvent', () => {
+  type F = { path: string; oldValue?: unknown; newValue?: unknown }
+  const ev = (kind: string, fields: F[], summary = '') => ({
+    id: 'e', source: 'informer', eventType: 'update', kind, namespace: 'shop', name: 'web',
+    timestamp: new Date(0).toISOString(),
+    diff: { summary, fields: fields.map((f) => ({ oldValue: 1, newValue: 2, ...f })) },
+  }) as any
+
+  it('does not treat a pod-template edit alone as a rollout (OnDelete and paused workloads do not roll)', () => {
+    expect(isRolloutEvent(ev('Deployment', [{ path: 'spec.template.metadata.annotations[kubectl.kubernetes.io/restartedAt]' }], 'pod template annotation kubectl.kubernetes.io/restartedAt added (new pod template revision)'))).toBe(false)
+    expect(isRolloutEvent(ev('DaemonSet', [{ path: 'spec.template.metadata.annotations[checksum/config]' }]))).toBe(false)
+    expect(isRolloutEvent(ev('Rollout', [{ path: 'spec.template.spec.containers[].image' }], 'image: web:2'))).toBe(false)
+  })
+
+  it('treats updated-count movement with steady readiness as a rollout', () => {
+    expect(isRolloutEvent(ev('Deployment', [{ path: 'status.updatedReplicas', oldValue: 1, newValue: 2 }]))).toBe(true)
+    expect(isRolloutEvent(ev('DaemonSet', [{ path: 'status.updatedNumberScheduled', oldValue: 1, newValue: 2 }]))).toBe(true)
+  })
+
+  it('keeps degraded health visible when readiness moves in the same update', () => {
+    // A pod swap, a lost pod and a scale-up under failing readiness are
+    // indistinguishable from the counts alone.
+    expect(isRolloutEvent(ev('DaemonSet', [
+      { path: 'status.numberReady', oldValue: 4, newValue: 3 },
+      { path: 'status.updatedNumberScheduled', oldValue: 1, newValue: 2 },
+    ]))).toBe(false)
+    expect(isRolloutEvent(ev('Deployment', [
+      { path: 'status.readyReplicas', oldValue: 3, newValue: 2 },
+      { path: 'status.updatedReplicas', oldValue: 3, newValue: 5 },
+    ]))).toBe(false)
+  })
+
+  it('treats the reset at the start of a rollout as a rollout', () => {
+    expect(isRolloutEvent(ev('Deployment', [{ path: 'status.updatedReplicas', oldValue: 3, newValue: 0 }], 'updated: 3→0'))).toBe(true)
+  })
+
+  it('does not treat a lost pod or unrelated changes as a rollout', () => {
+    expect(isRolloutEvent(ev('Deployment', [
+      { path: 'status.readyReplicas', oldValue: 3, newValue: 2 },
+      { path: 'status.updatedReplicas', oldValue: 3, newValue: 2 },
+    ]))).toBe(false)
+    expect(isRolloutEvent(ev('Deployment', [{ path: 'status.readyReplicas', oldValue: 3, newValue: 1 }]))).toBe(false)
+    expect(isRolloutEvent(ev('Deployment', [{ path: 'spec.strategy.rollingUpdate.maxUnavailable' }], 'updated: wording without the field'))).toBe(false)
+    expect(isRolloutEvent(ev('Service', [{ path: 'status.updatedReplicas', oldValue: 1, newValue: 2 }]))).toBe(false)
+  })
+})

package/src/components/timeline/shared.tsx

@@ -57,28 +57,23 @@ export interface HealthSpanResult {
 }
 
 /**
- * Check if an event indicates a rollout is in progress (expected degradation).
- * Rollout signals include:
- * - Diff summary contains "updated:" (indicating replica count or image changes)
- * - Diff summary mentions image changes
- * - Event is for a deployment-like workload with degraded health
+ * Check if an event shows a rollout in progress (expected degradation): a
+ * deployment-like workload whose updated-replica count moved while its ready
+ * count held. Decided from the diff's field paths, not from summary wording.
+ *
+ * The rule errs toward keeping degraded health visible. A pod-template edit
+ * alone does not count (OnDelete and paused workloads take it without
+ * rolling), and an update that also moves the ready count does not count
+ * either: a lost pod and a scale-up under failing readiness look the same as
+ * a pod swap from the counts alone.
  */
-function isRolloutEvent(event: TimelineEvent): boolean {
+export function isRolloutEvent(event: TimelineEvent): boolean {
   // Only deployment-like workload controllers can have rollout transitions.
   if (!isDeploymentLikeWorkloadKind(event.kind)) return false
-
-  // Check diff summary for rollout signals
-  if (event.diff?.summary) {
-    const summary = event.diff.summary.toLowerCase()
-    // "updated:" typically indicates replica count changes during rollout
-    if (summary.includes('updated:')) return true
-    // Image changes trigger rollouts
-    if (summary.includes('image(') || summary.includes('image:')) return true
-    // Spec template changes often indicate rollout
-    if (summary.includes('template')) return true
-  }
-
-  return false
+  const paths = new Set((event.diff?.fields ?? []).map((field) => field.path))
+  const updatedMoved = paths.has('status.updatedReplicas') || paths.has('status.updatedNumberScheduled')
+  const readyMoved = paths.has('status.readyReplicas') || paths.has('status.numberReady')
+  return updatedMoved && !readyMoved
 }
 
 /**

package/src/components/ui/FetchResult.test.tsx

@@ -54,11 +54,12 @@ describe('FetchResult', () => {
     expect(html).toContain('Resource cache not available')
   })
 
-  it('does not blame the cluster for a kind_sync_failed 503', () => {
+  // kind_sync_failed is how Radar releases before kind_sync_timed_out spelled it.
+  it.each(['kind_sync_timed_out', 'kind_sync_failed'])('does not blame the cluster for a %s 503', (code) => {
     const html = renderToString(
       <FetchResult
         loading={false}
-        error={shaped('pods failed to load within the sync deadline', 503, { error_code: 'kind_sync_failed' })}
+        error={shaped('pods failed to load within the sync deadline', 503, { error_code: code })}
       />,
     )
     expect(html).not.toContain('Cluster unavailable')
@@ -66,6 +67,22 @@ describe('FetchResult', () => {
     expect(html).toContain('pods failed to load within the sync deadline')
   })
 
+  it('blames Radar\'s collector, not the cluster, for a collector failure', () => {
+    const html = renderToString(
+      <FetchResult loading={false} error={shaped('Radar is not allowed to list pods', 503, { error_code: 'radar_forbidden' })} />,
+    )
+    expect(html).toContain('Radar can')
+    expect(html).not.toContain('Cluster unavailable')
+  })
+
+  it('keeps a disconnected cluster reading as unavailable', () => {
+    const html = renderToString(
+      <FetchResult loading={false} error={shaped('Not connected to cluster', 503, { error_code: 'cluster_disconnected' })} />,
+    )
+    expect(html).toContain('Cluster unavailable')
+    expect(html).not.toContain('Radar can')
+  })
+
   it('renders a Retry button only when onRetry is given', () => {
     const err = shaped('internal server error', 500)
     expect(renderToString(<FetchResult loading={false} error={err} onRetry={() => {}} />)).toContain('Retry')

package/src/components/ui/FetchResult.tsx

@@ -3,6 +3,7 @@ import { ShieldOff, AlertTriangle, ServerCrash, LogIn, Copy, Check, RefreshCw, t
 import { clsx } from 'clsx'
 import { PaneLoader } from './PaneLoader'
 import { isFetchError } from '../../types/fetch-error'
+import { readActionFor, canonicalReadCode } from '../../utils/read-actions'
 
 // FetchResult collapses (loading, error, no-data) into one rendered outcome:
 // loader while loading, a typed error surface when the fetch threw, or the
@@ -15,6 +16,7 @@ import { isFetchError } from '../../types/fetch-error'
 //   error (403)              → "Access denied"            + error.message
 //   error (404)              → notFoundMessage            + error.message
 //   error (503 sync failed)  → "Couldn't load this view"  + error.message
+//   error (503 collector)    → "Radar can't read this"    + error.message
 //   error (503)              → "Cluster unavailable"      + error.message
 //   error (401)              → "Sign-in required"         (apiFetch redirects; fallback)
 //   error (other / no shape) → "Couldn't load this view"  + error.message
@@ -118,9 +120,19 @@ function classify(error: unknown, notFoundMessage: string): Classified {
       case 503:
         // The cluster is connected; one kind's informer missed its sync
         // deadline, so "Cluster unavailable" would send the reader the wrong way.
-        if (errorCodeOf(error) === 'kind_sync_failed') {
+        if (canonicalReadCode(errorCodeOf(error)) === 'kind_sync_timed_out') {
           return { headline: "Couldn't load this view", detail: error.message, icon: AlertTriangle }
         }
+        // Shares the collector's action, but it is the cluster connection
+        // that is down rather than one read.
+        if (errorCodeOf(error) === 'cluster_disconnected') {
+          return { headline: 'Cluster unavailable', detail: error.message, icon: ServerCrash }
+        }
+        // Radar's own identity or collection can't serve the read: neither
+        // the cluster being down nor the reader's access.
+        if (readActionFor(errorCodeOf(error)) === 'radar_config') {
+          return { headline: "Radar can't read this", detail: error.message, icon: ShieldOff }
+        }
         // The cluster is healthy and still loading — the retry policies keep
         // these surfaces polling, but a caller without one must not tell the
         // user a connecting cluster is down.

package/src/components/ui/MultiSelectPicker.test.tsx

@@ -36,6 +36,26 @@ describe('MultiSelectPicker', () => {
     expect(html).toContain('>Done</button>')
   })
 
+  it('adds an Only button to each row only when a select-only handler is given', () => {
+    expect(render()).not.toContain('>Only</button>')
+
+    const html = render({ onSelectOnly: () => {} })
+    expect(html.match(/>Only<\/button>/g)).toHaveLength(KINDS.length)
+    expect(html).toContain('aria-label="Show only Pod"')
+    // The name stays inside the checkbox label, so clicking it still toggles.
+    expect(html).toMatch(/<label[^>]*><span[^>]*><input type="checkbox"[^>]*\/><span class="truncate">Pod<\/span><\/span><\/label><button/)
+  })
+
+  it('hides Only until hover or keyboard focus, and keeps it visible on touch', () => {
+    const html = render({ onSelectOnly: () => {} })
+    const only = html.match(/<button[^>]*aria-label="Show only Pod"[^>]*>/)?.[0] ?? ''
+    expect(only).toContain('opacity-0')
+    expect(only).toContain('group-hover/row:opacity-100')
+    expect(only).toContain('group-has-[:focus-visible]/row:opacity-100')
+    expect(only).toContain('focus-visible:opacity-100')
+    expect(only).toContain('any-pointer-coarse:opacity-100')
+  })
+
   it('shows the filter input above the threshold and hides it below', () => {
     const shown = render()
     expect(shown).toContain('placeholder="Filter kinds"')

package/src/components/ui/MultiSelectPicker.tsx

@@ -16,6 +16,12 @@ export interface MultiSelectPickerProps {
   onClearAll: () => void
   /** Footer "Done" button. */
   onDone: () => void
+  /**
+   * When set, each row gets an "Only" button that selects just that item. The
+   * name and checkbox still toggle. The host decides whether it also commits
+   * and closes.
+   */
+  onSelectOnly?: (item: string) => void
 
   /** Controlled search term (kept in the host so the body stays SSR-testable). */
   search: string
@@ -50,6 +56,7 @@ export function MultiSelectPicker({
   onSelectionChange,
   onClearAll,
   onDone,
+  onSelectOnly,
   search,
   onSearchChange,
   searchPlaceholder,
@@ -136,8 +143,8 @@ export function MultiSelectPicker({
         )}
 
         {filteredItems.map(item => (
-          <li key={item}>
-            <label className="w-full flex items-center justify-between px-3 py-1.5 text-sm hover:bg-theme-hover text-left text-theme-text-primary cursor-pointer">
+          <li key={item} className="group/row flex items-center hover:bg-theme-hover">
+            <label className="flex-1 min-w-0 flex items-center px-3 py-1.5 text-sm text-left text-theme-text-primary cursor-pointer">
               <span className="flex items-center gap-2 min-w-0">
                 <input
                   type="checkbox"
@@ -149,6 +156,17 @@ export function MultiSelectPicker({
                 {renderItemMeta?.(item)}
               </span>
             </label>
+            {onSelectOnly && (
+              // Touchscreens can coexist with a hover-capable mouse.
+              <button
+                type="button"
+                onClick={() => onSelectOnly(item)}
+                aria-label={`Show only ${item}`}
+                className="shrink-0 mr-2 px-1.5 py-0.5 rounded border border-theme-border bg-theme-surface text-[11px] text-theme-text-secondary hover:bg-theme-elevated hover:text-theme-text-primary opacity-0 transition-opacity group-hover/row:opacity-100 group-has-[:focus-visible]/row:opacity-100 focus-visible:opacity-100 any-pointer-coarse:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
+              >
+                Only
+              </button>
+            )}
           </li>
         ))}
       </ul>

package/src/components/ui/PageHeader.tsx

@@ -18,7 +18,9 @@ interface PageHeaderProps {
 
 export function PageHeader({ icon: Icon, title, description, onBack, actions }: PageHeaderProps) {
   return (
-    <div className="flex items-center gap-4">
+    // Phones: actions (freshness, summary tiles) wrap under the title
+    // instead of squeezing it to nothing.
+    <div className="flex items-center gap-4 phone:flex-wrap phone:gap-y-3">
       {onBack && (
         <button
           onClick={onBack}
@@ -28,16 +30,16 @@ export function PageHeader({ icon: Icon, title, description, onBack, actions }:
           <ArrowLeft className="w-5 h-5 text-theme-text-secondary" />
         </button>
       )}
-      <div className="flex-1 min-w-0">
+      <div className="flex-1 min-w-0 phone:basis-full">
         <div className="flex items-center gap-2">
           <Icon className="w-5 h-5 text-theme-text-secondary shrink-0" />
           <h1 className="text-lg font-semibold text-theme-text-primary truncate">{title}</h1>
         </div>
         {description && (
-          <p className="text-sm text-theme-text-tertiary mt-1 ml-7 truncate">{description}</p>
+          <p className="text-sm text-theme-text-tertiary mt-1 ml-7 truncate phone:whitespace-normal phone:line-clamp-2">{description}</p>
         )}
       </div>
-      {actions && <div className="flex flex-wrap items-center justify-end gap-2 shrink-0">{actions}</div>}
+      {actions && <div className="flex flex-wrap items-center justify-end gap-2 shrink-0 phone:shrink phone:justify-start">{actions}</div>}
     </div>
   )
 }

package/src/components/ui/Toast.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useCallback, ReactNode, useEffect } from 'react'
+import { createContext, useContext, useState, useCallback, ReactNode, useEffect, useRef } from 'react'
 import { DURATION_TOAST_EXIT } from '../../utils/animation'
 import { Check, Terminal, X, AlertTriangle, Info } from 'lucide-react'
 import { clsx } from 'clsx'
@@ -15,15 +15,13 @@ interface Toast {
   onDetailClick?: () => void
 }
 
+type ToastOptions = Omit<Toast, 'id' | 'message' | 'dismissing'> & {
+  id?: string
+  duration?: number
+}
+
 interface ToastContextType {
-  showToast: (message: string, options?: {
-    detail?: string
-    command?: string
-    type?: Toast['type']
-    position?: { x: number; y: number }
-    action?: Toast['action']
-    onDetailClick?: () => void
-  }) => void
+  showToast: (message: string, options?: ToastOptions) => void
   showCopied: (command: string, label?: string, event?: React.MouseEvent) => void
   showError: (message: string, detail?: string) => void
   showSuccess: (message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => void
@@ -36,6 +34,7 @@ class ToastManager {
   private static instance: ToastManager
   private showErrorFn: ((message: string, detail?: string) => void) | null = null
   private showSuccessFn: ((message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) => void) | null = null
+  private showToastFn: ToastContextType['showToast'] | null = null
 
   static getInstance(): ToastManager {
     if (!ToastManager.instance) {
@@ -44,14 +43,16 @@ class ToastManager {
     return ToastManager.instance
   }
 
-  register(showError: typeof this.showErrorFn, showSuccess: typeof this.showSuccessFn) {
+  register(showError: typeof this.showErrorFn, showSuccess: typeof this.showSuccessFn, showToast: ToastContextType['showToast']) {
     this.showErrorFn = showError
     this.showSuccessFn = showSuccess
+    this.showToastFn = showToast
   }
 
   unregister() {
     this.showErrorFn = null
     this.showSuccessFn = null
+    this.showToastFn = null
   }
 
   showError(message: string, detail?: string) {
@@ -61,6 +62,10 @@ class ToastManager {
   showSuccess(message: string, detail?: string, action?: Toast['action'], onDetailClick?: () => void) {
     this.showSuccessFn ? this.showSuccessFn(message, detail, action, onDetailClick) : console.log('[Toast]', message, detail)
   }
+
+  showNotice(message: string, detail: string | undefined, type: 'warning' | 'info') {
+    this.showToastFn ? this.showToastFn(message, { detail, type }) : console.warn('[Toast]', message, detail)
+  }
 }
 
 const toastManager = ToastManager.getInstance()
@@ -73,6 +78,10 @@ export function showApiSuccess(message: string, detail?: string, action?: Toast[
   toastManager.showSuccess(message, detail, action, onDetailClick)
 }
 
+export function showApiNotice(message: string, detail: string | undefined, type: 'warning' | 'info') {
+  toastManager.showNotice(message, detail, type)
+}
+
 export function useToast() {
   const context = useContext(ToastContext)
   if (!context) {
@@ -83,34 +92,42 @@ export function useToast() {
 
 export function ToastProvider({ children }: { children: ReactNode }) {
   const [toasts, setToasts] = useState<Toast[]>([])
+  const timers = useRef(new Map<string, ReturnType<typeof setTimeout>>())
 
   const animateDismiss = useCallback((id: string) => {
+    clearTimeout(timers.current.get(id))
     setToasts(prev => prev.map(t => t.id === id ? { ...t, dismissing: true } : t))
-    setTimeout(() => {
+    timers.current.set(id, setTimeout(() => {
       setToasts(prev => prev.filter(t => t.id !== id))
-    }, DURATION_TOAST_EXIT)
+      timers.current.delete(id)
+    }, DURATION_TOAST_EXIT))
   }, [])
 
-  const showToast = useCallback((message: string, options?: {
-    detail?: string
-    command?: string
-    type?: Toast['type']
-    position?: { x: number; y: number }
-    action?: Toast['action']
-    onDetailClick?: () => void
-  }) => {
-    const id = Math.random().toString(36).slice(2)
-    const toast: Toast = { id, message, ...options }
+  const showToast = useCallback((message: string, options?: ToastOptions) => {
+    const { id = Math.random().toString(36).slice(2), duration, ...toastOptions } = options ?? {}
+    const toast: Toast = { id, message, ...toastOptions }
 
-    setToasts(prev => [...prev, toast])
+    clearTimeout(timers.current.get(id))
+    timers.current.delete(id)
+    setToasts(prev => prev.some(t => t.id === id)
+      ? prev.map(t => t.id === id ? toast : t)
+      : [...prev, toast])
 
     // Auto-dismiss: errors stay longer (10s), others 7s
-    const dismissTime = options?.type === 'error' ? 10000 : 7000
-    setTimeout(() => {
-      animateDismiss(id)
-    }, dismissTime)
+    const dismissTime = duration ?? (toast.type === 'error' ? 10000 : 7000)
+    if (dismissTime > 0) {
+      timers.current.set(id, setTimeout(() => animateDismiss(id), dismissTime))
+    }
   }, [animateDismiss])
 
+  useEffect(() => {
+    const activeTimers = timers.current
+    return () => {
+      activeTimers.forEach(clearTimeout)
+      activeTimers.clear()
+    }
+  }, [])
+
   const showCopied = useCallback((command: string, label?: string, event?: React.MouseEvent) => {
     navigator.clipboard.writeText(command)
 
@@ -138,9 +155,9 @@ export function ToastProvider({ children }: { children: ReactNode }) {
 
   // Wire up singleton for use outside React components
   useEffect(() => {
-    toastManager.register(showError, showSuccess)
+    toastManager.register(showError, showSuccess, showToast)
     return () => toastManager.unregister()
-  }, [showError, showSuccess])
+  }, [showError, showSuccess, showToast])
 
   return (
     <ToastContext.Provider value={{ showToast, showCopied, showError, showSuccess }}>
@@ -176,6 +193,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
 
   return (
     <div
+      role="status"
       className={clsx(
         'flex items-start gap-3 p-4 rounded-lg shadow-2xl border backdrop-blur-sm',
         'w-[480px] max-w-[calc(100vw-32px)]',
@@ -233,7 +251,7 @@ function ToastItem({ toast, onDismiss }: { toast: Toast; onDismiss: () => void }
               {toast.detail}
             </button>
           ) : (
-            <p className={clsx('mt-1 text-xs break-words', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
+            <p className={clsx('mt-1 text-xs break-words whitespace-pre-line', isError ? 'text-red-300/80' : isSuccess ? 'text-emerald-300/80' : 'text-theme-text-secondary')}>
               {toast.detail}
             </p>
           )