diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b836b5c0..0b1207cf 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -39,6 +39,7 @@ const KnowledgeSourceFormPageWrapper = lazy(() => import('./pages/KnowledgeSourc
 const PreviewViewPage = lazy(() => import('./pages/PreviewViewPage'));
 const NotFoundPage = lazy(() => import('./pages/NotFoundPage'));
 const DataRecordViewWrapper = lazy(() => import('./pages/DataRecordViewWrapper'));
+const HubSimplePage = lazy(() => import('./pages/HubSimplePage'));
 
 import { useEffect } from 'react';
 import { createFrappeSocket } from './utils/socket';
@@ -117,6 +118,16 @@ function App() {
           <Routes>
           <Route
             path="/"
+            element={
+              <ProtectedRoute>
+                <Suspense fallback={<PageLoader />}>
+                  <HubSimplePage />
+                </Suspense>
+              </ProtectedRoute>
+            }
+          />
+          <Route
+            path="/dashboard"
             element={
               <ProtectedRoute>
                 <UnifiedLayout headerActions={<HomeHeaderActions />}>
diff --git a/frontend/src/components/HomeHeaderActions.tsx b/frontend/src/components/HomeHeaderActions.tsx
index a49a19a7..7ac8eee2 100644
--- a/frontend/src/components/HomeHeaderActions.tsx
+++ b/frontend/src/components/HomeHeaderActions.tsx
@@ -5,7 +5,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { Plus, Bot, Workflow } from 'lucide-react';
+import { ChevronLeft, Plus, Bot, Workflow } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
 export function HomeHeaderActions() {
@@ -20,23 +20,29 @@ export function HomeHeaderActions() {
   };
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button size="sm">
-          <Plus className="w-4 h-4 mr-2" />
-          New
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={handleNewFlow}>
-          <Workflow className="w-4 h-4 mr-2" />
-          New Flow
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={handleNewAgent}>
-          <Bot className="w-4 h-4 mr-2" />
-          New Agent
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <div className="flex items-center gap-2">
+      <Button variant="ghost" size="sm" onClick={() => navigate('/')} className="gap-1.5 text-slate-600">
+        <ChevronLeft className="w-4 h-4" />
+        Hub
+      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button size="sm">
+            <Plus className="w-4 h-4 mr-2" />
+            New
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem onClick={handleNewFlow}>
+            <Workflow className="w-4 h-4 mr-2" />
+            New Flow
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={handleNewAgent}>
+            <Bot className="w-4 h-4 mr-2" />
+            New Agent
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
   );
 }
diff --git a/frontend/src/components/hub/HubConversationView.tsx b/frontend/src/components/hub/HubConversationView.tsx
new file mode 100644
index 00000000..91dba027
--- /dev/null
+++ b/frontend/src/components/hub/HubConversationView.tsx
@@ -0,0 +1,138 @@
+import { useRef, useEffect } from 'react';
+import { motion } from 'motion/react';
+import { Send, Sparkles, Plus } from 'lucide-react';
+import { useUser } from '@/contexts/UserContext';
+import { SlashCommandMenu } from './SlashCommandMenu';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+interface HubConversationViewProps {
+  messages: Message[];
+  inputValue: string;
+  setInputValue: (v: string) => void;
+  onSend: () => void;
+  showSlashMenu: boolean;
+  slashQuery: string;
+  onSlashSelect: (cmd: string) => void;
+  onNewChat: () => void;
+  isStreaming?: boolean;
+}
+
+export function HubConversationView({
+  messages, inputValue, setInputValue, onSend,
+  showSlashMenu, slashQuery, onSlashSelect, onNewChat,
+  isStreaming,
+}: HubConversationViewProps) {
+  const { user } = useUser();
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const initials = (user?.full_name || user?.name || 'U')
+    .split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2);
+
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+  }, [messages]);
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey && !showSlashMenu) {
+      e.preventDefault();
+      onSend();
+    }
+  };
+
+  return (
+    <div className="flex-1 flex flex-col h-full">
+      {/* Messages */}
+      <div ref={scrollRef} className="flex-1 overflow-y-auto px-4 py-6 space-y-4">
+        {messages.map((msg, i) => (
+          <motion.div
+            key={i}
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.04 }}
+            className={`flex gap-3 ${msg.role === 'user' ? 'flex-row-reverse' : ''}`}
+          >
+            <div className="flex-shrink-0">
+              {msg.role === 'user' ? (
+                <div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-500 to-purple-500 flex items-center justify-center text-white text-xs font-medium">
+                  {initials}
+                </div>
+              ) : (
+                <div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center">
+                  <Sparkles className="w-3.5 h-3.5 text-white" />
+                </div>
+              )}
+            </div>
+            <div className={`flex-1 ${msg.role === 'user' ? 'text-right' : ''}`}>
+              {msg.role === 'assistant' && (
+                <div className="flex items-center gap-1.5 mb-1">
+                  <span className="text-xs font-medium text-violet-700">Hub Orchestrator</span>
+                  <span className="text-[10px] px-1.5 py-0.5 rounded bg-violet-50 text-violet-600 border border-violet-100">System</span>
+                </div>
+              )}
+              {msg.content === '__NO_PROVIDER__' ? (
+                <div className="inline-block max-w-[85%] px-4 py-3 rounded-xl bg-amber-50 border border-amber-200 text-left">
+                  <p className="text-sm font-medium text-amber-800 mb-1">No AI Provider configured</p>
+                  <p className="text-xs text-amber-700 mb-3">Add a provider and model to start using Hub Orchestrator.</p>
+                  <a href="/huf/models" className="text-xs px-3 py-1.5 rounded-lg bg-violet-600 text-white hover:bg-violet-700 transition-colors inline-block">
+                    Add Provider →
+                  </a>
+                </div>
+              ) : (
+                <div className={`inline-block max-w-[85%] px-3 py-2 rounded-xl text-sm text-left ${
+                  msg.role === 'user' ? 'bg-violet-600 text-white' : 'bg-slate-100 text-slate-700'
+                }`}>
+                  {msg.content}
+                </div>
+              )}
+            </div>
+          </motion.div>
+        ))}
+
+        {/* Typing indicator */}
+        {(messages.length > 0 && messages[messages.length - 1].role === 'user') || isStreaming ? (
+          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="flex gap-3">
+            <div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-600 to-purple-600 flex items-center justify-center">
+              <Sparkles className="w-3.5 h-3.5 text-white" />
+            </div>
+            <div className="flex items-center gap-1 px-3 py-2 bg-slate-100 rounded-xl">
+              {[0, 0.15, 0.3].map((delay, i) => (
+                <motion.div key={i} animate={{ scale: [1, 1.2, 1] }} transition={{ duration: 0.6, repeat: Infinity, delay }} className="w-1.5 h-1.5 rounded-full bg-violet-400" />
+              ))}
+            </div>
+          </motion.div>
+        ) : null}
+      </div>
+
+      {/* Input */}
+      <div className="px-4 py-4 border-t border-slate-100 bg-white">
+        <div className="max-w-2xl mx-auto relative">
+          <SlashCommandMenu isVisible={showSlashMenu} query={slashQuery} onSelect={onSlashSelect} />
+          <div className={`relative bg-white border transition-all rounded-xl ${
+            showSlashMenu ? 'border-violet-400' : 'border-slate-200 shadow-sm hover:border-slate-300 focus-within:border-violet-400'
+          }`}>
+            <textarea
+              value={inputValue}
+              onChange={e => setInputValue(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Continue the conversation..."
+              rows={1}
+              className="w-full px-4 py-3 pr-24 text-sm resize-none outline-none bg-transparent text-slate-700 placeholder:text-slate-400 min-h-[52px]"
+            />
+            <div className="absolute right-2 bottom-2 flex items-center gap-1">
+              <button onClick={onNewChat} className="p-1.5 rounded-md text-slate-400 hover:text-violet-600 hover:bg-violet-50 transition-colors" title="New chat">
+                <Plus className="w-4 h-4" />
+              </button>
+              <button onClick={onSend} disabled={!inputValue.trim()} className="p-1.5 rounded-md bg-violet-600 text-white disabled:bg-slate-200 disabled:text-slate-400 hover:bg-violet-700 transition-colors">
+                <Send className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/hub/SlashCommandMenu.tsx b/frontend/src/components/hub/SlashCommandMenu.tsx
new file mode 100644
index 00000000..90e7fe4b
--- /dev/null
+++ b/frontend/src/components/hub/SlashCommandMenu.tsx
@@ -0,0 +1,96 @@
+import { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Workflow, Bot, Users, Database, DollarSign, BookOpen, Settings, ArrowRight } from 'lucide-react';
+
+interface Command {
+  id: string;
+  label: string;
+  description: string;
+  icon: React.ElementType;
+}
+
+const COMMANDS: Command[] = [
+  { id: '/flow', label: 'Flow', description: 'Create, edit, or manage workflows', icon: Workflow },
+  { id: '/agent', label: 'Agent', description: 'Create, configure, or run agents', icon: Bot },
+  { id: '/users', label: 'Users', description: 'Manage users and permissions', icon: Users },
+  { id: '/runs', label: 'Executions', description: 'View and manage agent runs', icon: Database },
+  { id: '/cost', label: 'Cost', description: 'View costs and optimize spending', icon: DollarSign },
+  { id: '/knowledge', label: 'Knowledge', description: 'Index and search knowledge sources', icon: BookOpen },
+  { id: '/settings', label: 'Settings', description: 'Configure providers and preferences', icon: Settings },
+];
+
+interface SlashCommandMenuProps {
+  isVisible: boolean;
+  query: string;
+  onSelect: (command: string) => void;
+}
+
+export function SlashCommandMenu({ isVisible, query, onSelect }: SlashCommandMenuProps) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const filtered = query
+    ? COMMANDS.filter(c => c.id.includes(query.toLowerCase()) || c.label.toLowerCase().includes(query.toLowerCase()))
+    : COMMANDS;
+
+  useEffect(() => { setSelectedIndex(0); }, [query]);
+
+  useEffect(() => {
+    if (!isVisible) return;
+    const handle = (e: KeyboardEvent) => {
+      if (e.key === 'ArrowDown') { e.preventDefault(); setSelectedIndex(i => (i + 1) % filtered.length); }
+      if (e.key === 'ArrowUp') { e.preventDefault(); setSelectedIndex(i => (i - 1 + filtered.length) % filtered.length); }
+      if (e.key === 'Enter' || e.key === 'Tab') { e.preventDefault(); if (filtered[selectedIndex]) onSelect(filtered[selectedIndex].id); }
+    };
+    window.addEventListener('keydown', handle);
+    return () => window.removeEventListener('keydown', handle);
+  }, [isVisible, filtered, selectedIndex, onSelect]);
+
+  useEffect(() => {
+    itemRefs.current[selectedIndex]?.scrollIntoView({ block: 'nearest' });
+  }, [selectedIndex]);
+
+  if (!isVisible || filtered.length === 0) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: 4 }}
+        animate={{ opacity: 1, y: 0 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.1 }}
+        className="absolute left-0 right-0 bottom-full mb-1 bg-white rounded-xl border border-violet-300 shadow-xl overflow-hidden z-50"
+        style={{ maxHeight: 320 }}
+      >
+        <div className="overflow-y-auto py-1" style={{ maxHeight: 280 }}>
+          {filtered.map((cmd, i) => (
+            <button
+              key={cmd.id}
+              ref={el => { itemRefs.current[i] = el; }}
+              onClick={() => onSelect(cmd.id)}
+              onMouseEnter={() => setSelectedIndex(i)}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors ${i === selectedIndex ? 'bg-violet-50' : 'hover:bg-slate-50'}`}
+            >
+              <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${i === selectedIndex ? 'bg-violet-100 text-violet-600' : 'bg-slate-100 text-slate-500'}`}>
+                <cmd.icon className="w-4 h-4" />
+              </div>
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center gap-2">
+                  <code className={`text-sm font-mono font-medium ${i === selectedIndex ? 'text-violet-700' : 'text-slate-700'}`}>{cmd.id}</code>
+                  <span className="text-xs text-slate-400">—</span>
+                  <span className="text-sm text-slate-600">{cmd.label}</span>
+                </div>
+                <p className="text-xs text-slate-500 truncate">{cmd.description}</p>
+              </div>
+              {i === selectedIndex && <ArrowRight className="w-4 h-4 text-violet-500 flex-shrink-0" />}
+            </button>
+          ))}
+        </div>
+        <div className="px-3 py-2 border-t border-slate-100 bg-slate-50/50 flex items-center gap-4 text-[11px] text-slate-400">
+          <span className="flex items-center gap-1"><kbd className="px-1.5 py-0.5 bg-white rounded border text-slate-500">↑↓</kbd> navigate</span>
+          <span className="flex items-center gap-1"><kbd className="px-1.5 py-0.5 bg-white rounded border text-slate-500">↵</kbd> select</span>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
diff --git a/frontend/src/layouts/UnifiedLayout.tsx b/frontend/src/layouts/UnifiedLayout.tsx
index c516b851..6b7fb4a2 100644
--- a/frontend/src/layouts/UnifiedLayout.tsx
+++ b/frontend/src/layouts/UnifiedLayout.tsx
@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
 import { AppSidebar } from '../components/app-sidebar';
 import { UnifiedHeader } from './UnifiedHeader';
 import {
@@ -23,8 +23,11 @@ interface UnifiedLayoutProps {
 }
 
 export function UnifiedLayout({ children, hideHeader, headerActions, breadcrumbs }: UnifiedLayoutProps) {
+  const location = useLocation();
+  const defaultOpen = location.pathname !== '/';
+
   return (
-    <SidebarProvider>
+    <SidebarProvider defaultOpen={defaultOpen}>
       <AppSidebar />
       <SidebarInset className="h-svh max-h-svh overflow-hidden">
         {!hideHeader && (
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index d3ddc173..9375cb97 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,296 +1,188 @@
-import { useState, useEffect } from 'react';
-import { Info, Loader2 } from 'lucide-react';
-import { Card, CardContent, CardHeader, CardTitle } from '../components/ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '../components/ui/tabs';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components/ui/tooltip';
-import { Button } from '../components/ui/button';
+import { useMemo, useState } from 'react';
+import { ArrowRight, Command, Sparkles } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { ActiveAgentsTab, ActiveFlowsTab, RecentExecutionsTab } from '../components/dashboard';
-import { getAgentRunsCountLast7Days, getAgentRunsForMetrics, getRecentAgentRuns, type AgentRunMetricsDoc } from '../services/dashboardApi';
-import type { AgentRunDoc } from '../services/agentRunApi';
-import { getAgents } from '../services/agentApi';
-import type { AgentDoc } from '../types/agent.types';
-
-interface DashboardMetrics {
-  totalRuns: number;
-  successRate: number;
-  avgRuntime: number;
-  totalCost: number;
-}
-
-/**
- * Calculate success rate from agent runs
- */
-function calculateSuccessRate(runs: AgentRunMetricsDoc[]): number {
-  if (runs.length === 0) return 0;
-  const successCount = runs.filter(
-    (run) => run.status === 'Success' || run.status === 'success'
-  ).length;
-  return (successCount / runs.length) * 100;
-}
-
-/**
- * Calculate average runtime from agent runs
- */
-function calculateAvgRuntime(runs: AgentRunMetricsDoc[]): number {
-  const validRuns = runs.filter(
-    (run) => run.start_time && run.end_time
-  );
-
-  if (validRuns.length === 0) return 0;
-
-  const totalMs = validRuns.reduce((sum, run) => {
-    try {
-      const start = new Date(run.start_time!);
-      const end = new Date(run.end_time!);
-      
-      if (isNaN(start.getTime()) || isNaN(end.getTime())) {
-        return sum;
-      }
-
-      const diff = end.getTime() - start.getTime();
-      return diff >= 0 ? sum + diff : sum;
-    } catch {
-      return sum;
-    }
-  }, 0);
-
-  return totalMs / validRuns.length;
-}
-
-/**
- * Calculate total cost from agent runs
- */
-function calculateTotalCost(runs: AgentRunMetricsDoc[]): number {
-  return runs.reduce((sum, run) => {
-    const cost = run.cost;
-    return sum + (typeof cost === 'number' && !isNaN(cost) ? cost : 0);
-  }, 0);
-}
-
-/**
- * Format duration in milliseconds to human-readable string
- */
-function formatDuration(ms: number): string {
-  if (ms < 1000) {
-    return `${Math.round(ms)}ms`;
-  }
-  if (ms < 60000) {
-    return `${(ms / 1000).toFixed(1)}s`;
-  }
-  const minutes = Math.floor(ms / 60000);
-  const seconds = Math.floor((ms % 60000) / 1000);
-  return `${minutes}m ${seconds}s`;
-}
-
-/**
- * Format number with commas
- */
-function formatNumber(num: number): string {
-  return num.toLocaleString('en-US');
-}
-
-/**
- * Format currency with up to 4 decimal places
- * Shows more decimal places for very small values
- */
-function formatCurrency(amount: number): string {
-  // Format with up to 4 decimal places, removing trailing zeros
-  const formatted = amount.toFixed(4);
-  // Remove trailing zeros but keep at least 2 decimal places
-  const trimmed = formatted.replace(/\.?0+$/, '');
-  
-  // If no decimal point, add .00
-  if (!trimmed.includes('.')) {
-    return `$${trimmed}.00`;
-  }
-  
-  // Ensure at least 2 decimal places for consistency
-  const parts = trimmed.split('.');
-  const decimals = parts[1];
-  if (decimals.length < 2) {
-    return `$${parts[0]}.${decimals.padEnd(2, '0')}`;
-  }
-  
-  return `$${trimmed}`;
-}
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { parseSlashCommand, type ParsedCommand } from '@/services/commandParser';
+
+const starterPrompts = [
+  '/flow create approval for todo',
+  '/agent create support assistant for billing',
+  '/users add teammate as builder in realm operations',
+  '/runs retry failed since yesterday',
+  '/cost show last 7 days by model',
+];
+
+const commandCatalog = [
+  { domain: 'flow', hint: 'Create and manage automations', route: '/flows' },
+  { domain: 'agent', hint: 'Build and manage agents', route: '/agents' },
+  { domain: 'users', hint: 'Invite/remove users', route: '/users' },
+  { domain: 'knowledge', hint: 'Index and query sources', route: '/knowledge' },
+  { domain: 'runs', hint: 'Inspect and retry executions', route: '/executions' },
+  { domain: 'cost', hint: 'Analyze usage and cost', route: '/executions' },
+  { domain: 'realm', hint: 'Realm-level operations', route: '/users' },
+] as const;
+
+const domainRouteMap = Object.fromEntries(commandCatalog.map((item) => [item.domain, item.route]));
 
 export { HomePage };
 export default HomePage;
 
 function HomePage() {
   const navigate = useNavigate();
-  const [activeTab, setActiveTab] = useState('agents');
-  const [metrics, setMetrics] = useState<DashboardMetrics>({
-    totalRuns: 0,
-    successRate: 0,
-    avgRuntime: 0,
-    totalCost: 0,
-  });
-  const [metricsLoading, setMetricsLoading] = useState(true);
-  
-  // Data for tabs - loaded once on mount
-  const [agents, setAgents] = useState<AgentDoc[]>([]);
-  const [agentsLoading, setAgentsLoading] = useState(true);
-  const [agentRuns, setAgentRuns] = useState<AgentRunDoc[]>([]);
-  const [agentRunsLoading, setAgentRunsLoading] = useState(true);
-
-  useEffect(() => {
-    async function fetchAllData() {
-      try {
-        // Fetch all data in parallel
-        const [totalRuns, runsData, agentsData, recentRuns] = await Promise.all([
-          getAgentRunsCountLast7Days(),
-          getAgentRunsForMetrics(),
-          getAgents({
-            status: 'active',
-            limit: 10,
-            page: 1,
-          }),
-          getRecentAgentRuns(),
-        ]);
-
-        // Process metrics
-        const successRate = calculateSuccessRate(runsData);
-        const avgRuntime = calculateAvgRuntime(runsData);
-        const totalCost = calculateTotalCost(runsData);
-
-        setMetrics({
-          totalRuns,
-          successRate,
-          avgRuntime,
-          totalCost,
-        });
-
-        // Process agents
-        const agentList = Array.isArray(agentsData) ? agentsData : agentsData.items;
-        const activeAgents = agentList.filter((agent) => agent.disabled === 0);
-        setAgents(activeAgents.slice(0, 10));
-
-        // Set agent runs
-        setAgentRuns(recentRuns);
-      } catch (error) {
-        console.error('Error fetching dashboard data:', error);
-      } finally {
-        setMetricsLoading(false);
-        setAgentsLoading(false);
-        setAgentRunsLoading(false);
-      }
+  const [input, setInput] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [lastParsed, setLastParsed] = useState<ParsedCommand | null>(null);
+
+  const showCommandPicker = input.trim().startsWith('/');
+
+  const filteredCatalog = useMemo(() => {
+    if (!showCommandPicker) return commandCatalog;
+    const needle = input.replace('/', '').trim().toLowerCase();
+    if (!needle) return commandCatalog;
+    return commandCatalog.filter((item) => item.domain.includes(needle) || item.hint.toLowerCase().includes(needle));
+  }, [input, showCommandPicker]);
+
+  const handleSubmit = () => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+
+    if (!trimmed.startsWith('/')) {
+      navigate('/chat');
+      return;
     }
 
-    fetchAllData();
-  }, []);
-
-  const metricsData = [
-    {
-      id: 'total-runs',
-      title: 'Total Agent Runs',
-      subtitle: 'Last 7 days',
-      value: metricsLoading ? '...' : formatNumber(metrics.totalRuns),
-      tooltip: 'Total number of agent executions in the last 7 days',
-    },
-    {
-      id: 'success-rate',
-      title: 'Success Rate',
-      subtitle: 'Last 7 days',
-      value: metricsLoading ? '...' : `${metrics.successRate.toFixed(1)}%`,
-      tooltip: 'Percentage of successful agent runs without errors',
-    },
-    {
-      id: 'avg-runtime',
-      title: 'Avg Runtime',
-      subtitle: 'Last 7 days',
-      value: metricsLoading ? '...' : formatDuration(metrics.avgRuntime),
-      tooltip: 'Average execution time across all agent runs',
-    },
-    {
-      id: 'cost',
-      title: 'Total Cost',
-      subtitle: 'Last 7 days',
-      value: metricsLoading ? '...' : formatCurrency(metrics.totalCost),
-      tooltip: 'Total API costs for LLM usage across all agents',
-    },
-  ];
+    try {
+      const parsed = parseSlashCommand(trimmed);
+      setLastParsed(parsed);
+      setError(null);
+
+      const route = domainRouteMap[parsed.domain] ?? '/';
+      navigate(route);
+    } catch (parseError) {
+      const message = parseError instanceof Error ? parseError.message : 'Unable to parse command.';
+      setError(message);
+      setLastParsed(null);
+    }
+  };
 
   return (
     <div className="h-full overflow-auto">
-      <div className="p-6 space-y-6">
-        <div>
-          <h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
-          <p className="text-muted-foreground mt-1">
-            Monitor your agents, flows, and system performance
+      <div className="mx-auto flex w-full max-w-5xl flex-col gap-6 p-6 md:p-10">
+        <section className="rounded-2xl border bg-gradient-to-b from-muted/20 to-background p-6 md:p-10">
+          <div className="mb-6 flex items-center gap-2 text-sm text-muted-foreground">
+            <Sparkles className="h-4 w-4" />
+            Hub Simple powered by Huf orchestrator
+          </div>
+          <h1 className="text-3xl font-semibold tracking-tight md:text-4xl">What are you building today?</h1>
+          <p className="mt-2 max-w-2xl text-muted-foreground">
+            Use natural language or type <code>/</code> for a command. Commands route to focused sub-agents such as
+            flow, users, and cost operations.
           </p>
-        </div>
 
-        {/* Metrics Cards */}
-        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-          <TooltipProvider>
-            {metricsData.map((metric) => (
-              <Card key={metric.id}>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                  <CardTitle className="text-sm font-medium">
-                    {metric.title}
-                  </CardTitle>
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <Info className="h-4 w-4 text-muted-foreground cursor-help" />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      <p className="max-w-xs">{metric.tooltip}</p>
-                    </TooltipContent>
-                  </Tooltip>
-                </CardHeader>
-                <CardContent>
-                  <div className="text-xs text-muted-foreground mb-2">
-                    {metric.subtitle}
-                  </div>
-                  <div className="text-2xl font-bold flex items-center gap-2">
-                    {metricsLoading && metric.value === '...' ? (
-                      <Loader2 className="w-5 h-5 animate-spin" />
-                    ) : (
-                      metric.value
-                    )}
-                  </div>
-                </CardContent>
-              </Card>
-            ))}
-          </TooltipProvider>
-        </div>
+          <div className="mt-6 flex flex-col gap-3 md:flex-row">
+            <Input
+              value={input}
+              onChange={(event) => setInput(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  handleSubmit();
+                }
+              }}
+              placeholder="Try: /flow create approval for todo"
+              className="h-11"
+            />
+            <Button className="h-11 px-6" onClick={handleSubmit}>
+              Run
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </Button>
+            <Button variant="outline" className="h-11" onClick={() => navigate('/chat')}>
+              Open Advanced Chat
+            </Button>
+          </div>
 
-        {/* Tabbed Interface */}
-        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
-          <div className="flex items-center justify-between">
-            <TabsList>
-              <TabsTrigger value="agents">Agents</TabsTrigger>
-              <TabsTrigger value="flows">Flows</TabsTrigger>
-              <TabsTrigger value="executions">Executions</TabsTrigger>
-            </TabsList>
-            {activeTab === 'agents' && (
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => navigate('/agents')}
+          {showCommandPicker && (
+            <div className="mt-3 rounded-lg border bg-card p-3">
+              <div className="mb-2 flex items-center gap-2 text-sm font-medium">
+                <Command className="h-4 w-4" />
+                Command shortcuts
+              </div>
+              <div className="grid gap-2 md:grid-cols-2">
+                {filteredCatalog.map((item) => (
+                  <button
+                    key={item.domain}
+                    className="rounded-md border bg-background px-3 py-2 text-left text-sm hover:bg-muted"
+                    onClick={() => setInput(`/${item.domain} `)}
+                    type="button"
+                  >
+                    <div className="font-medium">/{item.domain}</div>
+                    <div className="text-xs text-muted-foreground">{item.hint}</div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {error && <p className="mt-3 text-sm text-destructive">{error}</p>}
+
+          {lastParsed && (
+            <div className="mt-3 rounded-lg border bg-card p-3 text-sm">
+              <div className="font-medium">Parsed command</div>
+              <div className="mt-1 text-muted-foreground">
+                {lastParsed.routingMode} → <strong>{lastParsed.domain}</strong> / {lastParsed.verb}
+              </div>
+            </div>
+          )}
+        </section>
+
+        <section>
+          <h2 className="mb-3 text-sm font-medium text-muted-foreground">Starter actions</h2>
+          <div className="grid gap-3 md:grid-cols-2">
+            {starterPrompts.map((prompt) => (
+              <button
+                key={prompt}
+                className="rounded-lg border bg-card px-4 py-3 text-left text-sm hover:bg-muted"
+                onClick={() => setInput(prompt)}
+                type="button"
               >
-                Show More
-              </Button>
-            )}
+                {prompt}
+              </button>
+            ))}
           </div>
-
-          {/* Agents Tab */}
-          <TabsContent value="agents" className="space-y-4">
-            <ActiveAgentsTab agents={agents} loading={agentsLoading} />
-          </TabsContent>
-
-          {/* Flows Tab */}
-          <TabsContent value="flows" className="space-y-4">
-            <ActiveFlowsTab />
-          </TabsContent>
-
-          {/* Executions Tab */}
-          <TabsContent value="executions" className="space-y-4">
-            <RecentExecutionsTab runs={agentRuns} loading={agentRunsLoading} />
-          </TabsContent>
-        </Tabs>
+        </section>
+
+        <section className="grid gap-4 md:grid-cols-3">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Permissions</CardTitle>
+              <CardDescription>Huf roles and agent-level controls are applied automatically.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Badge variant="secondary">No new privilege model</Badge>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Orchestration</CardTitle>
+              <CardDescription>Requests are delegated to domain agents for clearer scope.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Badge variant="secondary">Orchestrator + Sub-agents</Badge>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Need full control?</CardTitle>
+              <CardDescription>Switch to the existing Hub interface at any time.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Button variant="outline" onClick={() => navigate('/agents')}>Go to Advanced Hub</Button>
+            </CardContent>
+          </Card>
+        </section>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/HubSimplePage.tsx b/frontend/src/pages/HubSimplePage.tsx
new file mode 100644
index 00000000..1b795d47
--- /dev/null
+++ b/frontend/src/pages/HubSimplePage.tsx
@@ -0,0 +1,369 @@
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { motion, AnimatePresence } from 'motion/react';
+import {
+  Plus, MessageSquare, Bot, Workflow,
+  Database, BookOpen, Cpu, LayoutDashboard, Settings, Send,
+} from 'lucide-react';
+import { useUser } from '@/contexts/UserContext';
+import { usePermissions } from '@/contexts/PermissionsContext';
+import { HubConversationView } from '@/components/hub/HubConversationView';
+import { SlashCommandMenu } from '@/components/hub/SlashCommandMenu';
+import { getProviders } from '@/services/providerApi';
+import { sendMessage, streamingAvailable } from '@/services/streamChatApi';
+
+interface Message { role: 'user' | 'assistant'; content: string; }
+
+interface StarterPrompt {
+  label: string;
+  route?: string;
+  message?: string;
+}
+
+const GREETINGS: Record<string, string> = {
+  admin: 'What would you like to orchestrate?',
+  builder: 'What are you building today?',
+  operator: 'What do you need to monitor?',
+  viewer: 'What insights are you looking for?',
+};
+
+const STARTER_PROMPTS: Record<string, StarterPrompt[]> = {
+  admin: [
+    { label: 'Create approval flow for ToDo', route: '/flows' },
+    { label: 'Invite user and assign Builder role', route: '/users' },
+    { label: 'Show weekly cost analysis', route: '/dashboard' },
+    { label: 'List failed automations today', route: '/executions' },
+  ],
+  builder: [
+    { label: 'Build a new flow', route: '/flows' },
+    { label: 'Create a new knowledge agent', route: '/agents' },
+    { label: 'Browse existing agents', route: '/agents' },
+    { label: 'Add an agent tool', route: '/agents' },
+  ],
+  operator: [
+    { label: 'Show failed executions', route: '/executions' },
+    { label: 'View all executions', route: '/executions' },
+    { label: 'View dashboard metrics', route: '/dashboard' },
+    { label: 'Export run diagnostics', route: '/executions' },
+  ],
+  viewer: [
+    { label: 'Show dashboard metrics', route: '/dashboard' },
+    { label: 'List active agents', route: '/agents' },
+    { label: 'View flow success rates', route: '/executions' },
+    { label: 'Generate cost report', route: '/dashboard' },
+  ],
+};
+
+const NAV_ITEMS = [
+  { icon: MessageSquare, label: 'Home', path: '/' },
+  { icon: Bot, label: 'Agents', path: '/agents' },
+  { icon: Workflow, label: 'Flows', path: '/flows' },
+  { icon: Database, label: 'Executions', path: '/executions' },
+  { icon: BookOpen, label: 'Knowledge', path: '/knowledge' },
+  { icon: Cpu, label: 'AI Providers', path: '/models' },
+];
+
+export default function HubSimplePage() {
+  const navigate = useNavigate();
+  const { user } = useUser();
+  const { capabilities } = usePermissions();
+
+  const role = capabilities.includes('system.admin') ? 'admin'
+    : capabilities.includes('agent.use') ? 'builder'
+    : 'viewer';
+
+  const initials = (user?.full_name || user?.name || 'U')
+    .split(' ').map((n: string) => n[0]).join('').toUpperCase().slice(0, 2);
+
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [inputValue, setInputValue] = useState('');
+  const [showSlashMenu, setShowSlashMenu] = useState(false);
+  const [slashQuery, setSlashQuery] = useState('');
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const [hasProvider, setHasProvider] = useState<boolean | null>(null);
+  const [conversationId, setConversationId] = useState<string | undefined>(undefined);
+  const [isStreaming, setIsStreaming] = useState(false);
+
+  // Detect slash commands
+  useEffect(() => {
+    const lastSlash = inputValue.lastIndexOf('/');
+    if (lastSlash !== -1) {
+      const after = inputValue.slice(lastSlash + 1);
+      if (!after.includes(' ')) {
+        setSlashQuery(after);
+        setShowSlashMenu(true);
+        return;
+      }
+    }
+    setShowSlashMenu(false);
+  }, [inputValue]);
+
+  // Check providers on mount
+  useEffect(() => {
+    getProviders({ limit: 1 }).then(result => {
+      const items = Array.isArray(result) ? result : result.items;
+      setHasProvider(items.length > 0);
+    }).catch(() => setHasProvider(false));
+  }, []);
+
+  const sendToAgent = async (msg: string) => {
+    if (!hasProvider) {
+      setTimeout(() => {
+        setMessages(prev => [...prev, { role: 'assistant', content: '__NO_PROVIDER__' }]);
+      }, 300);
+      return;
+    }
+
+    // Optimistically insert empty assistant message — same pattern as ChatInput
+    const assistantKey = `assistant-${Date.now()}`;
+    setMessages(prev => [...prev, { role: 'assistant', content: '', _key: assistantKey } as any]);
+    setIsStreaming(true);
+
+    const updateAssistantContent = (content: string) => {
+      setMessages(prev => prev.map((m: any) =>
+        m._key === assistantKey ? { ...m, content } : m
+      ));
+    };
+
+    try {
+      const useStream = streamingAvailable;
+      const result = await sendMessage(
+        { agent: 'Hub Orchestrator', message: msg, conversationId },
+        { useStreaming: useStream, onDelta: useStream ? updateAssistantContent : undefined }
+      );
+      const data = result.message as any;
+      const responseText: string = data?.run?.response ?? data?.response ?? "I've processed your request.";
+      const newConvId: string = data?.conversation_id ?? data?.run?.conversation_id ?? '';
+      if (!useStream) updateAssistantContent(responseText);
+      setConversationId(newConvId || undefined);
+    } catch {
+      updateAssistantContent("Hub Orchestrator agent is not configured yet. Go to Agents to set one up.");
+    } finally {
+      setIsStreaming(false);
+    }
+  };
+
+  const handleSend = () => {
+    if (!inputValue.trim()) return;
+    const msg = inputValue.trim();
+    setInputValue('');
+    setShowSlashMenu(false);
+    setMessages(prev => [...prev, { role: 'user', content: msg }]);
+    sendToAgent(msg);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey && !showSlashMenu) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleSlashSelect = (cmd: string) => {
+    const routeMap: Record<string, string> = {
+      '/flow': '/flows', '/agent': '/agents', '/users': '/users',
+      '/runs': '/executions', '/knowledge': '/knowledge', '/settings': '/models', '/cost': '/',
+    };
+    const lastSlash = inputValue.lastIndexOf('/');
+    setInputValue(inputValue.slice(0, lastSlash) + cmd + ' ');
+    setShowSlashMenu(false);
+    textareaRef.current?.focus();
+    // Navigate if it's a pure command (nothing before slash)
+    if (lastSlash === 0 || lastSlash === -1) {
+      const route = routeMap[cmd];
+      if (route && route !== '/') { navigate(route); return; }
+    }
+  };
+
+  const handlePromptClick = (prompt: StarterPrompt) => {
+    if (prompt.route) {
+      navigate(prompt.route);
+      return;
+    }
+    const msg = prompt.message || prompt.label;
+    setMessages([{ role: 'user', content: msg }]);
+    sendToAgent(msg);
+  };
+
+  const handleNewChat = () => {
+    setMessages([]);
+    setInputValue('');
+    setShowSlashMenu(false);
+  };
+
+  const handleSwitchToAdvanced = () => {
+    navigate('/dashboard');
+  };
+
+  return (
+    <div className="min-h-screen flex bg-white">
+      {/* Collapsed Sidebar */}
+      <aside className="w-[60px] bg-white border-r border-slate-100 flex flex-col py-3 flex-shrink-0">
+        {/* Logo */}
+        <div className="px-3 mb-4">
+          <div className="w-9 h-9 rounded-lg bg-violet-600 flex items-center justify-center">
+            <span className="text-white text-xs font-bold">H</span>
+          </div>
+        </div>
+
+        {/* New chat */}
+        <div className="px-2 mb-3">
+          <button
+            onClick={handleNewChat}
+            title="New chat"
+            className="w-10 h-10 rounded-lg border border-slate-200 flex items-center justify-center text-slate-500 hover:border-violet-300 hover:text-violet-600 hover:bg-violet-50 transition-all"
+          >
+            <Plus className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Nav */}
+        <nav className="flex-1 px-2 space-y-1">
+          {NAV_ITEMS.map((item, i) => (
+            <button
+              key={item.label}
+              title={item.label}
+              onClick={() => navigate(item.path)}
+              className={`w-10 h-10 flex items-center justify-center rounded-lg transition-colors ${
+                i === 0 ? 'bg-violet-100 text-violet-700' : 'text-slate-500 hover:bg-slate-100 hover:text-slate-700'
+              }`}
+            >
+              <item.icon className="w-4 h-4" />
+            </button>
+          ))}
+        </nav>
+
+        {/* Bottom actions */}
+        <div className="px-2 pt-3 border-t border-slate-100 space-y-1">
+          <button
+            onClick={handleSwitchToAdvanced}
+            title="Switch to Advanced Hub"
+            className="w-10 h-10 flex items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-700 transition-colors"
+          >
+            <LayoutDashboard className="w-4 h-4" />
+          </button>
+          <button
+            onClick={() => navigate('/models')}
+            title="Settings"
+            className="w-10 h-10 flex items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-700 transition-colors"
+          >
+            <Settings className="w-4 h-4" />
+          </button>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 flex flex-col min-h-screen relative overflow-hidden">
+        {/* User avatar top-right */}
+        <div className="absolute top-3 right-4 z-10">
+          <div className="w-7 h-7 rounded-full bg-gradient-to-br from-violet-500 to-purple-500 flex items-center justify-center text-white text-xs font-medium">
+            {initials}
+          </div>
+        </div>
+
+        <AnimatePresence mode="wait">
+          {messages.length === 0 ? (
+            <motion.div
+              key="home"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="flex-1 flex flex-col"
+            >
+              <motion.div
+                className="absolute inset-x-0 bottom-0 top-0 flex flex-col items-center px-4"
+                animate={{
+                  justifyContent: isInputFocused ? 'flex-start' : 'center',
+                  paddingTop: isInputFocused ? '80px' : '0px',
+                }}
+                transition={{ duration: 0.3, ease: [0.25, 0.46, 0.45, 0.94] }}
+              >
+                {/* Greeting */}
+                <motion.div
+                  animate={{ opacity: isInputFocused ? 0 : 1, height: isInputFocused ? 0 : 'auto', marginBottom: isInputFocused ? 0 : 32 }}
+                  transition={{ duration: 0.2 }}
+                  className="overflow-hidden"
+                >
+                  <h1 className="text-2xl font-medium text-slate-800 text-center">
+                    {GREETINGS[role] || GREETINGS.admin}
+                  </h1>
+                </motion.div>
+
+                {/* Input composer */}
+                <div className="w-full max-w-2xl relative">
+                  <SlashCommandMenu isVisible={showSlashMenu} query={slashQuery} onSelect={handleSlashSelect} />
+                  <div className={`relative bg-white border transition-all duration-200 ${
+                    isInputFocused ? 'rounded-xl border-violet-400 shadow-lg shadow-violet-100' : 'rounded-xl border-slate-200 shadow-sm hover:border-slate-300'
+                  }`}>
+                    <textarea
+                      ref={textareaRef}
+                      value={inputValue}
+                      onChange={e => setInputValue(e.target.value)}
+                      onKeyDown={handleKeyDown}
+                      onFocus={() => setIsInputFocused(true)}
+                      onBlur={() => setTimeout(() => setIsInputFocused(false), 150)}
+                      placeholder="Ask anything or type / for commands..."
+                      rows={1}
+                      className="w-full px-4 py-3 pr-12 text-sm resize-none outline-none bg-transparent text-slate-700 placeholder:text-slate-400 min-h-[52px]"
+                    />
+                    <button
+                      onClick={handleSend}
+                      disabled={!inputValue.trim()}
+                      className="absolute right-3 bottom-3 p-1.5 rounded-md bg-violet-600 text-white disabled:bg-slate-200 disabled:text-slate-400 hover:bg-violet-700 transition-colors"
+                    >
+                      <Send className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+
+                  {/* Starter prompts */}
+                  <motion.div
+                    animate={{ opacity: showSlashMenu ? 0 : (isInputFocused ? 0.4 : 1) }}
+                    transition={{ duration: 0.15 }}
+                    className="mt-5 grid grid-cols-2 gap-2"
+                  >
+                    {(STARTER_PROMPTS[role] || STARTER_PROMPTS.admin).map((prompt, i) => (
+                      <motion.button
+                        key={prompt.label}
+                        initial={{ opacity: 0, y: 4 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.05 + i * 0.05 }}
+                        onClick={() => handlePromptClick(prompt)}
+                        className="p-3 text-left rounded-lg border border-slate-200 hover:border-violet-300 hover:bg-violet-50/40 transition-all group"
+                      >
+                        <p className="text-xs text-slate-600 group-hover:text-violet-700 transition-colors line-clamp-2">{prompt.label}</p>
+                      </motion.button>
+                    ))}
+                  </motion.div>
+                </div>
+              </motion.div>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="conversation"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.2 }}
+              className="flex-1 flex flex-col h-full pt-10"
+            >
+              <HubConversationView
+                messages={messages}
+                inputValue={inputValue}
+                setInputValue={setInputValue}
+                onSend={handleSend}
+                showSlashMenu={showSlashMenu}
+                slashQuery={slashQuery}
+                onSlashSelect={handleSlashSelect}
+                onNewChat={handleNewChat}
+                isStreaming={isStreaming}
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </main>
+    </div>
+  );
+}
diff --git a/frontend/src/services/commandParser.ts b/frontend/src/services/commandParser.ts
new file mode 100644
index 00000000..9340eef5
--- /dev/null
+++ b/frontend/src/services/commandParser.ts
@@ -0,0 +1,113 @@
+export type CommandDomain = 'flow' | 'agent' | 'users' | 'knowledge' | 'runs' | 'cost' | 'realm';
+
+export interface CommandQualifier {
+  key: string;
+  value: string;
+}
+
+export interface ParsedCommand {
+  raw: string;
+  routingMode: 'domain' | 'explicit-agent';
+  domain: CommandDomain;
+  verb: string;
+  objectPhrase: string;
+  qualifiers: CommandQualifier[];
+}
+
+const SUPPORTED_DOMAINS: CommandDomain[] = ['flow', 'agent', 'users', 'knowledge', 'runs', 'cost', 'realm'];
+const QUALIFIER_KEYS = new Set(['for', 'in', 'as', 'since', 'by', 'with', 'from', 'to']);
+const VERB_ALIASES: Record<string, string> = {
+  make: 'create',
+  new: 'create',
+  del: 'delete',
+  rm: 'remove',
+  ls: 'list',
+};
+
+function normalizeVerb(verb: string): string {
+  const lowerVerb = verb.toLowerCase();
+  return VERB_ALIASES[lowerVerb] ?? lowerVerb;
+}
+
+function parseParts(tokens: string[]): { objectPhrase: string; qualifiers: CommandQualifier[] } {
+  const qualifiers: CommandQualifier[] = [];
+  const objectTokens: string[] = [];
+
+  let i = 0;
+  while (i < tokens.length) {
+    const token = tokens[i].toLowerCase();
+
+    if (QUALIFIER_KEYS.has(token)) {
+      const key = token;
+      const valueTokens: string[] = [];
+      i += 1;
+
+      while (i < tokens.length && !QUALIFIER_KEYS.has(tokens[i].toLowerCase())) {
+        valueTokens.push(tokens[i]);
+        i += 1;
+      }
+
+      qualifiers.push({
+        key,
+        value: valueTokens.join(' ').trim(),
+      });
+      continue;
+    }
+
+    objectTokens.push(tokens[i]);
+    i += 1;
+  }
+
+  return {
+    objectPhrase: objectTokens.join(' ').trim(),
+    qualifiers,
+  };
+}
+
+/**
+ * Parse slash commands in Hub Simple home.
+ * Supports:
+ * - /flow create approval for todo
+ * - /agent:users add Sarah as builder in realm ops
+ */
+export function parseSlashCommand(rawInput: string): ParsedCommand {
+  const raw = rawInput.trim();
+
+  if (!raw.startsWith('/')) {
+    throw new Error('Command must start with /.');
+  }
+
+  const withoutSlash = raw.slice(1).trim();
+  const tokens = withoutSlash.split(/\s+/).filter(Boolean);
+
+  if (tokens.length < 2) {
+    throw new Error('Command must include a domain and verb. Example: /flow create approval for todo');
+  }
+
+  const commandHead = tokens[0].toLowerCase();
+  const remainder = tokens.slice(1);
+
+  let routingMode: ParsedCommand['routingMode'] = 'domain';
+  let domainToken = commandHead;
+
+  if (commandHead.startsWith('agent:')) {
+    routingMode = 'explicit-agent';
+    domainToken = commandHead.replace('agent:', '');
+  }
+
+  if (!SUPPORTED_DOMAINS.includes(domainToken as CommandDomain)) {
+    throw new Error(`Unknown domain "${domainToken}". Try one of: ${SUPPORTED_DOMAINS.join(', ')}`);
+  }
+
+  const verb = normalizeVerb(remainder[0]);
+  const { objectPhrase, qualifiers } = parseParts(remainder.slice(1));
+
+  return {
+    raw,
+    routingMode,
+    domain: domainToken as CommandDomain,
+    verb,
+    objectPhrase,
+    qualifiers,
+  };
+}