feat: enhance UI state management with graph collapse functionality and improve error handling in API requests

.gitignore

@@ -37,3 +37,4 @@ Thumbs.db
 # Celery
 celerybeat-schedule
 celerybeat.pid
+.env

frontend/src/components/common/NoResultsState.tsx

@@ -4,6 +4,7 @@ interface Props {
 
 const SUGGESTIONS = [
   'Try broader terms — remove acronyms or product names',
+  'Results may be limited based on your channel access — ask your admin if you need broader access',
   'Check if the data source containing this topic is connected',
   'Ask your admin to verify ingestion status for that area',
 ]

frontend/src/components/results/KnowledgeGraph.tsx

@@ -33,11 +33,12 @@ interface Props {
   streaming:   boolean   // true while SSE/WS is active (drives the empty state animation)
   onNodeClick: (node: GraphNode) => void
   onNodeHover: (node: GraphNode | null, x: number, y: number) => void
+  className?:  string
 }
 
 // ─── Component ───────────────────────────────────────────────────────────────
 
-export function KnowledgeGraph({ nodes, edges, streaming, onNodeClick, onNodeHover }: Props) {
+export function KnowledgeGraph({ nodes, edges, streaming, onNodeClick, onNodeHover, className }: Props) {
   const containerRef = useRef<HTMLDivElement>(null)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const graphRef = useRef<any>(null)
@@ -60,20 +61,21 @@ export function KnowledgeGraph({ nodes, edges, streaming, onNodeClick, onNodeHov
   // Initialise the canvas once on mount
   useEffect(() => {
     if (!containerRef.current) return
+    let ro: ResizeObserver | null = null
 
     import('force-graph').then(({ default: ForceGraph2D }) => {
       if (!containerRef.current) return
 
+      const el = containerRef.current
       const fg = ForceGraph2D()
-      fg(containerRef.current)
+      fg(el)
       fg.backgroundColor('transparent')
         .nodeId('id')
         .nodeLabel('name')
         .nodeColor((n: FGNode) => n.color)
         .nodeRelSize(6)
-        // Use fixed dimensions — container may be display:none on mobile tab switch
-        .width(containerRef.current.clientWidth || 380)
-        .height(containerRef.current.clientHeight || 400)
+        .width(el.clientWidth || 380)
+        .height(el.clientHeight || 400)
         .linkColor(() => '#94a3b8')
         .linkLabel('rel')
         .linkDirectionalArrowLength(4)
@@ -86,11 +88,21 @@ export function KnowledgeGraph({ nodes, edges, streaming, onNodeClick, onNodeHov
         })
       graphRef.current = fg
 
+      // Auto-resize the canvas when the container is resized (e.g. maximize/collapse)
+      ro = new ResizeObserver((entries) => {
+        const { width, height } = entries[0].contentRect
+        if (width > 0 && height > 0) {
+          fg.width(width).height(height)
+        }
+      })
+      ro.observe(el)
+
       // Flush any nodes/edges that arrived while the canvas was initialising
       pushData(pendingRef.current.nodes, pendingRef.current.edges)
     })
 
     return () => {
+      ro?.disconnect()
       graphRef.current?._destructor?.()
       graphRef.current = null
     }
@@ -106,7 +118,7 @@ export function KnowledgeGraph({ nodes, edges, streaming, onNodeClick, onNodeHov
   const isEmpty = nodes.length === 0
 
   return (
-    <div className="relative h-[400px] w-full overflow-hidden rounded-xl border border-surface-subtle">
+    <div className={`relative h-full w-full overflow-hidden${className ? ` ${className}` : ''}`}>
 
       {/* Empty state overlay — removed once first node arrives */}
       {isEmpty && (

frontend/src/components/results/ResultsPage.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useSearch } from '@tanstack/react-router'
 import { useAuthStore } from '@/stores/authStore'
+import { useUIStore } from '@/stores/uiStore'
 import { useSSEStream } from '@/hooks/useSSEStream'
 import { useGraphStream } from '@/hooks/useGraphStream'
 import { HallucinationWarning } from '@/components/common/HallucinationWarning'
@@ -28,6 +29,7 @@ type Tab = 'graph' | 'answer'
 
 export function ResultsPage() {
   const user       = useAuthStore((s) => s.user)
+  const { graphCollapsed, toggleGraphCollapsed } = useUIStore()
   const sessionRef = useRef(crypto.randomUUID())
   const { q: initialQuery } = useSearch({ from: '/query' })
 
@@ -52,7 +54,9 @@ export function ResultsPage() {
   const edgesAccRef = useRef<GraphEdge[]>([])
 
   // ── Mobile tab ──────────────────────────────────────────────────────────────
-  const [activeTab, setActiveTab] = useState<Tab>('graph')
+  const [activeTab, setActiveTab]       = useState<Tab>('graph')
+  // Local — not persisted; maximize is a session-level power-user action
+  const [graphMaximized, setGraphMaximized] = useState(false)
 
   // ── Hooks ───────────────────────────────────────────────────────────────────
   const { state, error, firstEventArrived, stream } = useSSEStream()
@@ -231,8 +235,11 @@ export function ResultsPage() {
             </button>
           </div>
 
-          {/* Two-column grid — graph right, answer left */}
-          <div className="flex flex-col gap-6 lg:grid lg:grid-cols-[1fr_380px] lg:items-start lg:gap-8">
+          {/* Two-column grid — collapses to single when graph is hidden */}
+          <div className={cn(
+            'flex flex-col gap-6 lg:grid lg:items-start lg:gap-8',
+            graphCollapsed ? 'lg:grid-cols-1' : 'lg:grid-cols-[1fr_380px]',
+          )}>
 
             {/* ── Left: answer column ──────────────────────────────────────── */}
             <div className={cn(
@@ -240,6 +247,16 @@ export function ResultsPage() {
               activeTab === 'graph' && 'hidden lg:flex',
             )}>
 
+              {/* Show-graph chip — visible on desktop when graph panel is collapsed */}
+              {graphCollapsed && (
+                <button
+                  onClick={toggleGraphCollapsed}
+                  className="hidden lg:inline-flex w-fit items-center gap-1.5 rounded-full border border-surface-subtle bg-stone-50 px-3 py-1 text-xs text-stone-500 hover:bg-stone-100 dark:bg-stone-800/60 dark:hover:bg-stone-700"
+                >
+                  ▶ Show graph
+                </button>
+              )}
+
               {/* Thinking indicator — before any SSE event arrives */}
               {isActive && !hasData && (
                 <div className="flex items-center gap-2 text-sm text-stone-400">
@@ -308,56 +325,82 @@ export function ResultsPage() {
               {isComplete && <FollowUp onSubmit={runQuery} />}
             </div>
 
-            {/* ── Right: graph column — always mounted ─────────────────────── */}
-            {/* CSS hides it on mobile when answer tab is active; on desktop always visible */}
+            {/* ── Right: graph panel ───────────────────────────────────────── */}
+            {/* On mobile: controlled by activeTab. On desktop: hidden when graphCollapsed */}
             <div className={cn(
-              'flex flex-col gap-2',
-              activeTab === 'answer' && 'hidden lg:flex',
+              'flex flex-col overflow-hidden rounded-xl border border-surface-subtle',
+              // Mobile: toggle by tab; desktop: toggle by collapsed state
+              activeTab === 'answer' ? 'hidden lg:flex' : 'flex',
+              graphCollapsed && 'lg:hidden',
+              // Maximized: fixed fullscreen overlay
+              graphMaximized
+                ? 'fixed inset-0 z-50 rounded-none border-0 bg-white dark:bg-stone-950'
+                : 'h-[440px]',
             )}>
+
+              {/* Graph toolbar */}
+              <div className="flex shrink-0 items-center gap-2 border-b border-surface-subtle px-3 py-2">
+                <span className="flex-1 text-xs font-semibold uppercase tracking-wide text-stone-400">
+                  Knowledge Graph
+                </span>
+                {graphNodes.length > 0 && (
+                  <span className="text-xs text-stone-400">
+                    {graphNodes.length} nodes · {graphEdges.length} edges
+                  </span>
+                )}
+                {/* Maximize / restore */}
+                <button
+                  onClick={() => setGraphMaximized((m) => !m)}
+                  title={graphMaximized ? 'Exit fullscreen' : 'Fullscreen'}
+                  className="rounded p-1 text-stone-400 hover:bg-stone-100 hover:text-stone-600 dark:hover:bg-stone-800 dark:hover:text-stone-300"
+                  aria-label={graphMaximized ? 'Exit fullscreen' : 'Fullscreen'}
+                >
+                  {graphMaximized ? '⤡' : '⤢'}
+                </button>
+                {/* Collapse — desktop only; on mobile graph visibility is via tabs */}
+                <button
+                  onClick={toggleGraphCollapsed}
+                  title="Collapse graph"
+                  className="hidden rounded p-1 text-stone-400 hover:bg-stone-100 hover:text-stone-600 dark:hover:bg-stone-800 dark:hover:text-stone-300 lg:block"
+                  aria-label="Collapse graph"
+                >
+                  ◀
+                </button>
+              </div>
+
+              {/* Canvas — flex-1 fills remaining panel height */}
               <KnowledgeGraph
                 nodes={graphNodes}
                 edges={graphEdges}
                 streaming={isActive}
                 onNodeClick={handleNodeClick}
                 onNodeHover={handleNodeHover}
+                className="flex-1"
               />
 
-              {/* Graph footer: node count + refresh/reload controls */}
-              <div className="flex items-center gap-2">
-                {graphNodes.length > 0 && (
-                  <p className="flex-1 text-xs text-stone-400">
-                    {graphNodes.length} node{graphNodes.length !== 1 ? 's' : ''}
-                    {' · '}
-                    {graphEdges.length} connection{graphEdges.length !== 1 ? 's' : ''}
-                  </p>
-                )}
-
-                {/* Refresh button — available when graph finished streaming (data may have updated) */}
+              {/* Graph footer */}
+              <div className="flex shrink-0 items-center gap-2 border-t border-surface-subtle px-3 py-2">
                 {gState === 'done' && (
                   <button
                     onClick={reconnectGraph}
-                    className="ml-auto shrink-0 text-xs text-stone-400 hover:text-stone-600 dark:hover:text-stone-300"
+                    className="ml-auto text-xs text-stone-400 hover:text-stone-600 dark:hover:text-stone-300"
                     title="Reload graph with latest data"
                   >
-                    ↻ Refresh graph
+                    ↻ Refresh
                   </button>
                 )}
+                {gState === 'retrying' && <NetworkRetry attempt={retryCount + 1} />}
               </div>
 
-              {/* Auto-retry indicator */}
-              {gState === 'retrying' && (
-                <NetworkRetry attempt={retryCount + 1} />
-              )}
-
-              {/* Manual reload after max retries exhausted */}
+              {/* Max-retries error bar */}
               {gState === 'error' && (
-                <div className="flex items-center justify-between rounded-lg border border-stone-200 bg-stone-50 px-4 py-3 text-sm dark:border-stone-700 dark:bg-stone-800/40">
-                  <span className="text-stone-600 dark:text-stone-400">
+                <div className="flex shrink-0 items-center justify-between border-t border-stone-200 bg-stone-50 px-3 py-2 text-sm dark:border-stone-700 dark:bg-stone-800/40">
+                  <span className="text-stone-500 dark:text-stone-400">
                     Couldn't load the knowledge graph.
                   </span>
                   <button
                     onClick={reconnectGraph}
-                    className="ml-4 shrink-0 rounded bg-stone-200 px-3 py-1.5 text-xs font-medium text-stone-700 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-300 dark:hover:bg-stone-600"
+                    className="ml-4 shrink-0 rounded bg-stone-200 px-3 py-1 text-xs font-medium text-stone-700 hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-300 dark:hover:bg-stone-600"
                   >
                     Try again
                   </button>

frontend/src/lib/http.ts

@@ -130,9 +130,8 @@ export async function ssePost(
   body: unknown,
   signal: AbortSignal,
 ): Promise<Response> {
-  let res: Response
-  try {
-    res = await fetch(`${env.apiBaseUrl}${path}`, {
+  const doFetch = () =>
+    fetch(`${env.apiBaseUrl}${path}`, {
       method:      'POST',
       credentials: 'include',
       signal,
@@ -143,12 +142,31 @@ export async function ssePost(
       },
       body: JSON.stringify(body),
     })
+
+  let res: Response
+  try {
+    res = await doFetch()
   } catch (err) {
     if ((err as Error).name === 'AbortError') throw err
     useUIStore.getState().addToast({ type: 'error', message: 'No connection to server' })
     throw new ApiError(0, 'Network error')
   }
 
+  if (res.status === 401) {
+    const refreshed = await refreshToken()
+    if (!refreshed) {
+      useAuthStore.getState().logout()
+      window.location.href = '/login'
+      throw new ApiError(401, 'Session expired')
+    }
+    try {
+      res = await doFetch()
+    } catch (err) {
+      if ((err as Error).name === 'AbortError') throw err
+      throw new ApiError(0, 'Network error after token refresh')
+    }
+  }
+
   if (!res.ok) {
     const requestId = res.headers.get('X-Request-ID') ?? undefined
     const text = await res.text().catch(() => res.statusText)

frontend/src/stores/uiStore.ts

@@ -8,11 +8,13 @@ export interface Toast {
 }
 
 interface UIState {
-  theme:       'light' | 'dark'
-  sidebarOpen: boolean
-  toasts:      Toast[]
-  toggleTheme:    () => void
-  toggleSidebar:  () => void
+  theme:          'light' | 'dark'
+  sidebarOpen:    boolean
+  graphCollapsed: boolean
+  toasts:         Toast[]
+  toggleTheme:         () => void
+  toggleSidebar:       () => void
+  toggleGraphCollapsed: () => void
   addToast:    (toast: Omit<Toast, 'id'>) => void
   removeToast: (id: string) => void
 }
@@ -20,9 +22,10 @@ interface UIState {
 export const useUIStore = create<UIState>()(
   persist(
     (set) => ({
-      theme:       'light',
-      sidebarOpen: true,
-      toasts:      [],
+      theme:          'light',
+      sidebarOpen:    true,
+      graphCollapsed: false,
+      toasts:         [],
 
       toggleTheme: () =>
         set((s) => ({ theme: s.theme === 'light' ? 'dark' : 'light' })),
@@ -30,6 +33,9 @@ export const useUIStore = create<UIState>()(
       toggleSidebar: () =>
         set((s) => ({ sidebarOpen: !s.sidebarOpen })),
 
+      toggleGraphCollapsed: () =>
+        set((s) => ({ graphCollapsed: !s.graphCollapsed })),
+
       addToast: (toast) =>
         set((s) => ({
           toasts: [...s.toasts, { ...toast, id: crypto.randomUUID() }],
@@ -38,6 +44,6 @@ export const useUIStore = create<UIState>()(
       removeToast: (id) =>
         set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) })),
     }),
-    { name: 'godspeed-ui', partialize: (s) => ({ theme: s.theme }) },
+    { name: 'godspeed-ui', partialize: (s) => ({ theme: s.theme, graphCollapsed: s.graphCollapsed }) },
   ),
 )

frontend/src/types/user.ts

@@ -6,12 +6,13 @@ export interface Team {
 }
 
 export interface User {
-  id:          string
-  email:       string
-  name:        string
-  role:        Role
-  team_id:     string
-  team?:       Team
-  is_new_hire: boolean
-  mentor_id?:  string
+  id:                  string
+  email:               string
+  name:                string
+  role:                Role
+  team_id:             string
+  team?:               Team
+  is_new_hire:         boolean
+  mentor_id?:          string
+  allowed_channel_ids?: string[]
 }