AIQ UI polish + bug fix - final

[exactlyallan]

Summary

This PR delivers a broad UI/UX polish pass for the AIQ frontend, improves deep-research failure recovery, and closes several test and reliability gaps before review.

It includes app bar/navigation refinements, chat/input simplification, data source and file-copy updates, research-panel control improvements, settings-theme control refactor, and a critical deep-research race-condition fix that previously left sessions in a stuck "active" state.

What Changed

App Bar and Navigation

• Removed the chat input Auto mode button and cleaned up the composer action bar layout.
• Refactored the app bar left section to:
  • Make Logo + AI-Q a new-session trigger.
  • Move the sessions toggle to the right of logo/app name.
  • Add Sessions text beside the hamburger icon for consistency with other nav items.
• Reworked session-title placement behavior:
  • Removed boxed title style.
  • Increased truncation capacity.
  • Added responsive hide behavior to avoid collisions on narrower layouts.
  • Final placement is left-aligned after Sessions with tuned spacing.
• Wired AppBar new-session action through MainLayout using the existing handleNewSession() flow (URL sync + right-panel close behavior preserved).

Data Sources and Files Copy/UI

• Renamed Connections tab labels:
  • All Sources -> All Connections
  • Individual Sources -> Individual Connections
• Updated connections footer copy to use “connections” language.
• Updated Files tab empty-state copy:
  • Removed old No Files heading.
  • Replaced with:
    • No Attached Files
    • All attached files will be accessible to agents in this session unless removed.
• Updated files footer copy and alignment:
  • Left-aligned.
  • Attached files will be always available to agents until deleted.
• Adjusted No Attached Files styling to match the section-label pattern used elsewhere.

Research Panel UX

• Updated side toggle tab to include Show Research label.
• Styled the toggle as a compact vertical tab:
  • Rotated label orientation.
  • Icon retained upright and positioned separately to avoid overlap.
  • Added right border and matching panel background.
  • Applied explicit spacing/size tuning for icon, label, and tab height.
• Removed Hide text from the panel close button (icon-only close control).
• Made Stop Researching always visible and disabled when no active research is running.
• Positioned Stop Researching left-aligned near tab controls with improved spacing from report/tab controls.

Plan Tab Content

• Added a new Process Overview section above Research Plan, with explanatory copy for:
  • approval -> task generation
  • async agent execution
  • citation accumulation
  • iterative draft/report finalization and export readiness

Settings Panel Theme Control

• Replaced old multi-button theme selector with KUI Select.
• Updated section label:
  • Appearance -> UI Theme Options
• Updated option labels:
  • System -> System Theme (Auto)
• Refactored settings tests for KUI Select semantics and trigger behavior.

Deep Research Race/State Bug Fix (Critical)

Addressed a race where SSE failures could leave sessions in a falsely active state, causing:

• stuck session spinner
• blocked session deletion
• export buttons disabled despite report availability

Root cause

use-deep-research.ts onError path performed partial cleanup only (error card + spinner stop), but did not perform terminal-state sync.

Fix

When backend is unreachable in onError, now performs full failure cleanup mirroring the terminal job-status path:

• patches tracking message to failure terminal state
• adds failure banner
• disconnects SSE client
• sets stream as loaded
• completes deep research state
• clears streaming flag

This ensures session activity and export gating state become consistent after failure.

Test Coverage and Reliability Improvements

Added/updated tests across affected surfaces:

• AppBar.spec.tsx
  • new-session action
  • sessions-label rendering
  • authenticated/unauthenticated action-state assertions
• MainLayout.spec.tsx
  • verifies app-bar new-session wiring triggers create+URL+panel-close flow
• DataSourcesPanel.spec.tsx
  • updated copy assertions for “connections” language and new footer text
• FileSourcesTab.spec.tsx
  • updated empty-state text assertions
• ResearchPanel.spec.tsx
  • toggle label assertion (Show Research)
  • Stop Researching always-rendered/disabled-state coverage
• PlanTab.spec.tsx
  • Process Overview render coverage
• InputArea.spec.tsx
  • regression assertion confirming Auto button removal
• ChatThinking.spec.tsx
  • updated data-sources visibility assertions for new layout behavior
• use-deep-research.spec.ts
  • expanded onError tests:
    • full cleanup on unreachable backend
    • no-op behavior for transient/reachable path
    • terminal-state no-op guard

Validation

Executed focused and full validations during this branch:

• Multiple targeted spec runs for each touched component/hook.
• Lint checks on touched files.
• Full frontend suite status at end:
  • 70 test files passed
  • 1146 tests passed
  • 1 skipped
  • 0 failures

Notes / Reviewer Context

• Some previously stuck sessions created before the deep-research cleanup fix may still show active state until deleted/cleared, because those historical messages were persisted in non-terminal status before this patch.
• The KUI Select test behavior required more specific querying because option content may exist in DOM alongside the trigger content.

Scope

Primary touched areas:

• frontends/ui/src/features/layout/components/* (AppBar, MainLayout, DataSourcesPanel, FileSourcesTab, ResearchPanel, SettingsPanel, PlanTab, InputArea)
• frontends/ui/src/features/chat/hooks/use-deep-research.ts
• frontends/ui/src/features/chat/components/ChatThinking.tsx
• related component and hook specs
• frontends/ui/src/app/globals.css (research-toggle spinner size override)

[greptile-apps]

Greptile Summary

This PR delivers a broad UI/UX polish pass across the AIQ frontend and closes a critical race condition in use-deep-research.ts where SSE failures left sessions permanently stuck in an active state (blocked deletion, disabled export, persistent spinner).

Key changes:

• Critical bug fix (use-deep-research.ts): onError now performs the same full terminal-state cleanup as the onJobStatus failure path — patching the conversation message, adding the failure banner, disconnecting the SSE client, setting stream loaded, completing deep research, and clearing the streaming flag. Previously only a partial cleanup (error card + spinner stop) was performed, leaving sessions in a falsely active state.
• New session draft flow (store.ts, MainLayout.tsx, AppBar.tsx): Logo+AI-Q button now triggers startNewSessionDraft(), which clears all conversation/research state without persisting anything; the session is only created in history on the first user input, keeping the session list clean. Navigation is gated by isNavigationBlocked during shallow streaming or pending HITL.
• onTodoUpdate workflow filter (deep-research-client.ts, use-deep-research.ts, use-load-job-data.ts): The callback signature now receives an optional workflow argument; updates scoped to a sub-workflow are silently dropped so only top-level plan todos appear in the Plan tab.
• Research Panel toggle redesign (ResearchPanel.tsx): Toggle is now a tall vertical tab with a rotated Show Research label and upright icon; Stop Researching is always rendered but disabled when not streaming.
• UI copy and component updates: "Sources" → "Connections" throughout the data sources panel; new Files empty state; Auto mode button removed; Settings theme selector replaced with KUI Select; PlanTab gains a Process Overview section.
• All touched surfaces have updated or new test coverage; the full frontend suite passes at 1146 tests.

Confidence Score: 4/5

• PR is safe to merge; the critical bug fix is well-implemented and tested, UI changes are cosmetic and non-breaking, and the full test suite passes with 0 failures.
• The deep-research race condition fix correctly mirrors the existing terminal-state cleanup path and is covered by three new targeted tests. The draft-session flow is logically sound — startNewSessionDraft is guarded by authentication, and isOwnerActive() prevents orphaned SSE callbacks from writing to the wrong session. Minor issues found: a double-space/leading-space typo in PlanTab's Process Overview text, and a silent todo-filter in onTodoUpdate that has no debug trace, making future regressions harder to diagnose. These do not affect correctness.
• frontends/ui/src/features/layout/components/PlanTab.tsx (minor whitespace in text copy)

Important Files Changed

Filename	Overview
frontends/ui/src/features/chat/hooks/use-deep-research.ts	Critical bug fix: onError path now performs full terminal-state cleanup (patch message, add failure banner, disconnect SSE, complete research, clear streaming flag) mirroring the onJobStatus failure path, preventing sessions from getting stuck in a falsely active state.
frontends/ui/src/adapters/api/deep-research-client.ts	onTodoUpdate callback signature extended with optional workflow parameter; the client now passes artifactWorkflow when dispatching todo events, enabling callers to filter sub-workflow todos from the Plan tab.
frontends/ui/src/features/chat/store.ts	New startNewSessionDraft action clears all conversation/research state without creating a persisted conversation, enabling a draft-session flow where history is not polluted until the user interacts.
frontends/ui/src/features/layout/components/MainLayout.tsx	handleNewSession now calls startNewSessionDraft + clearSessionUrl instead of createConversation + updateSessionUrl; isNavigationBlocked gates new-session action during shallow streaming or pending HITL interactions.
frontends/ui/src/features/layout/components/AppBar.tsx	Logo+AI-Q button now triggers new-session creation; Sessions toggle moved to the right with text label; session title moved to a responsive hidden div; all new actions properly gated by isAuthenticated and isNewSessionDisabled.
frontends/ui/src/features/layout/components/ResearchPanel.tsx	Toggle tab redesigned as a vertical compact tab with rotated Show Research label; Stop Researching is now always rendered but disabled when not streaming, improving discoverability.
frontends/ui/src/features/layout/components/PlanTab.tsx	New Process Overview section added above Research Plan; contains a minor double-space and leading-whitespace in the descriptive text.
frontends/ui/src/features/chat/hooks/use-load-job-data.ts	onTodoUpdate now accepts the workflow parameter and silently drops todo updates that carry a workflow context, matching live-streaming behavior and preventing sub-workflow todos from appearing in the Plan tab during job replay.

Sequence Diagram

sequenceDiagram
    participant SSE as SSE Stream
    participant onError as onError Handler
    participant Health as Backend Health Check
    participant Store as Chat Store (Zustand)

    SSE->>onError: error event (e.g. connection lost)
    onError->>Store: Read isDeepResearchStreaming & deepResearchStatus
    alt already in terminal state (interrupted / failure) or not streaming
        onError-->>SSE: no-op (guard exits early)
    else streaming and not in terminal state
        onError->>Health: checkBackendHealthCached()
        alt Backend reachable (transient SSE error)
            Health-->>onError: true
            onError-->>SSE: return — allow SSE to retry
        else Backend unreachable
            Health-->>onError: false
            onError->>Store: setCurrentStatus('error')
            onError->>Store: patchConversationMessage(failure, isDeepResearchActive=false, showViewReport)
            onError->>Store: addErrorCard('agent.deep_research_failed')
            onError->>Store: addDeepResearchBanner('failure', jobId)
            onError->>Store: stopAllDeepResearchSpinners()
            onError->>SSE: clientRef.disconnect()
            onError->>Store: setStreamLoaded(true)
            onError->>Store: completeDeepResearch()
            onError->>Store: setStreaming(false)
            Note over Store: Session no longer stuck in active state
        end
    end

Loading

Comments Outside Diff (1)

1. frontends/ui/src/features/chat/hooks/use-deep-research.ts, line 419-425 (link)

   Silent todo-update suppression when workflow is present

   Both here (line 420) and in use-load-job-data.ts (the same pattern is introduced for the replay path), any onTodoUpdate event that carries a workflow context is silently discarded with no logging. If the backend's event schema ever changes so that top-level plan todos are emitted with a workflow string, the Plan tab will be empty with no visible indication of why.

   Consider adding a console.debug trace so that this filter is discoverable during debugging:

   onTodoUpdate: (todos: TodoItem[], workflow?: string) => {
     if (workflow) {
       // sub-workflow todos are not displayed in the Plan tab
       console.debug('[deep-research] ignoring todo update for sub-workflow:', workflow)
       return
     }
     ...
   }

_{Last reviewed commit: 6f9ab21}

[cdgamarose-nv]

Looks good!