Add search and RAG workspace flows

components/auth/auth-shell.tsx

@@ -13,10 +13,10 @@ export function AuthShell({ title, subtitle, children, footer }: AuthShellProps)
       <div className="ambient-grid" aria-hidden="true" />
       <div className="noise-layer" aria-hidden="true" />
 
-      <div className="relative z-10 mx-auto flex min-h-screen w-full max-w-5xl flex-col justify-center gap-8 px-4 py-10 md:px-8 lg:flex-row lg:items-center">
-        <section className="rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-6 lg:w-[42%]">
+      <div className="relative z-10 mx-auto flex min-h-screen w-full max-w-5xl flex-col justify-center gap-5 px-4 py-6 sm:gap-8 sm:py-10 md:px-8 lg:flex-row lg:items-center">
+        <section className="rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 sm:p-6 lg:w-[42%]">
           <p className="terminal-caption text-xs uppercase tracking-[0.3em] text-[color:var(--terminal-muted)]">Fiscal Clone</p>
-          <h1 className="mt-3 text-3xl font-semibold text-[color:var(--terminal-bright)]">Autonomous Analyst Desk</h1>
+          <h1 className="mt-3 text-2xl font-semibold text-[color:var(--terminal-bright)] sm:text-3xl">Autonomous Analyst Desk</h1>
           <p className="mt-3 text-sm leading-6 text-[color:var(--terminal-muted)]">
             Secure entry into filings intelligence, portfolio diagnostics, and async AI workflows powered by AI SDK.
           </p>
@@ -29,8 +29,8 @@ export function AuthShell({ title, subtitle, children, footer }: AuthShellProps)
           </Link>
         </section>
 
-        <section className="rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-6 shadow-[0_20px_60px_rgba(1,4,10,0.55)] lg:w-[58%]">
-          <h2 className="text-2xl font-semibold text-[color:var(--terminal-bright)]">{title}</h2>
+        <section className="rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_20px_60px_rgba(1,4,10,0.55)] sm:p-6 lg:w-[58%]">
+          <h2 className="text-xl font-semibold text-[color:var(--terminal-bright)] sm:text-2xl">{title}</h2>
           <p className="mt-2 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p>
 
           <div className="mt-6">{children}</div>

components/dashboard/task-feed.tsx

@@ -10,7 +10,8 @@ const taskLabels: Record<Task['task_type'], string> = {
   sync_filings: 'Sync filings',
   refresh_prices: 'Refresh prices',
   analyze_filing: 'Analyze filing',
-  portfolio_insights: 'Portfolio insights'
+  portfolio_insights: 'Portfolio insights',
+  index_search: 'Index search'
 };
 
 export function TaskFeed({ tasks }: TaskFeedProps) {

components/financials/control-bar.tsx

@@ -42,8 +42,8 @@ export function FinancialControlBar({
 }: FinancialControlBarProps) {
   return (
     <section className={cn('rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-4 py-3', className)}>
-      <div className="flex flex-wrap items-start justify-between gap-3">
-        <div>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0">
           <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">{title}</h3>
           {subtitle ? (
             <p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{subtitle}</p>
@@ -51,14 +51,14 @@ export function FinancialControlBar({
         </div>
 
         {actions && actions.length > 0 ? (
-          <div className="flex flex-wrap items-center justify-end gap-2">
+          <div className="grid w-full grid-cols-1 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center sm:justify-end">
             {actions.map((action) => (
               <Button
                 key={action.id}
                 type="button"
                 variant={action.variant ?? 'secondary'}
                 disabled={action.disabled}
-                className="px-2 py-1 text-xs"
+                className="px-2 py-1 text-xs sm:min-h-9"
                 onClick={action.onClick}
               >
                 {action.label}
@@ -68,22 +68,21 @@ export function FinancialControlBar({
         ) : null}
       </div>
 
-      <div className="mt-3 overflow-x-auto">
-        <div className="flex min-w-max flex-wrap gap-2">
+      <div className="mt-3 grid grid-cols-1 gap-2">
           {sections.map((section) => (
             <div
               key={section.id}
-              className="flex items-center gap-2 rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-2 py-1.5"
+              className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2"
             >
-              <span className="text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{section.label}</span>
-              <div className="flex flex-wrap items-center gap-1">
+              <span className="mb-2 block text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{section.label}</span>
+              <div className="flex flex-wrap items-center gap-1.5">
                 {section.options.map((option) => (
                   <Button
                     key={`${section.id}-${option.value}`}
                     type="button"
                     variant={option.value === section.value ? 'primary' : 'ghost'}
                     disabled={option.disabled}
-                    className="px-2 py-1 text-xs"
+                    className="px-2 py-1 text-xs sm:min-h-9"
                     onClick={() => section.onChange(option.value)}
                   >
                     {option.label}
@@ -92,7 +91,6 @@ export function FinancialControlBar({
               </div>
             </div>
           ))}
-        </div>
       </div>
     </section>
   );

components/notifications/task-stage-helpers.ts

@@ -12,7 +12,8 @@ const TASK_TYPE_LABELS: Record<TaskType, string> = {
   sync_filings: 'Filing sync',
   refresh_prices: 'Price refresh',
   analyze_filing: 'Filing analysis',
-  portfolio_insights: 'Portfolio insight'
+  portfolio_insights: 'Portfolio insight',
+  index_search: 'Search indexing'
 };
 
 const STAGE_LABELS: Record<TaskStage, string> = {
@@ -38,6 +39,11 @@ const STAGE_LABELS: Record<TaskStage, string> = {
   'analyze.extract': 'Extract context',
   'analyze.generate_report': 'Generate report',
   'analyze.persist_report': 'Persist report',
+  'search.collect_sources': 'Collect sources',
+  'search.fetch_documents': 'Fetch documents',
+  'search.chunk': 'Chunk content',
+  'search.embed': 'Generate embeddings',
+  'search.persist': 'Persist search index',
   'insights.load_holdings': 'Load holdings',
   'insights.generate': 'Generate insight',
   'insights.persist': 'Persist insight'
@@ -75,6 +81,16 @@ const TASK_STAGE_ORDER: Record<TaskType, TaskStage[]> = {
     'analyze.persist_report',
     'completed'
   ],
+  index_search: [
+    'queued',
+    'running',
+    'search.collect_sources',
+    'search.fetch_documents',
+    'search.chunk',
+    'search.embed',
+    'search.persist',
+    'completed'
+  ],
   portfolio_insights: [
     'queued',
     'running',

components/shell/app-shell.tsx

@@ -2,7 +2,7 @@
 
 import { useQueryClient } from '@tanstack/react-query';
 import type { LucideIcon } from 'lucide-react';
-import { Activity, BookOpenText, ChartCandlestick, Eye, Landmark, LineChart, LogOut, Menu } from 'lucide-react';
+import { Activity, BookOpenText, ChartCandlestick, Eye, Landmark, LineChart, LogOut, Menu, Search } from 'lucide-react';
 import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
@@ -76,6 +76,16 @@ const NAV_ITEMS: NavConfigItem[] = [
     preserveTicker: true,
     mobilePrimary: true
   },
+  {
+    id: 'search',
+    href: '/search',
+    label: 'Search',
+    icon: Search,
+    group: 'research',
+    matchMode: 'exact',
+    preserveTicker: true,
+    mobilePrimary: false
+  },
   {
     id: 'portfolio',
     href: '/portfolio',
@@ -167,6 +177,13 @@ function buildDefaultBreadcrumbs(pathname: string, activeTicker: string | null)
     ];
   }
 
+  if (pathname.startsWith('/search')) {
+    return [
+      { label: 'Analysis', href: analysisHref },
+      { label: 'Search' }
+    ];
+  }
+
   if (pathname.startsWith('/portfolio')) {
     return [{ label: 'Portfolio' }];
   }
@@ -289,6 +306,13 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
       return;
     }
 
+    if (href.startsWith('/search')) {
+      if (context.activeTicker) {
+        void queryClient.prefetchQuery(companyAnalysisQueryOptions(context.activeTicker));
+      }
+      return;
+    }
+
     if (href.startsWith('/portfolio')) {
       void queryClient.prefetchQuery(holdingsQueryOptions());
       void queryClient.prefetchQuery(portfolioSummaryQueryOptions());
@@ -366,7 +390,7 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
       <div className="ambient-grid" aria-hidden="true" />
       <div className="noise-layer" aria-hidden="true" />
 
-      <div className="relative z-10 mx-auto flex min-h-screen w-full max-w-[1300px] gap-6 px-4 pb-12 pt-6 md:px-8">
+      <div className="relative z-10 mx-auto flex min-h-screen w-full max-w-[1300px] gap-4 px-3 pb-10 pt-4 sm:px-4 sm:pb-12 sm:pt-6 md:px-8 lg:gap-6">
         <aside className="hidden w-72 shrink-0 flex-col gap-6 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_0_0_1px_rgba(0,255,180,0.06),0_20px_60px_rgba(1,4,10,0.55)] lg:flex">
           <div>
             <p className="terminal-caption text-xs uppercase tracking-[0.25em] text-[color:var(--terminal-muted)]">Fiscal Clone</p>
@@ -421,8 +445,8 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
         </aside>
 
         <div className="min-w-0 flex-1 pb-24 lg:pb-0">
-          <header className="relative mb-4 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-6 py-5 pr-20 shadow-[0_0_0_1px_rgba(0,255,180,0.05),0_14px_40px_rgba(1,4,10,0.5)]">
-            <div className="absolute right-5 top-5 z-10">
+          <header className="relative mb-4 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-4 py-4 pr-16 shadow-[0_0_0_1px_rgba(0,255,180,0.05),0_14px_40px_rgba(1,4,10,0.5)] sm:px-6 sm:py-5 sm:pr-20">
+            <div className="absolute right-4 top-4 z-10 sm:right-5 sm:top-5">
               <TaskNotificationsTrigger
                 unreadCount={notifications.unreadCount}
                 isPopoverOpen={notifications.isPopoverOpen}
@@ -438,17 +462,17 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
                 markTaskRead={notifications.markTaskRead}
               />
             </div>
-            <div className="flex flex-wrap items-start justify-between gap-4">
-              <div>
+            <div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap sm:items-start sm:justify-between">
+              <div className="min-w-0 pr-6 sm:pr-0">
                 <p className="terminal-caption text-xs uppercase tracking-[0.3em] text-[color:var(--terminal-muted)]">Live System</p>
-                <h2 className="mt-2 text-2xl font-semibold text-[color:var(--terminal-bright)] md:text-3xl">{title}</h2>
+                <h2 className="mt-2 text-xl font-semibold text-[color:var(--terminal-bright)] sm:text-2xl md:text-3xl">{title}</h2>
                 {subtitle ? (
                   <p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p>
                 ) : null}
               </div>
-              <div className="flex flex-wrap items-center gap-2">
+              <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:items-center sm:justify-end">
                 {actions}
-                <Button variant="ghost" onClick={() => void signOut()} disabled={isSigningOut}>
+                <Button variant="ghost" className="max-sm:hidden sm:inline-flex lg:hidden" onClick={() => void signOut()} disabled={isSigningOut}>
                   <LogOut className="size-4" />
                   {isSigningOut ? 'Signing out...' : 'Sign out'}
                 </Button>
@@ -458,9 +482,9 @@ export function AppShell({ title, subtitle, actions, activeTicker, breadcrumbs,
 
           <nav
             aria-label="Breadcrumb"
-            className="mb-6 rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2"
+            className="mb-6 overflow-x-auto rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-3 py-2"
           >
-            <ol className="flex flex-wrap items-center gap-2 text-xs text-[color:var(--terminal-muted)]">
+            <ol className="flex min-w-max items-center gap-2 text-xs text-[color:var(--terminal-muted)] sm:min-w-0 sm:flex-wrap">
               {breadcrumbItems.map((item, index) => {
                 const isLast = index === breadcrumbItems.length - 1;
 

components/ui/button.tsx

@@ -17,7 +17,7 @@ export function Button({ className, variant = 'primary', ...props }: ButtonProps
   return (
     <button
       className={cn(
-        'inline-flex items-center justify-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition duration-200 disabled:cursor-not-allowed disabled:opacity-50',
+        'inline-flex min-h-11 items-center justify-center gap-2 rounded-lg border px-3 py-2 text-sm font-medium transition duration-200 disabled:cursor-not-allowed disabled:opacity-50',
         variantMap[variant],
         className
       )}

components/ui/input.tsx

@@ -6,7 +6,7 @@ export function Input({ className, ...props }: InputProps) {
   return (
     <input
       className={cn(
-        'w-full rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_rgba(0,255,180,0.14)]',
+        'min-h-11 w-full rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_rgba(0,255,180,0.14)]',
         className
       )}
       {...props}

components/ui/panel.tsx

@@ -12,17 +12,17 @@ export function Panel({ title, subtitle, actions, children, className }: PanelPr
   return (
     <section
       className={cn(
-        'min-w-0 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-5 shadow-[0_0_0_1px_rgba(0,255,180,0.03),0_12px_30px_rgba(1,4,10,0.45)]',
+        'min-w-0 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-4 shadow-[0_0_0_1px_rgba(0,255,180,0.03),0_12px_30px_rgba(1,4,10,0.45)] sm:p-5',
         className
       )}
     >
       {(title || subtitle || actions) ? (
-        <header className="mb-4 flex items-start justify-between gap-3">
-          <div>
+        <header className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0">
             {title ? <h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">{title}</h3> : null}
             {subtitle ? <p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p> : null}
           </div>
-          {actions ? <div>{actions}</div> : null}
+          {actions ? <div className="w-full sm:w-auto">{actions}</div> : null}
         </header>
       ) : null}
       {children}