refactor: merge QuickLaunch into CommandPalette, amber New Session button

- Remove QuickLaunch (lightning bolt) from TopBar — redundant with CommandPalette
- Delete QuickLaunch.tsx (dead code, no remaining imports)
- Add "New Project" to CommandPalette quick actions
- Change sidebar "New Session" button from cyan to amber-400

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/layout/CommandPalette.tsx

@@ -55,6 +55,7 @@ const ADMIN_PAGES: PaletteItem[] = [
 
 const QUICK_ACTIONS: PaletteItem[] = [
   { id: 'action-new-flow', group: 'quick-actions', title: 'Create New Flow', subtitle: 'Start from scratch or use AI', path: '/trees', icon: 'action' },
+  { id: 'action-new-project', group: 'quick-actions', title: 'New Project', subtitle: 'Create a step-by-step project', path: '/flows/new', icon: 'action' },
   { id: 'action-kb', group: 'quick-actions', title: 'Import from KB', subtitle: 'KB Accelerator', path: '/kb-accelerator', icon: 'action' },
   { id: 'action-scripts', group: 'quick-actions', title: 'Open Script Generator', subtitle: 'Generate automation scripts', path: '/scripts', icon: 'action' },
 ]

frontend/src/components/layout/QuickLaunch.tsx

@@ -1,158 +0,0 @@
-import { useState, useEffect, useRef } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { Plus, Play, FileText, Bookmark, Users, X } from 'lucide-react'
-import { treesApi } from '@/api/trees'
-import type { TreeListItem } from '@/types'
-import { getTreeNavigatePath } from '@/lib/routing'
-import { cn } from '@/lib/utils'
-
-interface QuickLaunchProps {
-  open: boolean
-  onClose: () => void
-}
-
-interface QuickAction {
-  id: string
-  icon: typeof Plus
-  label: string
-  description: string
-  path: string
-  color: string
-}
-
-const ACTIONS: QuickAction[] = [
-  { id: 'new-tree', icon: Plus, label: 'New Troubleshooting Flow', description: 'Create a branching decision tree', path: '/trees/new', color: '#3b82f6' },
-  { id: 'new-project', icon: Plus, label: 'New Project', description: 'Create a step-by-step project', path: '/flows/new', color: '#8b5cf6' },
-  { id: 'sessions', icon: Play, label: 'View Sessions', description: 'See active and recent sessions', path: '/sessions', color: '#f59e0b' },
-  { id: 'step-library', icon: Bookmark, label: 'Solutions Library', description: 'Browse team solutions', path: '/step-library', color: '#10b981' },
-  { id: 'exports', icon: FileText, label: 'Exports & Shares', description: 'View shared session exports', path: '/shares', color: '#06b6d4' },
-  { id: 'team', icon: Users, label: 'Team Settings', description: 'Manage team members and roles', path: '/account', color: '#ec4899' },
-]
-
-export function QuickLaunch({ open, onClose }: QuickLaunchProps) {
-  const navigate = useNavigate()
-  const [recentTrees, setRecentTrees] = useState<TreeListItem[]>([])
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  const allItems = [...ACTIONS.map(a => ({ type: 'action' as const, ...a })), ...recentTrees.slice(0, 4).map(t => ({ type: 'tree' as const, ...t }))]
-  const totalItems = allItems.length
-
-  useEffect(() => {
-    if (open) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect
-      setSelectedIndex(0)
-      treesApi.list({ sort_by: 'updated_at' })
-        .then(trees => setRecentTrees(trees.slice(0, 4)))
-        .catch(() => {})
-    }
-  }, [open])
-
-  useEffect(() => {
-    if (!open) return
-    const handler = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose()
-      if (e.key === 'ArrowDown') { e.preventDefault(); setSelectedIndex(i => Math.min(i + 1, totalItems - 1)) }
-      if (e.key === 'ArrowUp') { e.preventDefault(); setSelectedIndex(i => Math.max(i - 1, 0)) }
-      if (e.key === 'Enter') {
-        e.preventDefault()
-        const item = allItems[selectedIndex]
-        if (!item) return
-        onClose()
-        if (item.type === 'action') navigate(item.path)
-        else navigate(getTreeNavigatePath(item.id, item.tree_type))
-      }
-    }
-    document.addEventListener('keydown', handler)
-    return () => document.removeEventListener('keydown', handler)
-  }, [open, selectedIndex, totalItems, allItems, navigate, onClose])
-
-  if (!open) return null
-
-  return (
-    <div className="fixed inset-0 z-100 flex items-start justify-center pt-[15vh]">
-      <div className="absolute inset-0 bg-black/60 backdrop-blur-xs animate-fade-in" onClick={onClose} />
-      <div ref={containerRef} className="relative w-full max-w-md rounded-xl border border-border bg-card shadow-2xl animate-scale-in">
-        <div className="flex items-center justify-between border-b border-border px-4 py-3">
-          <h3 className="text-sm font-heading font-semibold text-foreground">Quick Launch</h3>
-          <button onClick={onClose} className="rounded-lg p-1 text-muted-foreground hover:text-foreground">
-            <X size={16} />
-          </button>
-        </div>
-
-        <div className="max-h-80 overflow-y-auto p-1">
-          {/* Actions */}
-          <p className="px-3 py-1.5 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Actions</p>
-          {ACTIONS.map((action, i) => {
-            const Icon = action.icon
-            return (
-              <button
-                key={action.id}
-                onClick={() => { onClose(); navigate(action.path) }}
-                onMouseEnter={() => setSelectedIndex(i)}
-                className={cn(
-                  'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
-                  i === selectedIndex ? 'bg-accent text-foreground' : 'text-muted-foreground hover:bg-accent/50'
-                )}
-              >
-                <div
-                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
-                  style={{ backgroundColor: `${action.color}15` }}
-                >
-                  <Icon size={16} style={{ color: action.color }} />
-                </div>
-                <div className="min-w-0">
-                  <p className="text-sm font-medium">{action.label}</p>
-                  <p className="text-[0.6875rem] text-muted-foreground">{action.description}</p>
-                </div>
-              </button>
-            )
-          })}
-
-          {/* Recent flows */}
-          {recentTrees.length > 0 && (
-            <>
-              <p className="mt-2 px-3 py-1.5 text-[0.625rem] font-bold uppercase tracking-wider text-muted-foreground">Recent Flows</p>
-              {recentTrees.slice(0, 4).map((tree, ti) => {
-                const idx = ACTIONS.length + ti
-                return (
-                  <button
-                    key={tree.id}
-                    onClick={() => { onClose(); navigate(getTreeNavigatePath(tree.id, tree.tree_type)) }}
-                    onMouseEnter={() => setSelectedIndex(idx)}
-                    className={cn(
-                      'flex w-full items-center gap-3 rounded-lg px-3 py-2.5 text-left transition-colors',
-                      idx === selectedIndex ? 'bg-accent text-foreground' : 'text-muted-foreground hover:bg-accent/50'
-                    )}
-                  >
-                    <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-card border border-border text-base">
-                      {tree.tree_type === 'procedural' ? '📋' : '🔧'}
-                    </div>
-                    <div className="min-w-0">
-                      <p className="text-sm font-medium truncate">{tree.name}</p>
-                      <p className="text-[0.6875rem] text-muted-foreground">
-                        {tree.tree_type === 'procedural' ? 'Project' : 'Troubleshooting'} · {tree.usage_count} uses
-                      </p>
-                    </div>
-                    <Play size={14} className="ml-auto shrink-0 opacity-40" />
-                  </button>
-                )
-              })}
-            </>
-          )}
-        </div>
-
-        <div className="flex items-center gap-4 border-t border-border px-4 py-2">
-          <span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
-            <kbd className="rounded border border-border bg-background px-1 py-px font-mono">↑↓</kbd>
-            Navigate
-          </span>
-          <span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
-            <kbd className="rounded border border-border bg-background px-1 py-px font-mono">↵</kbd>
-            Open
-          </span>
-        </div>
-      </div>
-    </div>
-  )
-}

frontend/src/components/layout/Sidebar.tsx

@@ -367,7 +367,7 @@ export function Sidebar() {
         <div className="px-3 pt-3 pb-1">
           <Link
             to="/"
-            className="flex items-center justify-center gap-2 w-full rounded-lg bg-primary/15 py-2.5 text-sm font-semibold text-primary hover:bg-primary/25 transition-colors"
+            className="flex items-center justify-center gap-2 w-full rounded-lg bg-amber-400/15 py-2.5 text-sm font-semibold text-amber-400 hover:bg-amber-400/25 transition-colors"
           >
             <Plus size={16} strokeWidth={2} />
             New Session
@@ -424,7 +424,7 @@ export function Sidebar() {
         <div className="w-full px-2 pt-4 pb-2">
           <Link
             to="/"
-            className="flex flex-col items-center justify-center w-full rounded-lg bg-primary/15 py-2.5 text-primary hover:bg-primary/25 transition-colors"
+            className="flex flex-col items-center justify-center w-full rounded-lg bg-amber-400/15 py-2.5 text-amber-400 hover:bg-amber-400/25 transition-colors"
             title="New Session"
           >
             <Plus size={20} strokeWidth={2} />

frontend/src/components/layout/TopBar.tsx

@@ -1,11 +1,10 @@
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import { Search, Zap, LogOut, Shield, Settings, HelpCircle } from 'lucide-react'
+import { Search, LogOut, Shield, Settings, HelpCircle } from 'lucide-react'
 import { useAuthStore } from '@/store/authStore'
 import { usePermissions } from '@/hooks/usePermissions'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { CommandPalette } from './CommandPalette'
-import { QuickLaunch } from './QuickLaunch'
 import { NotificationsPanel } from './NotificationsPanel'
 import { cn } from '@/lib/utils'
 
@@ -16,7 +15,7 @@ export function TopBar() {
 
   const [userMenuOpen, setUserMenuOpen] = useState(false)
   const [commandPaletteOpen, setCommandPaletteOpen] = useState(false)
-  const [quickLaunchOpen, setQuickLaunchOpen] = useState(false)
+
   const menuRef = useRef<HTMLDivElement>(null)
 
   const handleLogout = async () => {
@@ -113,13 +112,6 @@ export function TopBar() {
 
         {/* Action buttons */}
         <div className="flex items-center gap-1">
-          <button
-            onClick={() => setQuickLaunchOpen(true)}
-            className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
-            title="Quick Launch"
-          >
-            <Zap size={18} />
-          </button>
           <Link
             to="/guides"
             className="rounded-lg p-2 text-muted-foreground hover:bg-card hover:text-foreground transition-colors"
@@ -192,7 +184,6 @@ export function TopBar() {
 
       {/* Command Palette */}
       <CommandPalette open={commandPaletteOpen} onClose={() => setCommandPaletteOpen(false)} />
-      <QuickLaunch open={quickLaunchOpen} onClose={() => setQuickLaunchOpen(false)} />
     </>
   )
 }