packages/console-frontend/src/components/ui/json-viewer.tsx-85-95 (1)

85-95: ⚠️ Potential issue | 🟡 Minor

Potential stack overflow with deeply nested or circular data.

The recursive JsonValue component has no protection against circular references. While maxDepth limits rendering depth, if data contains circular references and maxDepth is set high, or if someone passes a self-referencing object, this could cause issues. The JSON.stringify in the copy function would also throw on circular data.

Consider adding a WeakSet to track visited objects, or document that circular references are unsupported.

packages/console-frontend/src/components/ui/json-viewer.tsx-19-19 (1)

19-19: ⚠️ Potential issue | 🟡 Minor

Invalid Tailwind class: text-yellow missing shade.

The text-yellow class is incomplete. Tailwind color utilities require a shade suffix (e.g., text-yellow-400). Without it, boolean values won't be styled correctly.

Proposed fix

-  boolean: 'text-yellow',
+  boolean: 'text-yellow-400',

packages/console-frontend/src/components/ui/pagination.tsx-29-30 (1)

29-30: ⚠️ Potential issue | 🟡 Minor

Edge case: incorrect display when totalItems is 0.

When there are no items, startItem computes to 1 while endItem is 0, resulting in "1-0 of 0" which is confusing. Consider guarding against this:

Proposed fix

- const startItem = (currentPage - 1) * pageSize + 1
- const endItem = Math.min(currentPage * pageSize, totalItems)
+ const startItem = totalItems === 0 ? 0 : (currentPage - 1) * pageSize + 1
+ const endItem = Math.min(currentPage * pageSize, totalItems)

.gitignore-27-28 (1)

27-28: ⚠️ Potential issue | 🟡 Minor

The .env* pattern may ignore example environment files.

The wildcard pattern .env* will match .env.example or .env.template files, which are often committed to the repository as safe templates (without secrets) to help developers set up their local environment.

🔧 Proposed fix to preserve example files

 # Environment
-.env*
+.env
+.env.local
+.env.*.local
+!.env.example

packages/console-frontend/src/components/layout/Sidebar.tsx-64-67 (1)

64-67: ⚠️ Potential issue | 🟡 Minor

Misleading comment and no-op effect.

The comment states "Close mobile menu on route change" but the empty dependency array [] means this only runs once on mount. Since isMobileMenuOpen initializes to false, this effect does nothing useful.

Either:

1. Add pathname to the dependency array to actually close on route changes, or
2. Remove this effect entirely since the onClick handler on each Link (line 125) already closes the menu.

Option 1: Fix the effect to work as documented

   // Close mobile menu on route change
   useEffect(() => {
     setIsMobileMenuOpen(false)
-  }, [])
+  }, [pathname])

Option 2: Remove the redundant effect

-  // Close mobile menu on route change
-  useEffect(() => {
-    setIsMobileMenuOpen(false)
-  }, [])
-

packages/console-frontend/README.md-158-162 (1)

158-162: ⚠️ Potential issue | 🟡 Minor

PORT environment variable may not work with Vite.

Vite doesn't use the PORT environment variable by default. The server port is configured in vite.config.ts. Unless custom handling is added, this suggestion won't work as documented.

📝 Suggested documentation fix

 2. Use a different port:
    ```bash
-   # Edit vite.config.ts and change server.port, or:
-   PORT=3114 pnpm dev
+   # Edit vite.config.ts and change server.port
    ```
</details>

Or alternatively, add `PORT` handling in `vite.config.ts`:

```typescript
server: {
  port: parseInt(process.env.PORT || '3113', 10),
}

lefthook.yml-5-5 (1)

5-5: ⚠️ Potential issue | 🟡 Minor

Glob pattern may miss files in subdirectories.

The glob *.{ts,tsx,js,json} only matches files directly in the packages/console-frontend/ root directory. Most source files are typically in src/ and other subdirectories, which this pattern won't capture.

🔧 Proposed fix to match files recursively

-      glob: "*.{ts,tsx,js,json}"
+      glob: "**/*.{ts,tsx,js,json}"

packages/console-rust/Cargo.toml-13-13 (1)

13-13: ⚠️ Potential issue | 🟡 Minor

Fix formatting issue and comment misplacement on line 13.

Line 13 has a malformed comment merged with the dependency declaration, and the comment "# Async runtime" is incorrectly associated with iii-sdk when it should describe the tokio dependency below it.

🔧 Proposed fix

-iii-sdk = { path = "../../../iii-engine/packages/rust/iii" }# Async runtime
+iii-sdk = { path = "../../../iii-engine/packages/rust/iii" }
+
+# Async runtime
 tokio = { version = "1", features = ["full"] }

The iii-sdk path dependency pointing to ../../../iii-engine/packages/rust/iii will break builds for anyone without that exact sibling repository structure. Consider publishing iii-sdk to a registry or using a git dependency for better portability, and ensure CI/CD and other developers have documented access to the expected path structure.

README.md-386-392 (1)

386-392: ⚠️ Potential issue | 🟡 Minor

Update tech stack documentation and fix WebSocket port defaults in README.

The Tech Stack section (lines 386-392) still references Next.js 16 and SWR, but the project now uses Vite 7.3.1 and @tanstack/react-query. Additionally, the README documents the WebSocket port default as 31112, but packages/console-frontend/src/api/config.ts shows the actual default is 3112. Update both the tech stack list and all WebSocket port references in the README to match the current configuration.

packages/console-frontend/src/components/filters/TimeRangeFilter.tsx-36-44 (1)

36-44: ⚠️ Potential issue | 🟡 Minor

Add defaultPreset to the component or remove it from the interface.

The defaultPreset prop is declared in TimeRangeFilterProps but is neither destructured in the function parameters nor used anywhere in the implementation. Either wire it in (e.g., applying the preset on mount when value is undefined) or remove it from the interface to avoid a misleading API.

Example: Apply default preset on mount

-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 export function TimeRangeFilter({
   value,
   onChange,
   onClear,
   className = '',
   showCustomOption = true,
+  defaultPreset,
   compactMode = false,
 }: TimeRangeFilterProps) {
+  useEffect(() => {
+    if (!value && defaultPreset) {
+      const { startTime, endTime } = getTimeRangeFromPreset(defaultPreset)
+      onChange?.({ startTime, endTime, preset: defaultPreset })
+    }
+  }, [defaultPreset, value, onChange])

packages/console-frontend/src/api/events/invocation.ts-8-12 (1)

8-12: ⚠️ Potential issue | 🟡 Minor

Use nullish coalescing instead of logical OR for input parameter.
input || {} converts falsy values like 0, false, and '' to {}. Since input accepts unknown type, these are valid inputs that should be preserved. Use input ?? {} to only default on undefined or null.

Proposed fix

-      body: JSON.stringify({ function_path: functionPath, input: input || {} }),
+      body: JSON.stringify({ function_path: functionPath, input: input ?? {} }),

packages/console-frontend/src/components/filters/TimeRangeFilter.tsx-145-152 (1)

145-152: ⚠️ Potential issue | 🟡 Minor

Guard against invalid datetime inputs.
When an input field is cleared, parseDateTimeLocal returns NaN. The current check startTime >= endTime does not catch NaN because comparisons with NaN always return false, allowing invalid values to be passed to the onChange handler.

Proposed fix (finite checks)

   const startTime = parseDateTimeLocal(customStart)
   const endTime = parseDateTimeLocal(customEnd)
 
-  if (startTime >= endTime) {
+  if (!Number.isFinite(startTime) || !Number.isFinite(endTime) || startTime >= endTime) {
     // Invalid range - end must be after start
     return
   }

packages/console-frontend/src/components/traces/ServiceBreakdown.tsx-61-64 (1)

61-64: ⚠️ Potential issue | 🟡 Minor

Potential division by zero when calculating percentages.

If data.total_duration_ms is 0 (e.g., for a trace with zero-duration spans or edge cases), this will produce Infinity or NaN percentages, which could break the pie chart rendering.

Proposed fix

     const totalDuration = data.total_duration_ms
     for (const stats of statsMap.values()) {
-      stats.percentage = (stats.totalDuration / totalDuration) * 100
+      stats.percentage = totalDuration > 0 ? (stats.totalDuration / totalDuration) * 100 : 0
     }

packages/console-frontend/src/api/observability/traces.ts-97-104 (1)

97-104: ⚠️ Potential issue | 🟡 Minor

Same inconsistency as logs.ts: fallback path doesn't use unwrapResponse.

For consistency with the primary DEVTOOLS path (line 91), the MANAGEMENT fallback should also use unwrapResponse.

Proposed fix

   const res = await fetch(`${MANAGEMENT_API}/otel/traces`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(body),
   })
   if (!res.ok) throw new Error('Failed to fetch traces')
-  return res.json()
+  return unwrapResponse<TracesResponse>(res)
 }

packages/console-frontend/src/api/observability/logs.ts-99-106 (1)

99-106: ⚠️ Potential issue | 🟡 Minor

Inconsistent response handling between primary and fallback API paths.

The primary DEVTOOLS path uses unwrapResponse() (line 93) while the fallback MANAGEMENT path returns res.json() directly (line 105). This could lead to different response shapes if unwrapResponse performs any transformation or unwrapping logic.

Proposed fix for consistency

   const res = await fetch(`${MANAGEMENT_API}/otel/logs`, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(body),
   })
   if (!res.ok) throw new Error('Failed to fetch OTEL logs')
-  return res.json()
+  return unwrapResponse<OtelLogsResponse>(res)
 }

packages/console-frontend/src/components/traces/SpanTagsTab.tsx-22-27 (1)

22-27: ⚠️ Potential issue | 🟡 Minor

Unhandled promise rejection on clipboard write.

navigator.clipboard.writeText() returns a Promise that isn't being awaited or caught. This could cause unhandled promise rejections in non-secure contexts (non-HTTPS) or when clipboard permissions are denied.

Proposed fix with error handling

-  const copyToClipboard = (key: string, value: unknown) => {
+  const copyToClipboard = async (key: string, value: unknown) => {
     const text = `${key}: ${JSON.stringify(value)}`
-    navigator.clipboard.writeText(text)
-    setCopiedKey(key)
-    setTimeout(() => setCopiedKey(null), 2000)
+    try {
+      await navigator.clipboard.writeText(text)
+      setCopiedKey(key)
+      setTimeout(() => setCopiedKey(null), 2000)
+    } catch {
+      // Clipboard API may fail in non-secure contexts
+      console.warn('Failed to copy to clipboard')
+    }
   }

packages/console-frontend/src/components/ui/card.tsx-27-36 (1)

27-36: ⚠️ Potential issue | 🟡 Minor

Fix CardTitle ref type to match the rendered element.

CardTitle renders an <h3> element but the ref is typed as HTMLParagraphElement. The ref type should be HTMLHeadingElement to match the heading element being rendered.

🔧 Suggested fix

-export const CardTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+export const CardTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.HTMLAttributes<HTMLHeadingElement>

packages/console-frontend/src/api/observability/metrics.ts-132-165 (1)

132-165: ⚠️ Potential issue | 🟡 Minor

Remove redundant rollups retry or switch primary endpoint.

Both the try block and fallback call MANAGEMENT_API/rollups, which duplicates the request and never attempts devtools.

🛠️ Suggested fix (align with devtools-first pattern)

-    const res = await fetch(`${MANAGEMENT_API}/rollups`, {
+    const res = await fetch(`${DEVTOOLS_API}/rollups`, {

packages/console-frontend/src/components/traces/FlameGraph.tsx-264-271 (1)

264-271: ⚠️ Potential issue | 🟡 Minor

Clamp horizontal pan to graph bounds.

Currently panning can move beyond the rendered graph and show empty space.

🛠️ Suggested fix

-    } else {
-      setPanOffset((prev) => Math.max(0, prev + e.deltaY))
-    }
+    } else {
+      const container = containerRef.current
+      const width = container?.clientWidth ?? 0
+      const visibleWidth = Math.max(0, width - PADDING * 2)
+      const graphWidth = visibleWidth * zoomLevel
+      const maxPan = Math.max(0, graphWidth - visibleWidth)
+      setPanOffset((prev) => Math.min(maxPan, Math.max(0, prev + e.deltaY)))
+    }

packages/console-frontend/src/components/traces/SpanBaggageTab.tsx-44-46 (1)

44-46: ⚠️ Potential issue | 🟡 Minor

JSON pretty-printing won't display correctly.

JSON.stringify(value, null, 2) adds newlines and indentation, but without whitespace-pre or <pre> styling, the formatting will collapse into a single line.

♻️ Suggested fix

-            <div className="text-sm text-gray-300 break-all font-mono">
+            <div className="text-sm text-gray-300 break-all font-mono whitespace-pre-wrap">
               {typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)}
             </div>

packages/console-frontend/src/routes/logs.tsx-193-223 (1)

193-223: ⚠️ Potential issue | 🟡 Minor

Pagination reset doesn't react to filter changes.

The useEffect at line 220 has an empty dependency array, so it only runs once on mount. When users change filters (searchQuery, activeLevelFilters, timeRange, or selectedSeverity), the filtered results update but the current page isn't reset, potentially leaving users on an empty page.

Fix by adding filter dependencies:

✅ Suggested dependency fix

-  useEffect(() => {
-    setCurrentPage(1)
-  }, [])
+  useEffect(() => {
+    setCurrentPage(1)
+  }, [searchQuery, activeLevelFilters, timeRange, selectedSeverity])

packages/console-frontend/src/routes/index.tsx-156-165 (1)

156-165: ⚠️ Potential issue | 🟡 Minor

Live indicator can be true even when WS fails.

setStreamConnected(true) runs immediately after connect(), regardless of whether the WebSocket actually opens or later disconnects. This can show “Live” when the stream isn’t connected. Consider wiring connection callbacks from createMetricsSubscription so state reflects real status.

🔌 Example wiring (requires updating createMetricsSubscription)

-    const subscription = createMetricsSubscription(queryClient)
-    subscription.connect()
-    setStreamConnected(true)
+    const subscription = createMetricsSubscription(queryClient, {
+      onOpen: () => setStreamConnected(true),
+      onClose: () => setStreamConnected(false),
+      onError: () => setStreamConnected(false),
+    })
+    subscription.connect()

packages/console-frontend/src/routes/config.tsx-137-140 (1)

137-140: ⚠️ Potential issue | 🟡 Minor

Endpoint refresh stops if one refetch fails.

Promise.all rejects on the first failure, so checkEndpoints() never runs when an adapter/status refetch fails. Since endpoint health is independent, use Promise.allSettled (or a try/finally) to ensure the refresh still happens.

✅ Always run endpoint checks

   const loadData = async () => {
-    await Promise.all([refetchAdapters(), refetchStatus()])
-    checkEndpoints()
+    await Promise.allSettled([refetchAdapters(), refetchStatus()])
+    await checkEndpoints()
   }

packages/console-frontend/src/routes/states.tsx-97-151 (1)

97-151: ⚠️ Potential issue | 🟡 Minor

Group counts can go stale after add/edit/delete.

Mutations refetch items, but group counts in the sidebar are based on groupsData. After add/edit/delete, the group list can be out of sync until a manual refresh. Trigger a groups refetch after successful mutations.

🔄 Keep group counts in sync

       await setStateItem(selectedGroupId, newKey, value)
       setNewKey('')
       setNewValue('')
       setShowAddModal(false)
       refetchItems()
+      refetchGroups()
@@
       await deleteStateItem(selectedGroupId, item.key)
       refetchItems()
+      refetchGroups()
@@
       await setStateItem(selectedGroupId, item.key, value)
       setEditingItem(null)
       setEditValue('')
       refetchItems()
+      refetchGroups()

packages/console-frontend/src/components/traces/ViewSwitcher.tsx (1)

1-42: Clean implementation with proper TypeScript typing.

The component is well-structured with correct icon usage, proper event handling, and clean conditional styling. One optional enhancement for accessibility: consider adding aria-pressed to indicate the active state to screen readers.

♿ Optional accessibility enhancement

           <button
             key={id}
             type="button"
             onClick={() => onViewChange(id)}
+            aria-pressed={isActive}
             className={`

packages/console-frontend/src/components/ui/error-boundary.tsx (1)

28-46: Consider adding a reset mechanism for error recovery.

The error boundary works correctly, but once an error is caught, users must remount the component to recover. Adding a reset callback would improve UX by allowing users to retry without navigating away.

♻️ Optional enhancement with reset support

 interface Props {
   children: ReactNode
   fallback?: ReactNode
+  onReset?: () => void
 }

 export class ErrorBoundary extends Component<Props, State> {
   // ... existing code ...

+  resetErrorBoundary = () => {
+    this.props.onReset?.()
+    this.setState({ hasError: false, error: undefined })
+  }

   render() {
     if (this.state.hasError) {
       if (this.props.fallback) {
         return this.props.fallback
       }

       return (
         <div className="p-4 bg-red-950/20 border border-red-500/30 rounded-lg">
           <div className="flex items-center gap-2 text-red-400 mb-2">
             <AlertCircle className="w-4 h-4" />
             <span className="text-sm font-medium">Something went wrong</span>
           </div>
           <p className="text-xs text-gray-400">{this.state.error?.message}</p>
+          <button
+            onClick={this.resetErrorBoundary}
+            className="mt-2 text-xs text-blue-400 hover:text-blue-300"
+          >
+            Try again
+          </button>
         </div>
       )
     }
     // ...
   }
 }

packages/console-frontend/src/components/ui/json-viewer.tsx (2)

71-80: Add accessibility attributes to collapsible buttons.

The collapse/expand buttons lack aria-expanded and aria-label attributes, which are needed for screen reader users to understand the button's purpose and state.

Proposed fix for array collapse button

         <button
           onClick={() => setIsCollapsed(!isCollapsed)}
           className="inline-flex items-center hover:bg-dark-gray/50 rounded px-0.5 -ml-0.5"
+          aria-expanded={!isCollapsed}
+          aria-label={isCollapsed ? `Expand array with ${value.length} items` : 'Collapse array'}
         >

Apply the same pattern to the object collapse button at lines 119-128.

---

164-169: Handle clipboard API errors and cleanup timeout on unmount.

The navigator.clipboard.writeText() call is async but errors aren't handled—clipboard access can fail (permissions denied, non-HTTPS context). Additionally, the setTimeout could fire after component unmount.

Proposed fix with error handling and cleanup

+import { useCallback, useEffect, useRef, useState } from 'react'
...
 export function JsonViewer({
   data,
   collapsed = false,
   depth = 0,
   maxDepth = 5,
   className = '',
 }: JsonViewerProps) {
   const [copied, setCopied] = useState(false)
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [])

   const copyToClipboard = useCallback(() => {
     const text = typeof data === 'string' ? data : JSON.stringify(data, null, 2)
-    navigator.clipboard.writeText(text)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
+    navigator.clipboard.writeText(text).then(
+      () => {
+        setCopied(true)
+        timeoutRef.current = setTimeout(() => setCopied(false), 2000)
+      },
+      (err) => {
+        console.error('Failed to copy:', err)
+      }
+    )
   }, [data])

.gitignore (2)

11-15: Consider using wildcards for better maintainability.

The build output patterns are hardcoded to specific package names. If packages are renamed or new packages are added, these patterns will require manual updates.

♻️ Proposed refactor for more generic patterns

 # Build outputs
-packages/console-frontend/dist/
-packages/console-frontend/dist-binary/
-packages/console-rust/target/
-packages/console-rust/assets/
+packages/*/dist/
+packages/*/dist-binary/
+packages/*/target/
+packages/*/assets/

---

30-35: The *.log pattern is very broad.

Line 35 ignores all .log files, which makes the more specific patterns on lines 31-34 redundant. While this is a common pattern, it may inadvertently ignore legitimate log files that should be committed (e.g., CHANGELOG.log, documentation logs, or intentional fixture files).

If this breadth is intentional, consider removing the now-redundant specific patterns for clarity.

packages/console-frontend/src/components/layout/Sidebar.tsx (2)

162-164: Hardcoded version and host in status footer.

The footer displays localhost:3111 but the health check uses dynamic getConnectionInfo(). For consistency, consider using the same dynamic configuration here. The version v0.0.0 should also ideally come from a build-time constant or config.

Suggested improvement

+  const { devtoolsApi } = getConnectionInfo()
+  // Extract host from devtoolsApi URL or use a dedicated config value
+
   // In the JSX:
         <div className="mt-3 text-[9px] text-muted/60 tracking-wide font-mono">
-          v0.0.0 • localhost:3111
+          v0.0.0 • {new URL(devtoolsApi).host}
         </div>

Alternatively, expose version and engine host as separate config values.

---

207-214: Minor: Duplicate lg:translate-x-0 class.

Line 211 adds lg:translate-x-0 unconditionally, and line 212's conditional also includes lg:translate-x-0 in both branches. The standalone line 211 is redundant.

Suggested cleanup

       <div
         className={clsx(
           'w-56 h-screen bg-black border-r border-border flex flex-col fixed left-0 top-0 z-50 transition-transform duration-300 ease-in-out',
-          // Mobile: slide in/out
-          'lg:translate-x-0',
-          isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0',
+          // Desktop: always visible, Mobile: slide in/out
+          isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full',
+          'lg:translate-x-0',
         )}
       >

packages/console-rust/Cargo.toml (1)

36-40: Release profile optimizes aggressively for size.

The opt-level = "z" setting prioritizes minimal binary size over runtime performance. If the console has any CPU-intensive operations (e.g., JSON processing, data transformation), consider using "s" instead for a better size/performance balance.

packages/console-rust/src/bridge/functions.rs (1)

443-559: Repetitive bridge registration pattern.

The registration block has significant repetition with the clone-and-register pattern. While functional, this could be simplified with a macro in the future. For now, the code is acceptable but consider adding a comment noting this as a candidate for DRY improvement.

packages/console-frontend/src/lib/otel-utils.ts (1)

12-18: Consider using Number.isFinite instead of global isFinite.

The biome-ignore comment notes the global isFinite is safe for number types. However, Number.isFinite is the modern approach that doesn't perform type coercion and would eliminate the need for the lint suppression.

♻️ Proposed fix

 export function nanoToMs(nanos: number): number {
-  // biome-ignore lint/suspicious/noGlobalIsFinite: isFinite is safe for number type
-  if (!isFinite(nanos)) {
+  if (!Number.isFinite(nanos)) {
     return 0
   }
   return Math.floor(nanos / 1_000_000)
 }

packages/console-frontend/src/components/traces/AttributesFilter.tsx (3)

1-1: 'use client' directive may be unnecessary.

This directive is specific to React Server Components (Next.js App Router). Since the PR migrates from Next.js to Vite, this directive has no effect and can be removed.

♻️ Proposed fix

-'use client'
-
 import { Plus, X } from 'lucide-react'

---

12-12: editingIndex state appears unused.

The editingIndex state is set on focus/blur events but never used for any visual feedback or behavior. Either remove this dead state or implement the intended functionality (e.g., highlighting the active row).

♻️ Proposed fix - remove unused state

 export function AttributesFilter({ value, onChange }: AttributesFilterProps) {
-  const [editingIndex, setEditingIndex] = useState<number | null>(null)
-
   const handleAdd = () => {
     onChange([...value, ['', '']])
-    setEditingIndex(value.length)
   }

   const handleRemove = (index: number) => {
     const newAttrs = value.filter((_, i) => i !== index)
     onChange(newAttrs)
-    if (editingIndex === index) {
-      setEditingIndex(null)
-    }
   }

And remove the onFocus/onBlur handlers from the inputs.

---

61-69: Add accessibility labels to inputs.

The inputs rely solely on placeholder text for identification. Screen readers may not announce placeholders consistently. Consider adding aria-label attributes.

♻️ Proposed enhancement

               <input
                 type="text"
                 placeholder="Key (e.g., http.method)"
+                aria-label={`Attribute ${index + 1} key`}
                 value={key}

packages/console-frontend/src/api/utils.ts (2)

9-21: Consider handling JSON parse errors gracefully.

If the response body is not valid JSON, res.json() will throw, and the error message won't indicate it was a parse failure. This could make debugging harder when the server returns malformed responses.

Proposed defensive handling

 async function unwrapResponse<T>(res: Response): Promise<T> {
-  const data = await res.json()
+  let data: unknown
+  try {
+    data = await res.json()
+  } catch {
+    throw new Error(`Failed to parse JSON response from ${res.url}`)
+  }
 
   if (data && typeof data === 'object' && 'status_code' in data && 'body' in data) {

---

23-40: Fallback silently swallows the primary error.

When the DEVTOOLS_API request fails, the original error is discarded. This can make it difficult to diagnose why the primary endpoint failed. Consider logging or including context about the fallback.

Optional: Add debug context

-  } catch {
-    // Fall through to management API
+  } catch (primaryError) {
+    console.debug(`[fetchWithFallback] Primary API failed, falling back:`, primaryError)
   }

packages/console-frontend/src/api/system/adapters.ts (1)

15-19: Consider using fetchWithFallback for consistency.

Other API modules (e.g., alerts.ts) implement fallback to the management API. If adapters should also have a fallback, consider using the centralized fetchWithFallback utility from utils.ts for consistency.

If adapters are intentionally devtools-only, this is fine as-is.

packages/console-frontend/src/api/state/streams.ts (2)

26-26: Remove debug logging from production code.

This console.log statement will appear in production builds. Consider removing it or gating behind a debug flag.

Remove debug log

-  console.log('[Streams API] Starting fetch from:', `${DEVTOOLS_API}/streams/list`)

---

42-50: Inconsistent error handling compared to other API modules.

Other modules (e.g., adapters.ts, alerts.ts) throw errors on failure, while this module silently returns a fallback. This inconsistency can make error handling unpredictable for consumers.

If the fallback is intentional (e.g., streams are optional), consider documenting this behavior or making it explicit in the function name/return type.

packages/console-frontend/src/api/websocket.ts (4)

14-14: Connection info is captured once at creation time.

getConnectionInfo() is called once when the subscription is created. If the connection configuration changes (e.g., port reconfiguration), the WebSocket won't use the updated URL until the subscription is recreated.

Consider calling getConnectionInfo() inside connect() if dynamic configuration is needed.

Also applies to: 129-129

---

77-86: Consider exponential backoff for reconnection.

Fixed 3-second reconnect intervals may cause thundering herd issues if many clients reconnect simultaneously after a server restart. Exponential backoff with jitter would be more resilient.

Example exponential backoff pattern

let reconnectAttempts = 0
const MAX_BACKOFF = 30000

function getBackoffDelay() {
  const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), MAX_BACKOFF)
  const jitter = Math.random() * 1000
  reconnectAttempts++
  return delay + jitter
}

// Reset on successful connection
ws.onopen = () => {
  reconnectAttempts = 0
  // ...
}

// Use in reconnect
reconnectTimer = setTimeout(connect, getBackoffDelay())

---

190-203: Mutable subscriptions array could have race conditions.

currentSubscriptions is mutated directly in subscribe/unsubscribe. If these are called rapidly or from different async contexts, the array state could become inconsistent. Consider using a Set for O(1) lookups and cleaner add/remove semantics.

Using Set for subscriptions

-  let currentSubscriptions: string[] = []
+  const currentSubscriptions = new Set<string>()

   // In subscribe:
-  if (!currentSubscriptions.includes(stream)) {
-    currentSubscriptions.push(stream)
-  }
+  currentSubscriptions.add(stream)

   // In unsubscribe:
-  currentSubscriptions = currentSubscriptions.filter((s) => s !== stream)
+  currentSubscriptions.delete(stream)

   // In connect's onopen:
-  currentSubscriptions.forEach((stream) => {
+  currentSubscriptions.forEach((stream) => {

---

167-174: Overwriting cache clears any existing messages.

connect() initializes the cache to an empty array (line 172), which will discard any previously captured messages if connect is called again (e.g., after disconnect/reconnect). If preserving history across reconnects is desired, consider making this behavior configurable.

packages/console-frontend/src/hooks/useTraceFilters.ts (1)

68-129: Prefer useRef for debounce timers.
Using state for timers triggers extra renders and can leave stale timers; refs keep this logic stable.

Proposed refactor (refs for timers)

-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 ...
-  const [serviceNameTimer, setServiceNameTimer] = useState<NodeJS.Timeout | null>(null)
-  const [operationNameTimer, setOperationNameTimer] = useState<NodeJS.Timeout | null>(null)
+  const serviceNameTimer = useRef<NodeJS.Timeout | null>(null)
+  const operationNameTimer = useRef<NodeJS.Timeout | null>(null)
 ...
-  useEffect(() => {
-    return () => {
-      if (serviceNameTimer) clearTimeout(serviceNameTimer)
-      if (operationNameTimer) clearTimeout(operationNameTimer)
-    }
-  }, [serviceNameTimer, operationNameTimer])
+  useEffect(() => {
+    return () => {
+      if (serviceNameTimer.current) clearTimeout(serviceNameTimer.current)
+      if (operationNameTimer.current) clearTimeout(operationNameTimer.current)
+    }
+  }, [])
 ...
-      if (serviceNameTimer) clearTimeout(serviceNameTimer)
-      const timer = setTimeout(() => {
+      if (serviceNameTimer.current) clearTimeout(serviceNameTimer.current)
+      const timer = setTimeout(() => {
         setDebouncedServiceName(value as string | undefined)
       }, 300)
-      setServiceNameTimer(timer)
+      serviceNameTimer.current = timer
 ...
-      if (operationNameTimer) clearTimeout(operationNameTimer)
-      const timer = setTimeout(() => {
+      if (operationNameTimer.current) clearTimeout(operationNameTimer.current)
+      const timer = setTimeout(() => {
         setDebouncedOperationName(value as string | undefined)
       }, 300)
-      setOperationNameTimer(timer)
+      operationNameTimer.current = timer

packages/console-frontend/src/components/traces/TraceFilters.tsx (1)

21-27: Reuse shared time-range presets to avoid drift.
Consider sourcing values from TIME_RANGE_PRESETS (or TimeRangeFilter) so presets stay consistent across the app.

Example (reuse shared presets)

+import { TIME_RANGE_PRESETS } from '@/lib/timeRangeUtils'
 ...
-const timeRangePresets = [
-  { label: 'Last 15m', value: 15 * 60 * 1000 },
-  { label: 'Last 1h', value: 60 * 60 * 1000 },
-  { label: 'Last 6h', value: 6 * 60 * 60 * 1000 },
-  { label: 'Last 24h', value: 24 * 60 * 60 * 1000 },
-  { label: 'Last 7d', value: 7 * 24 * 60 * 60 * 1000 },
-]
+const timeRangePresets = [
+  { label: 'Last 15m', value: TIME_RANGE_PRESETS.LAST_15_MINUTES },
+  { label: 'Last 1h', value: TIME_RANGE_PRESETS.LAST_1_HOUR },
+  { label: 'Last 6h', value: TIME_RANGE_PRESETS.LAST_6_HOURS },
+  { label: 'Last 24h', value: TIME_RANGE_PRESETS.LAST_24_HOURS },
+  { label: 'Last 7d', value: TIME_RANGE_PRESETS.LAST_7_DAYS },
+]

package.json (1)

27-29: Consider moving class-variance-authority to the frontend package.

The class-variance-authority library is typically a UI utility used directly by frontend components. Having it in the root workspace dependencies rather than in packages/console-frontend/package.json is unusual and may cause confusion about where the dependency is actually consumed.

packages/console-frontend/src/api/observability/logs.ts (1)

119-126: Response body not consumed before returning success.

When the fallback path succeeds, the response body is never read. While this works, not consuming the response body can interfere with HTTP connection reuse in some environments. Additionally, this differs from the primary path which calls unwrapResponse.

Proposed fix

   const res = await fetch(`${MANAGEMENT_API}/otel/logs/clear`, {
     method: 'POST',
   })
   if (!res.ok) throw new Error('Failed to clear OTEL logs')
+  await res.json().catch(() => {}) // Consume response body
   return { success: true }
 }

packages/console-frontend/src/lib/traceTransform.ts (1)

164-169: Performance: O(n) lookups inside sort comparator leads to O(n² log n) complexity.

The sort comparator performs find() operations (O(n) each) on every comparison. For traces with many spans, this becomes expensive. Consider building a lookup map before sorting.

Proposed fix using a pre-built map

+  // Build lookup map for efficient sorting
+  const spanStartTimes = new Map(
+    traceSpans.map((s) => [s.span_id, toMs(s.start_time_unix_nano)])
+  )
+
   // Sort by start time, then by depth
   visualSpans.sort((a, b) => {
-    const aStart = toMs(traceSpans.find((s) => s.span_id === a.span_id)?.start_time_unix_nano ?? 0)
-    const bStart = toMs(traceSpans.find((s) => s.span_id === b.span_id)?.start_time_unix_nano ?? 0)
+    const aStart = spanStartTimes.get(a.span_id) ?? 0
+    const bStart = spanStartTimes.get(b.span_id) ?? 0
     if (aStart !== bStart) return aStart - bStart
     return a.depth - b.depth
   })

packages/console-frontend/src/components/traces/TraceHeader.tsx (1)

9-13: Duplicate formatDuration function.

This same helper exists in ServiceBreakdown.tsx. Consider extracting to a shared utility (e.g., @/lib/formatters.ts) to maintain consistency and reduce duplication.

packages/console-frontend/src/components/traces/WaterfallChart.tsx (1)

16-20: Consider centralizing duration formatting.

Waterfall/FlameGraph/TraceMap each define a local formatter; extracting a shared helper would reduce drift.

packages/console-rust/src/bridge/triggers.rs (1)

71-78: Consider reducing logging verbosity for trigger registration.

Logging at info level for each of the 20+ trigger registrations will produce noisy startup output. The debug log at Line 71 is appropriate for detailed tracing, but the info log for every successful registration is excessive.

Consider logging a single summary at the end instead:

♻️ Suggested refactor

     for (function_path, api_path, method) in triggers {
         let config = json!({
             "api_path": api_path,
             "http_method": method
         });

         debug!("Registering API trigger: {} -> {}", api_path, function_path);

         bridge.register_trigger("api", function_path, config)?;
-
-        info!(
-            "Successfully registered API trigger: {} -> {}",
-            api_path, function_path
-        );
     }

+    info!("Successfully registered {} API triggers", triggers.len());
+
     Ok(())

packages/console-rust/src/main.rs (1)

107-114: Server errors are silently swallowed on shutdown.

When shutdown_signal() fires, the server task is cancelled without checking if it completed with an error. If the server fails immediately after starting, the error would be lost.

♻️ Consider logging server errors during shutdown

 tokio::select! {
-    result = server => result,
+    result = server => {
+        if let Err(ref e) = result {
+            tracing::error!("Server error: {}", e);
+        }
+        result
+    },
     _ = shutdown_signal() => {
         tracing::info!("Shutdown signal received, cleaning up...");
         bridge.disconnect();
         Ok(())
     }
 }

packages/console-frontend/src/components/traces/SpanInfoTab.tsx (1)

24-36: Consider extracting status configuration to reduce duplication.

The status color and label mappings repeat the same keys. This could be consolidated for maintainability.

♻️ Optional consolidation

const STATUS_CONFIG = {
  ok: { color: 'bg-green-500', label: 'OK' },
  error: { color: 'bg-red-500', label: 'ERROR' },
  unset: { color: 'bg-gray-500', label: 'UNSET' },
} as const

export function SpanInfoTab({ span }: SpanInfoTabProps) {
  const service = span.service_name || span.name.split('.')[0]
  const { color: statusColor, label: statusLabel } = STATUS_CONFIG[span.status]
  // ...
}