@skyhook-io/radar-app 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyhook-io/radar-app",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Radar's full web UI as a reusable React component. Used by Radar's own binary and by external consumers like Radar Cloud.",
   "repository": {
     "type": "git",

package/src/App.tsx

@@ -21,7 +21,6 @@ import { PortForwardProvider, PortForwardIndicator, PortForwardPanel } from './c
 import { DockProvider, BottomDock, useDock, useOpenLocalTerminal } from './components/dock'
 import { DURATION_DOCK } from '@skyhook-io/k8s-ui/utils/animation'
 import { ContextSwitcher } from './components/ContextSwitcher'
-import { NamespaceSwitcher, type NamespaceSwitcherHandle } from './components/NamespaceSwitcher'
 import { useNavCustomization } from './context/NavCustomization'
 import { ContextSwitchProvider, useContextSwitch } from './context/ContextSwitchContext'
 import { ConnectionProvider, useConnection } from './context/ConnectionContext'
@@ -29,12 +28,13 @@ import { ConnectionErrorView } from './components/ConnectionErrorView'
 import { CapabilitiesProvider, useCapabilitiesContext } from './contexts/CapabilitiesContext'
 import { UserMenu } from './components/UserMenu'
 import { ErrorBoundary } from './components/ui/ErrorBoundary'
+import { NamespaceSelector, type NamespaceSelectorHandle } from './components/ui/NamespaceSelector'
 import { UpdateNotification } from './components/ui/UpdateNotification'
 import { ShortcutHelpOverlay } from './components/ui/ShortcutHelpOverlay'
 import { CommandPalette } from './components/ui/CommandPalette'
 import { DiagnosticsOverlay } from './components/ui/DiagnosticsOverlay'
 import { useEventSource } from './hooks/useEventSource'
-import { useNamespaces, useNamespaceScope, useSetActiveNamespace, useSwitchContext, useAuthMe } from './api/client'
+import { useNamespaces, useSwitchContext, useAuthMe } from './api/client'
 import { routePath, apiUrl, getAuthHeaders, getCredentialsMode } from './api/config'
 import { KeyboardShortcutProvider, useRegisterShortcut, useRegisterShortcuts } from './hooks/useKeyboardShortcuts'
 import { useAnimatedUnmount } from './hooks/useAnimatedUnmount'
@@ -390,7 +390,7 @@ function AppInner() {
   const switchContext = useSwitchContext()
 
   // Refs for dropdown components to trigger them via shortcuts
-  const namespaceSwitcherRef = useRef<NamespaceSwitcherHandle>(null)
+  const namespaceSelectorRef = useRef<NamespaceSelectorHandle>(null)
   const contextSwitcherRef = useRef<ContextSwitcherHandle>(null)
 
   // View switching keyboard shortcuts
@@ -410,7 +410,7 @@ function AppInner() {
       description: 'Switch namespace',
       category: 'Navigation' as const,
       scope: 'global' as const,
-      handler: () => namespaceSwitcherRef.current?.open(),
+      handler: () => namespaceSelectorRef.current?.open(),
     },
     {
       id: 'switch-context',
@@ -490,12 +490,7 @@ function AppInner() {
   const hideGroupHeader = namespaces.length === 1 && effectiveGroupingMode === 'namespace'
 
   // Fetch available namespaces
-  const { data: availableNamespaces } = useNamespaces()
-
-  // Per-user view filter served by the backend. Loaded eagerly so the
-  // picker can render its current state without showing the multi-select
-  // fallback during the initial scope fetch.
-  const { data: namespaceScope } = useNamespaceScope()
+  const { data: availableNamespaces, error: namespacesError } = useNamespaces()
 
   // Context switch state
   const { isSwitching, targetContext, progressMessage, updateProgress, endSwitch } = useContextSwitch()
@@ -666,39 +661,6 @@ function AppInner() {
   // Serialize namespaces for stable dependency tracking
   const namespacesKey = namespaces.join(',')
 
-  // The server is canonical for the per-user namespace pick. Mirror its
-  // `actives` into App.tsx state so consumer hooks (SSE, dashboard, resource
-  // lists) stay in lockstep with the picker. The dedicated URL-write effect
-  // below propagates the mirrored state to `?namespaces=`.
-  const setActiveNamespace = useSetActiveNamespace()
-  const initialBookmarkReconciledRef = useRef(false)
-  const scopeActives = useMemo(() => namespaceScope?.actives ?? [], [namespaceScope?.actives])
-  const namespaceScopeKey = useMemo(() => namespaceScope ? [...scopeActives].sort().join(',') : null, [namespaceScope, scopeActives])
-  useEffect(() => {
-    if (!namespaceScope) return
-    const sortedScope = [...scopeActives].sort()
-    const sortedState = [...namespaces].sort()
-    const sameAsState = sortedScope.length === sortedState.length && sortedScope.every((ns, i) => ns === sortedState[i])
-
-    // First-load bookmark reconciliation: if the URL had namespaces that
-    // differ from the server pick when the scope first arrives, push the
-    // URL choice to the server so shared/bookmarked deep links keep
-    // working. The ref flips on the first scope load regardless of whether
-    // the URL had namespaces — subsequent runs mirror server → state.
-    if (!initialBookmarkReconciledRef.current) {
-      initialBookmarkReconciledRef.current = true
-      if (!sameAsState && sortedState.length > 0) {
-        setActiveNamespace.mutate({ namespaces: sortedState })
-        return
-      }
-    }
-
-    if (!sameAsState) {
-      setNamespaces(scopeActives)
-    }
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- namespaces and setActiveNamespace are intentionally excluded; we only react to server-side changes.
-  }, [namespaceScope, namespaceScopeKey])
-
   // Update URL query params when state changes (path is handled by setMainView)
   // Read from window.location.search (not React Router's searchParams) to preserve
   // params set by child components via window.history.replaceState (e.g., kind from ResourcesView).
@@ -739,24 +701,11 @@ function AppInner() {
   // eslint-disable-next-line react-hooks/exhaustive-deps -- reads window.location.search, not searchParams
   }, [namespacesKey, topologyMode, groupingMode, mainView, setSearchParams])
 
-  // Sync state from URL when navigating (back/forward). Push the URL choice
-  // to the server too so the canonical pick stays in lockstep — otherwise a
-  // back-nav would visually update but leave the next reload pulling the
-  // server's previous (forward-nav) pick.
+  // Sync state from URL when navigating (back/forward)
   useEffect(() => {
     const urlNamespaces = parseNamespacesFromURL(searchParams)
 
-    if (urlNamespaces.join(',') !== namespacesKey) {
-      setNamespaces(urlNamespaces)
-      if (namespaceScope) {
-        const sortedURL = [...urlNamespaces].sort()
-        const sortedScope = [...(namespaceScope.actives ?? [])].sort()
-        const same = sortedURL.length === sortedScope.length && sortedURL.every((ns, i) => ns === sortedScope[i])
-        if (!same) {
-          setActiveNamespace.mutate({ namespaces: urlNamespaces })
-        }
-      }
-    }
+    if (urlNamespaces.join(',') !== namespacesKey) setNamespaces(urlNamespaces)
 
     // Restore helm release from URL (back navigation)
     const releaseParam = searchParams.get('release')
@@ -879,7 +828,7 @@ function AppInner() {
 
   return (
     <PortForwardProvider>
-    <div className="relative flex flex-col h-screen bg-theme-base min-w-[800px]">
+    <div className="flex flex-col h-screen bg-theme-base min-w-[800px]">
       {/* Header */}
       <header className="relative z-50 flex items-center justify-between px-4 py-2 bg-theme-base/90 backdrop-blur-sm border-b border-theme-border/50">
         {/* Left: Logo + Cluster info */}
@@ -980,13 +929,17 @@ function AppInner() {
 
         {/* Right: Controls */}
         <div className="flex items-center gap-3 shrink-0">
-          <NamespaceSwitcher
-            ref={namespaceSwitcherRef}
+          {/* Namespace selector with search */}
+          <NamespaceSelector
+            ref={namespaceSelectorRef}
+            value={namespaces}
+            onChange={setNamespaces}
+            namespaces={availableNamespaces}
+            namespacesError={namespacesError}
             disabled={mainView === 'helm'}
             disabledTooltip="Helm view always shows all namespaces"
           />
 
-
           {/* Command palette trigger */}
           <button
             onClick={() => setShowCommandPalette(true)}
@@ -1211,7 +1164,6 @@ function AppInner() {
                         namespaces={availableNamespaces}
                         onSelect={(ns) => {
                           setNamespaces([ns])
-                          setActiveNamespace.mutate({ namespaces: [ns] })
                           // Large clusters need server-side filtering — reconnect SSE with namespace
                           setForceNamespaceFilter([ns])
                         }}
@@ -1248,9 +1200,9 @@ function AppInner() {
                     selectedNodeId={selectedResource ? `${apiResourceToNodeIdPrefix(selectedResource.kind)}-${selectedResource.namespace}-${selectedResource.name}` : undefined}
                     paused={topologyPaused}
                     onTogglePause={handleTogglePause}
-                    onMaximizeNamespace={(ns) => setActiveNamespace.mutate({ namespaces: [ns] })}
+                    onMaximizeNamespace={(ns) => setNamespaces([ns])}
                     namespaceBreadcrumb={namespaces.length === 1 ? namespaces[0] : undefined}
-                    onClearNamespace={namespaces.length >= 1 ? () => setActiveNamespace.mutate({ namespaces: [] }) : undefined}
+                    onClearNamespace={namespaces.length === 1 ? () => setNamespaces([]) : undefined}
                     namespacesKey={namespaces.join(',')}
                   />
 
@@ -1298,10 +1250,7 @@ function AppInner() {
             initialTimeRange={(searchParams.get('time') as '5m' | '30m' | '1h' | '6h' | '24h' | 'all') || undefined}
             requiresNamespaceFilter={topology?.requiresNamespaceFilter && namespaces.length === 0}
             availableNamespaces={availableNamespaces}
-            onNamespaceSelect={(ns) => {
-              setNamespaces([ns])
-              setActiveNamespace.mutate({ namespaces: [ns] })
-            }}
+            onNamespaceSelect={(ns) => setNamespaces([ns])}
           />
         )}
 
@@ -1456,14 +1405,9 @@ function AppInner() {
             { name },
             // Namespace filter from the previous context may not exist in the
             // new one — clear it so resource lists don't silently go empty.
-            // The server clears all per-user picks on context switch already;
-            // local state mirrors that via the namespace-scope effect.
             { onSettled: () => setNamespaces([]) },
           )}
-          onSetNamespaces={(ns) => {
-            setNamespaces(ns)
-            setActiveNamespace.mutate({ namespaces: ns })
-          }}
+          onSetNamespaces={setNamespaces}
           onToggleTheme={toggleTheme}
           onShowDiagnostics={() => setShowDiagnostics(true)}
         />

package/src/api/client.ts

@@ -1348,7 +1348,6 @@ export interface AvailablePort {
   protocol: string
   containerName?: string
   name?: string
-  scheme?: 'http' | 'https'
 }
 
 export function useAvailablePorts(type: 'pod' | 'service', namespace: string, name: string) {
@@ -2451,87 +2450,6 @@ export function useSwitchContext() {
   })
 }
 
-// ============================================================================
-// Active namespace switcher
-// ============================================================================
-
-export interface NamespaceScope {
-  actives: string[]
-  kubeconfigNamespace: string
-  /**
-   * 'cluster-wide' — no per-user pick; user can list across namespaces.
-   * 'namespace'    — per-user view filter pinned to one or more namespaces.
-   * 'restricted'   — user can't list namespaces and isn't pinned to any.
-   */
-  mode: 'cluster-wide' | 'namespace' | 'restricted'
-  accessibleNamespaces: string[]
-  /** false when accessibleNamespaces is a best-effort short list (no list perm). */
-  authoritative: boolean
-  /** false when clearing would leave no usable namespace fallback. */
-  canClearNamespace: boolean
-}
-
-export function useNamespaceScope() {
-  return useQuery<NamespaceScope>({
-    queryKey: ['namespace-scope'],
-    queryFn: () => fetchJSON('/cluster/namespace-scope'),
-    staleTime: 30000,
-  })
-}
-
-const NAMESPACE_SWITCH_TIMEOUT = 5000
-
-export function useSetActiveNamespace() {
-  const queryClient = useQueryClient()
-  return useMutation<NamespaceScope, Error, { namespaces: string[] }>({
-    meta: {
-      // Surface 403s (RBAC drift, denied bookmark) and network errors via the
-      // global toast. Without this, App.tsx call sites that mutate without
-      // their own onError (bookmark reconciliation, back-nav, topology
-      // maximize/clear, command palette) silently revert when the scope
-      // refetches and the mirror effect overwrites local state.
-      errorMessage: 'Failed to update namespace selection',
-    },
-    mutationFn: async ({ namespaces }) => {
-      const controller = new AbortController()
-      const timeoutId = setTimeout(() => controller.abort(), NAMESPACE_SWITCH_TIMEOUT)
-      try {
-        const response = await apiFetch(`${getApiBase()}/cluster/namespace`, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ namespaces }),
-          signal: controller.signal,
-        })
-        clearTimeout(timeoutId)
-        if (!response.ok) {
-          const error = await response.json().catch(() => ({ error: 'Unknown error' }))
-          throw new Error(error.error || `HTTP ${response.status}`)
-        }
-        return response.json()
-      } catch (error) {
-        clearTimeout(timeoutId)
-        if (error instanceof Error && error.name === 'AbortError') {
-          throw new Error('Namespace switch timed out. The cluster may be unreachable.')
-        }
-        throw error
-      }
-    },
-    onSuccess: () => {
-      // The user's view filter changed; every cached query result was
-      // shaped by the previous filter, so drop and refetch.
-      queryClient.removeQueries()
-      queryClient.invalidateQueries()
-    },
-    onError: () => {
-      // A failed switch can leave the server's stored pick out of sync
-      // with the cached scope (network timeout after the server wrote;
-      // partial mutation). Refetch so the displayed picker matches what
-      // the server actually persisted instead of what we assumed.
-      queryClient.invalidateQueries({ queryKey: ['namespace-scope'] })
-    },
-  })
-}
-
 // ============================================================================
 // Image Filesystem Inspection
 // ============================================================================

package/src/components/portforward/PortForwardManager.tsx

@@ -42,44 +42,11 @@ interface PortForwardSession {
   localPort: number
   listenAddress: string
   serviceName?: string
-  servicePort?: number
-  scheme?: 'http' | 'https'
   startedAt: string
   status: 'running' | 'stopped' | 'error'
   error?: string
 }
 
-function sessionUrl(session: PortForwardSession): string {
-  return `${session.scheme || 'http'}://localhost:${session.localPort}`
-}
-
-function formatPortLabel(session: PortForwardSession): string {
-  if (session.servicePort && session.servicePort !== session.podPort) {
-    return `${session.servicePort} → ${session.podPort}`
-  }
-  return String(session.podPort)
-}
-
-// Build the recreate request body for toggle-listen / change-port flows.
-// When the original session was service-resolved, the recreate must also go
-// through the service path (servicePort + serviceName). Sending podName+podPort
-// would skip resolution and validate against the pod's declared containerPorts,
-// which can fail even though the original session worked: services can route to
-// any port the container actually listens on, regardless of containerPort
-// declarations. Going through service also re-resolves to a currently-running
-// pod if the original has since been replaced.
-function buildRecreateBody(session: PortForwardSession, overrides: { localPort: number; listenAddress: string }) {
-  const base = {
-    namespace: session.namespace,
-    localPort: overrides.localPort,
-    listenAddress: overrides.listenAddress,
-  }
-  if (session.serviceName && session.servicePort) {
-    return { ...base, serviceName: session.serviceName, podPort: session.servicePort }
-  }
-  return { ...base, podName: session.podName, podPort: session.podPort }
-}
-
 // --- Shared query ------------------------------------------------------------
 
 function usePortForwardQuery() {
@@ -463,7 +430,14 @@ export function PortForwardPanel() {
       const res = await fetch(apiUrl('/portforwards'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(buildRecreateBody(session, { localPort: session.localPort, listenAddress: newAddress })),
+        body: JSON.stringify({
+          namespace: session.namespace,
+          podName: session.podName || undefined,
+          serviceName: session.serviceName || undefined,
+          podPort: session.podPort,
+          localPort: session.localPort,
+          listenAddress: newAddress,
+        }),
       })
       if (!res.ok) {
         const error = await res.json().catch(() => ({}))
@@ -510,7 +484,14 @@ export function PortForwardPanel() {
       const res = await fetch(apiUrl('/portforwards'), {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify(buildRecreateBody(session, { localPort: newPort, listenAddress: session.listenAddress })),
+        body: JSON.stringify({
+          namespace: session.namespace,
+          podName: session.podName || undefined,
+          serviceName: session.serviceName || undefined,
+          podPort: session.podPort,
+          localPort: newPort,
+          listenAddress: session.listenAddress,
+        }),
       })
       if (!res.ok) {
         const error = await res.json().catch(() => ({}))
@@ -540,7 +521,7 @@ export function PortForwardPanel() {
     async (session: PortForwardSession) => {
       commitInteraction()
       try {
-        await navigator.clipboard.writeText(sessionUrl(session))
+        await navigator.clipboard.writeText(`http://localhost:${session.localPort}`)
       } catch (err) {
         // Clipboard API can reject in non-secure contexts, denied permissions, or
         // when the document isn't focused. Surface the failure — the checkmark
@@ -563,7 +544,7 @@ export function PortForwardPanel() {
   const handleOpenUrl = useCallback(
     (session: PortForwardSession) => {
       commitInteraction()
-      openExternal(sessionUrl(session))
+      openExternal(`http://localhost:${session.localPort}`)
     },
     [commitInteraction]
   )
@@ -645,7 +626,7 @@ export function PortForwardPanel() {
       </div>
 
       {/* Sessions list */}
-      <div className="max-h-[28rem] overflow-y-auto">
+      <div className="max-h-64 overflow-y-auto">
         {isQueryError ? (
           <div className="p-3 text-xs bg-red-500/10 border-b border-theme-border">
             <div className={clsx('badge-sm mb-1 inline-block', SEVERITY_BADGE.error)}>
@@ -670,84 +651,37 @@ export function PortForwardPanel() {
               <div
                 key={session.id}
                 className={clsx(
-                  'p-3 space-y-1',
+                  'p-3',
                   session.status === 'error' ? 'bg-red-500/10' : 'hover:bg-theme-elevated'
                 )}
               >
-                {/* Row 1: status dot + name | stop button */}
                 <div className="flex items-start justify-between gap-2">
-                  <div className="flex items-start gap-2 min-w-0 flex-1">
-                    <span
-                      className={clsx(
-                        'w-2 h-2 rounded-full shrink-0 mt-[7px]',
-                        session.status === 'running' ? 'bg-green-500' : 'bg-red-500'
-                      )}
-                    />
-                    <span className="text-sm text-theme-text-primary font-medium break-all line-clamp-2">
-                      {session.serviceName || session.podName}
-                    </span>
-                    {session.status === 'error' && (
-                      <span className={clsx('badge-sm shrink-0', SEVERITY_BADGE.error)}>Failed</span>
-                    )}
-                  </div>
-                  <div className="flex items-center gap-0.5 shrink-0">
-                    {session.status === 'running' && (
-                      <Tooltip
-                        content={session.listenAddress === '0.0.0.0' ? 'Switch to localhost only' : 'Allow access from other machines'}
-                        delay={300} position="bottom" disabled={!isPanelOpen}
-                      >
-                      <button
-                        onClick={() => toggleListenAddress(session)}
-                        disabled={togglingId === session.id || changingPortId === session.id}
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span
                         className={clsx(
-                          'flex items-center justify-center p-1.5 rounded transition-colors',
-                          session.listenAddress === '0.0.0.0'
-                            ? `${SEVERITY_BADGE.warning} hover:bg-amber-500/30`
-                            : 'text-theme-text-disabled hover:text-theme-text-primary hover:bg-theme-hover'
-                        )}
-                      >
-                        {togglingId === session.id ? (
-                          <Loader2 className="w-3.5 h-3.5 animate-spin" />
-                        ) : session.listenAddress === '0.0.0.0' ? (
-                          <Globe className="w-3.5 h-3.5" />
-                        ) : (
-                          <Monitor className="w-3.5 h-3.5" />
+                          'w-2 h-2 rounded-full shrink-0',
+                          session.status === 'running' ? 'bg-green-500' : 'bg-red-500'
                         )}
-                      </button>
-                      </Tooltip>
+                      />
+                      <span className="text-sm text-theme-text-primary font-medium truncate">
+                        {session.serviceName || session.podName}
+                      </span>
+                      {session.status === 'error' && (
+                        <span className={clsx('badge-sm', SEVERITY_BADGE.error)}>Failed</span>
+                      )}
+                    </div>
+                    <div className="mt-1 text-xs text-theme-text-disabled">
+                      {session.namespace} · Port {session.podPort}
+                    </div>
+                    {session.status === 'error' && session.error && (
+                      <div className="mt-1.5 text-xs text-red-400 bg-red-500/10 px-2 py-1 rounded">
+                        {session.error}
+                      </div>
                     )}
-                    <Tooltip content={session.status === 'error' ? 'Dismiss' : 'Stop'} delay={300} position="bottom" disabled={!isPanelOpen}>
-                    <button
-                      onClick={() => {
-                        commitInteraction()
-                        stopPortForward(session.id)
-                      }}
-                      disabled={stoppingIds.has(session.id)}
-                      className="p-1.5 text-theme-text-tertiary hover:text-red-400 hover:bg-theme-hover rounded disabled:opacity-50"
-                    >
-                      <Trash2 className="w-3.5 h-3.5" />
-                    </button>
-                    </Tooltip>
-                  </div>
-                </div>
-
-                {/* Row 2: namespace · port translation */}
-                <div className="text-xs text-theme-text-disabled">
-                  {session.namespace} · {formatPortLabel(session)}
-                </div>
-
-                {/* Row 2.5: error message */}
-                {session.status === 'error' && session.error && (
-                  <div className="text-xs text-red-400 bg-red-500/10 px-2 py-1 rounded">
-                    {session.error}
-                  </div>
-                )}
-
-                {/* Row 3: URL (+ optional toggle) | copy + open */}
-                {session.status === 'running' && (
-                  <div className="pt-0.5 flex items-center justify-between gap-2">
-                    <div className="flex items-center gap-1.5 min-w-0">
-                      {editingPortId === session.id ? (
+                    {session.status === 'running' && (
+                      <div className="mt-1.5 flex items-center gap-2">
+                        {editingPortId === session.id ? (
                           <div className="flex items-center text-xs bg-theme-base rounded text-accent-text font-mono">
                             <span className="pl-2 py-1 text-theme-text-disabled select-none">
                               {session.listenAddress === '0.0.0.0' ? '0.0.0.0' : 'localhost'}:
@@ -790,7 +724,6 @@ export function PortForwardPanel() {
                             />
                           </div>
                         ) : (
-                          <>
                           <Tooltip content="Click to change local port" delay={300} position="bottom" disabled={!isPanelOpen}>
                           <code
                             className={clsx(
@@ -814,33 +747,74 @@ export function PortForwardPanel() {
                             <PenLine className="w-3 h-3 text-theme-text-disabled opacity-0 group-hover/port:opacity-100 transition-opacity" />
                           </code>
                           </Tooltip>
-                          </>
-                      )}
-                    </div>
-                    <div className="flex items-center gap-0.5 shrink-0">
-                      <Tooltip content={copiedId === session.id ? 'Copied!' : 'Copy URL'} delay={300} position="bottom" disabled={!isPanelOpen}>
-                      <button
-                        onClick={() => handleCopyUrl(session)}
-                        className="p-1 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover rounded"
-                      >
-                        {copiedId === session.id ? (
-                          <Check className="w-3.5 h-3.5 text-green-400" />
-                        ) : (
-                          <Copy className="w-3.5 h-3.5" />
                         )}
-                      </button>
-                      </Tooltip>
-                      <Tooltip content="Open in browser" delay={300} position="bottom" disabled={!isPanelOpen}>
-                      <button
-                        onClick={() => handleOpenUrl(session)}
-                        className="p-1 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover rounded"
-                      >
-                        <ExternalLink className="w-3.5 h-3.5" />
-                      </button>
-                      </Tooltip>
-                    </div>
+                        <Tooltip
+                          content={session.listenAddress === '0.0.0.0' ? 'Switch to localhost only' : 'Allow access from other machines'}
+                          delay={300} position="bottom" disabled={!isPanelOpen}
+                        >
+                        <button
+                          onClick={() => toggleListenAddress(session)}
+                          disabled={togglingId === session.id || changingPortId === session.id}
+                          className={clsx(
+                            'flex items-center gap-1 px-1.5 py-0.5 text-xs rounded transition-colors',
+                            session.listenAddress === '0.0.0.0'
+                              ? `${SEVERITY_BADGE.warning} hover:bg-amber-500/30`
+                              : 'bg-theme-elevated text-theme-text-tertiary hover:bg-theme-hover hover:text-theme-text-primary'
+                          )}
+                        >
+                          {togglingId === session.id ? (
+                            <Loader2 className="w-3 h-3 animate-spin" />
+                          ) : session.listenAddress === '0.0.0.0' ? (
+                            <Globe className="w-3 h-3" />
+                          ) : (
+                            <Monitor className="w-3 h-3" />
+                          )}
+                          {session.listenAddress === '0.0.0.0' ? 'network' : 'local'}
+                        </button>
+                        </Tooltip>
+                      </div>
+                    )}
                   </div>
-                )}
+
+                  <div className="flex items-center gap-1 shrink-0">
+                    {session.status === 'running' && (
+                      <>
+                        <Tooltip content={copiedId === session.id ? 'Copied!' : 'Copy URL'} delay={300} position="bottom" disabled={!isPanelOpen}>
+                        <button
+                          onClick={() => handleCopyUrl(session)}
+                          className="p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover rounded"
+                        >
+                          {copiedId === session.id ? (
+                            <Check className="w-3.5 h-3.5 text-green-400" />
+                          ) : (
+                            <Copy className="w-3.5 h-3.5" />
+                          )}
+                        </button>
+                        </Tooltip>
+                        <Tooltip content="Open in browser" delay={300} position="bottom" disabled={!isPanelOpen}>
+                        <button
+                          onClick={() => handleOpenUrl(session)}
+                          className="p-1.5 text-theme-text-tertiary hover:text-theme-text-primary hover:bg-theme-hover rounded"
+                        >
+                          <ExternalLink className="w-3.5 h-3.5" />
+                        </button>
+                        </Tooltip>
+                      </>
+                    )}
+                    <Tooltip content={session.status === 'error' ? 'Dismiss' : 'Stop'} delay={300} position="bottom" disabled={!isPanelOpen}>
+                    <button
+                      onClick={() => {
+                        commitInteraction()
+                        stopPortForward(session.id)
+                      }}
+                      disabled={stoppingIds.has(session.id)}
+                      className="p-1.5 text-theme-text-tertiary hover:text-red-400 hover:bg-theme-hover rounded disabled:opacity-50"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                    </Tooltip>
+                  </div>
+                </div>
               </div>
             ))}
           </div>