bingocode 1.0.3 → 1.0.5

package/desktop/src/pages/SessionControls.tsx

@@ -1,460 +0,0 @@
-import { useState } from 'react'
-import {
-  mockPermissionModes,
-  mockModels,
-  mockEffortLevels,
-  mockSessions,
-  mockStatusBar,
-} from '../mocks/data'
-
-/* ────────────────────────────────────────────────────────────────────
-   Icon helpers for the permission modes (matching HTML prototype exactly)
-   ──────────────────────────────────────────────────────────────────── */
-const permissionIcons: Record<string, { icon: string; color: string; selectedColor?: string }> = {
-  ask:    { icon: 'verified_user', color: 'text-outline' },
-  auto:   { icon: 'bolt',          color: 'text-outline' },
-  plan:   { icon: 'architecture',  color: 'text-tertiary' },
-  bypass: { icon: 'gavel',         color: 'text-error' },
-}
-
-const modelIcons: Record<string, string> = {
-  opus:   'psychology',
-  sonnet: 'smart_toy',
-  haiku:  'auto_awesome',
-}
-
-/* ════════════════════════════════════════════════════════════════════
-   SessionControls  —  full-page component (sidebar + header + chat +
-   two open dropdown panels + composer + footer)
-   ════════════════════════════════════════════════════════════════════ */
-export default function SessionControls() {
-  const [selectedPermission, setSelectedPermission] = useState('ask')
-  const [selectedModel, setSelectedModel] = useState('sonnet')
-  const [selectedEffort, setSelectedEffort] = useState('Medium')
-  const [showPermissions, setShowPermissions] = useState(true)
-  const [showModelConfig, setShowModelConfig] = useState(true)
-
-  const activeModel = mockModels.find((m) => m.id === selectedModel)
-
-  return (
-    <div className="h-screen w-screen bg-background text-on-surface font-body selection:bg-primary-fixed overflow-hidden relative">
-      {/* ─── TopAppBar ─────────────────────────────────────────── */}
-      <header className="bg-[#FAF9F5] font-headline font-semibold tracking-wide text-sm fixed top-0 left-0 right-0 flex justify-between items-center px-6 h-12 z-40">
-        <div className="flex items-center gap-6">
-          <span className="text-sm font-bold text-[#1B1C1A] uppercase tracking-tighter">
-            Claude Code Companion
-          </span>
-          <nav className="hidden md:flex gap-4">
-            <a className="text-[#1B1C1A] border-b-2 border-[#8F482F] pb-1 cursor-pointer active:opacity-70">
-              Code
-            </a>
-            <a className="text-[#87736D] hover:text-[#8F482F] transition-colors cursor-pointer active:opacity-70">
-              Terminal
-            </a>
-            <a className="text-[#87736D] hover:text-[#8F482F] transition-colors cursor-pointer active:opacity-70">
-              History
-            </a>
-          </nav>
-        </div>
-        <div className="flex items-center gap-3">
-          <span className="material-symbols-outlined text-[#87736D] cursor-pointer">
-            arrow_back_ios
-          </span>
-          <span className="material-symbols-outlined text-[#87736D] cursor-pointer">
-            arrow_forward_ios
-          </span>
-          <button className="ml-2 px-3 py-1 bg-surface-container-high rounded text-[#8F482F] hover:bg-surface-container-highest transition-colors">
-            Settings
-          </button>
-        </div>
-      </header>
-
-      {/* Separator line */}
-      <div className="bg-[#F4F4F0] h-[1px] w-full fixed top-12 z-40" />
-
-      {/* ─── SideNavBar ────────────────────────────────────────── */}
-      <aside className="bg-[#F4F4F0] font-body text-sm font-medium fixed left-0 top-0 h-full w-[280px] hidden md:flex flex-col p-4 gap-2 pt-16 z-30">
-        {/* Project header */}
-        <div className="px-2 mb-4">
-          <div className="flex items-center gap-3 mb-1">
-            <img
-              className="w-8 h-8 rounded-full"
-              src="https://lh3.googleusercontent.com/aida-public/AB6AXuCjFls9oDx5jX7Zv8P7BA9QbodBzvDJFhVNIiVjAhp_OhnXT6lmE-uYCDDZvNS4kWHssfxAYuiH05KsXLBWgLd4K-8prrjodVjSsKAG1LhvKWN90nyVzDBSrreWkpW7reNC1N_T4J_Pdr9mgAYVwYRS10nvUMZs_ajpTg2CoTtMkQRRGZGZXLk_gU94EoaeDEPNbvwaxOeeTeGgOxwnzcPIUn6EFzqc5Bjug00IDIrhRYiuwEaGNkTuz39mNFxJl2bKiHES5HxUM60"
-              alt="project avatar"
-            />
-            <div>
-              <h3 className="text-on-surface font-bold leading-none">All projects</h3>
-              <p className="text-[10px] text-outline uppercase tracking-widest mt-1">
-                Active Session
-              </p>
-            </div>
-          </div>
-        </div>
-
-        {/* Nav items */}
-        <button className="w-full text-left p-2.5 bg-[#FAF9F5] text-[#1B1C1A] rounded-lg relative before:content-[''] before:absolute before:left-[-8px] before:w-1 before:h-4 before:bg-[#8F482F] before:rounded-full before:top-1/2 before:-translate-y-1/2 transition-all duration-200 ease-in-out flex items-center gap-3">
-          <span className="material-symbols-outlined text-[#8F482F]">add</span>
-          <span>New session</span>
-        </button>
-        <button className="w-full text-left p-2.5 text-[#87736D] hover:bg-[#EBEBE6] rounded-lg transition-all duration-200 ease-in-out flex items-center gap-3">
-          <span className="material-symbols-outlined">calendar_today</span>
-          <span>Scheduled</span>
-        </button>
-        <button className="w-full text-left p-2.5 text-[#87736D] hover:bg-[#EBEBE6] rounded-lg transition-all duration-200 ease-in-out flex items-center gap-3" data-count={mockSessions.today.length}>
-          <span className="material-symbols-outlined">history</span>
-          <span>Today</span>
-        </button>
-        <button className="w-full text-left p-2.5 text-[#87736D] hover:bg-[#EBEBE6] rounded-lg transition-all duration-200 ease-in-out flex items-center gap-3" data-count={mockSessions.previous7Days.length}>
-          <span className="material-symbols-outlined">event_note</span>
-          <span>Previous 7 Days</span>
-        </button>
-        <button className="w-full text-left p-2.5 text-[#87736D] hover:bg-[#EBEBE6] rounded-lg transition-all duration-200 ease-in-out flex items-center gap-3" data-count={mockSessions.older.length}>
-          <span className="material-symbols-outlined">archive</span>
-          <span>Older</span>
-        </button>
-
-        {/* Bottom modes */}
-        <div className="mt-auto pt-4 border-t border-outline/10 flex flex-col gap-1">
-          <button className="flex items-center gap-3 p-2 text-outline hover:text-primary transition-colors">
-            <span className="material-symbols-outlined text-xs">computer</span>
-            <span className="text-xs">Local Mode</span>
-          </button>
-          <button className="flex items-center gap-3 p-2 text-outline hover:text-primary transition-colors">
-            <span className="material-symbols-outlined text-xs">cloud</span>
-            <span className="text-xs">Remote Mode</span>
-          </button>
-        </div>
-      </aside>
-
-      {/* ─── Main Content Area (blurred / dimmed behind overlays) ── */}
-      <main className="md:ml-[280px] pt-12 pb-8 min-h-screen blur-[2px] opacity-60">
-        <div className="max-w-4xl mx-auto px-8 py-12">
-          <div className="grid grid-cols-12 gap-6">
-            {/* Main Thread */}
-            <div className="col-span-8 space-y-8">
-              {/* AI message */}
-              <div className="bg-surface-container-low rounded-xl p-6">
-                <div className="flex items-center gap-3 mb-4">
-                  <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-on-primary font-bold text-xs">
-                    AI
-                  </div>
-                  <span className="font-semibold text-sm">Claude 4.6 Sonnet</span>
-                </div>
-                <p className="text-on-surface-variant leading-relaxed">
-                  I've analyzed the{' '}
-                  <code className="bg-surface-dim px-1.5 py-0.5 rounded font-mono text-sm">
-                    auth_provider.go
-                  </code>{' '}
-                  file. The race condition occurs during the token refresh cycle. I recommend
-                  wrapping the session update in a mutex lock.
-                </p>
-              </div>
-
-              {/* User message */}
-              <div className="flex justify-end">
-                <div className="bg-surface-container-highest rounded-xl p-6 max-w-[80%]">
-                  <p className="text-on-surface leading-relaxed">
-                    Can you implement that? Also check if this affects the WebSocket connection
-                    longevity.
-                  </p>
-                </div>
-              </div>
-
-              {/* Code Block Preview */}
-              <div className="bg-surface-dim rounded-lg overflow-hidden font-mono text-sm">
-                <div className="bg-surface-container-high px-4 py-2 flex justify-between items-center">
-                  <span className="text-xs text-on-surface-variant">
-                    internal/auth/provider.go
-                  </span>
-                  <span className="material-symbols-outlined text-sm text-outline cursor-pointer">
-                    content_copy
-                  </span>
-                </div>
-                <pre className="p-4 text-on-surface">
-                  <code>{`func (p *Provider) RefreshToken(ctx context.Context) error {
-    p.mu.Lock()
-    defer p.mu.Unlock()
-
-    // logic to refresh token...
-    return nil
-}`}</code>
-                </pre>
-              </div>
-            </div>
-
-            {/* Session Meta */}
-            <div className="col-span-4 space-y-6">
-              <div className="bg-surface-container-lowest border border-outline-variant/20 rounded-xl p-4">
-                <h4 className="text-xs font-bold uppercase tracking-widest text-outline mb-4">
-                  Context Files
-                </h4>
-                <ul className="space-y-3">
-                  <li className="flex items-center gap-2 text-sm text-on-surface-variant">
-                    <span className="material-symbols-outlined text-sm">description</span>
-                    auth_provider.go
-                  </li>
-                  <li className="flex items-center gap-2 text-sm text-on-surface-variant">
-                    <span className="material-symbols-outlined text-sm">description</span>
-                    main.go
-                  </li>
-                  <li className="flex items-center gap-2 text-sm text-on-surface-variant">
-                    <span className="material-symbols-outlined text-sm">description</span>
-                    session_test.go
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-
-      {/* ─── Overlay Layer (Active Selectors) ──────────────────── */}
-      <div className="fixed inset-0 z-50 flex flex-col justify-end items-center pointer-events-none p-8">
-        {/* Floating Dropdown Overlay Container */}
-        <div className="w-full max-w-2xl flex gap-4 mb-4 pointer-events-auto items-end">
-          {/* ── Permissions Dropdown ─────────────────────────────── */}
-          {showPermissions && (
-            <div
-              className="w-80 rounded-xl border border-[#E8E6DC] overflow-hidden flex flex-col"
-              style={{
-                background: 'rgba(255, 255, 255, 0.85)',
-                backdropFilter: 'blur(20px)',
-                boxShadow:
-                  '0 4px 20px rgba(27, 28, 26, 0.04), 0 12px 40px rgba(27, 28, 26, 0.08)',
-              }}
-            >
-              <div className="px-4 py-3 bg-surface-container-low border-b border-[#E8E6DC]">
-                <span className="text-[10px] font-bold uppercase tracking-widest text-outline">
-                  Execution Permissions
-                </span>
-              </div>
-              <div className="p-2 space-y-1">
-                {mockPermissionModes.map((mode) => {
-                  const meta = permissionIcons[mode.id] || {
-                    icon: mode.icon,
-                    color: 'text-outline',
-                  }
-                  const isSelected = selectedPermission === mode.id
-                  const isPlan = mode.id === 'plan'
-                  const isBypass = mode.id === 'bypass'
-
-                  let hoverClass = 'hover:bg-surface-container-high'
-                  if (isPlan) hoverClass = 'hover:bg-tertiary-container/10'
-                  if (isBypass) hoverClass = 'hover:bg-error-container/20'
-
-                  let labelColor = ''
-                  if (isPlan) labelColor = 'text-tertiary'
-                  if (isBypass) labelColor = 'text-error'
-
-                  return (
-                    <button
-                      key={mode.id}
-                      onClick={() => setSelectedPermission(mode.id)}
-                      className={`w-full text-left p-3 rounded-lg ${hoverClass} transition-colors flex gap-3 group`}
-                    >
-                      <span
-                        className={`material-symbols-outlined ${meta.color} mt-0.5`}
-                      >
-                        {meta.icon}
-                      </span>
-                      <div className="flex-1">
-                        <div className="flex items-center justify-between">
-                          <span className={`text-sm font-semibold ${labelColor}`}>
-                            {mode.label}
-                          </span>
-                          {isSelected && (
-                            <span className="material-symbols-outlined text-primary text-sm">
-                              check_circle
-                            </span>
-                          )}
-                        </div>
-                        <p className="text-xs text-on-surface-variant">{mode.description}</p>
-                      </div>
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-          )}
-
-          {/* ── Model & Effort Dropdown ─────────────────────────── */}
-          {showModelConfig && (
-            <div
-              className="w-64 rounded-xl border border-[#E8E6DC] overflow-hidden flex flex-col"
-              style={{
-                background: 'rgba(255, 255, 255, 0.85)',
-                backdropFilter: 'blur(20px)',
-                boxShadow:
-                  '0 4px 20px rgba(27, 28, 26, 0.04), 0 12px 40px rgba(27, 28, 26, 0.08)',
-              }}
-            >
-              <div className="px-4 py-3 bg-surface-container-low border-b border-[#E8E6DC]">
-                <span className="text-[10px] font-bold uppercase tracking-widest text-outline">
-                  Model Configuration
-                </span>
-              </div>
-
-              {/* Models */}
-              <div className="p-2">
-                {mockModels.map((model) => {
-                  const isActive = selectedModel === model.id
-                  const icon = modelIcons[model.id] || 'smart_toy'
-
-                  return (
-                    <button
-                      key={model.id}
-                      onClick={() => setSelectedModel(model.id)}
-                      className={`w-full text-left p-2.5 rounded-lg flex items-center justify-between transition-colors ${
-                        isActive
-                          ? 'bg-primary/5 text-primary'
-                          : 'hover:bg-surface-container-high'
-                      }`}
-                    >
-                      <div
-                        className={`flex items-center gap-2 ${
-                          isActive ? 'font-semibold' : ''
-                        }`}
-                      >
-                        <span
-                          className={`material-symbols-outlined text-sm ${
-                            isActive ? '' : 'text-outline'
-                          }`}
-                        >
-                          {icon}
-                        </span>
-                        <span className="text-sm">{model.name}</span>
-                      </div>
-                      {isActive && (
-                        <span className="material-symbols-outlined text-sm">
-                          radio_button_checked
-                        </span>
-                      )}
-                    </button>
-                  )
-                })}
-              </div>
-
-              {/* Divider */}
-              <div className="mx-4 h-[1px] bg-[#E8E6DC]" />
-
-              {/* Effort levels */}
-              <div className="p-2">
-                <div className="px-2 mb-2">
-                  <span className="text-[9px] font-bold text-outline uppercase tracking-tighter">
-                    Thinking Effort
-                  </span>
-                </div>
-                <div className="grid grid-cols-2 gap-1">
-                  {mockEffortLevels.map((level) => {
-                    const isActive = selectedEffort === level
-                    /* The HTML uses "Med" for the label display of "Medium" */
-                    const displayLabel =
-                      level === 'Medium' ? 'Med' : level
-
-                    return (
-                      <button
-                        key={level}
-                        onClick={() => setSelectedEffort(level)}
-                        className={`text-xs py-2 px-3 rounded-md transition-all ${
-                          isActive
-                            ? 'bg-primary text-on-primary'
-                            : 'border border-outline-variant/30 hover:border-primary'
-                        } ${level === 'Max' ? 'font-bold' : ''}`}
-                      >
-                        {displayLabel}
-                      </button>
-                    )
-                  })}
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* ── The Composer (Anchor) ─────────────────────────────── */}
-        <div
-          className="w-full max-w-2xl p-4 rounded-xl border border-outline-variant/15 pointer-events-auto flex flex-col gap-3"
-          style={{
-            background: 'rgba(255, 255, 255, 0.85)',
-            backdropFilter: 'blur(20px)',
-            boxShadow:
-              '0 4px 20px rgba(27, 28, 26, 0.04), 0 12px 40px rgba(27, 28, 26, 0.08)',
-          }}
-        >
-          <textarea
-            className="w-full bg-transparent border-none focus:ring-0 focus:outline-none resize-none font-body text-on-surface placeholder:text-outline"
-            placeholder="Reply to Claude..."
-            rows={2}
-          />
-          <div className="flex justify-between items-center">
-            <div className="flex items-center gap-2">
-              {/* Permission pill */}
-              <button
-                onClick={() => setShowPermissions((v) => !v)}
-                className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-surface-container-low border border-[#E8E6DC] text-xs font-medium hover:bg-surface-container-high transition-all"
-              >
-                <span className="material-symbols-outlined text-base">
-                  {permissionIcons[selectedPermission]?.icon || 'verified_user'}
-                </span>
-                {mockPermissionModes.find((m) => m.id === selectedPermission)?.label ||
-                  'Ask permissions'}
-              </button>
-
-              {/* Model pill */}
-              <button
-                onClick={() => setShowModelConfig((v) => !v)}
-                className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-surface-container-low border border-[#E8E6DC] text-xs font-medium hover:bg-surface-container-high transition-all"
-              >
-                <span className="material-symbols-outlined text-base">
-                  {modelIcons[selectedModel] || 'smart_toy'}
-                </span>
-                {activeModel?.name || 'Sonnet 4.6'}
-              </button>
-
-              {/* Attach file button */}
-              <button className="p-1.5 rounded-lg text-outline hover:bg-surface-container-low transition-colors">
-                <span className="material-symbols-outlined">attach_file</span>
-              </button>
-            </div>
-
-            {/* Run button */}
-            <button className="bg-primary text-on-primary px-4 py-1.5 rounded-lg font-semibold text-sm flex items-center gap-2 hover:opacity-90 transition-opacity">
-              Run
-              <span className="material-symbols-outlined text-base">send</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* ─── Footer / Status Bar ───────────────────────────────── */}
-      <footer className="bg-[#FAF9F5] font-body text-xs tracking-tight fixed bottom-0 left-0 w-full h-8 border-t border-[#87736D]/20 flex items-center justify-between px-4 z-[60]">
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-1.5">
-            <div className="w-4 h-4 rounded-full bg-primary-fixed flex items-center justify-center">
-              <span
-                className="material-symbols-outlined text-[10px] text-on-primary-fixed"
-                style={{ fontVariationSettings: "'FILL' 1" }}
-              >
-                person
-              </span>
-            </div>
-            <span className="text-outline">
-              {mockStatusBar.user} &bull; {mockStatusBar.username} &bull; {mockStatusBar.plan}
-            </span>
-          </div>
-        </div>
-        <div className="flex items-center gap-4">
-          <button className="text-primary font-bold hover:bg-[#F4F4F0] transition-colors px-2 py-0.5 rounded">
-            {mockStatusBar.branch}
-          </button>
-          <button className="text-[#87736D] hover:bg-[#F4F4F0] transition-colors px-2 py-0.5 rounded">
-            {mockStatusBar.worktreeToggle}
-          </button>
-          <button className="text-[#87736D] hover:bg-[#F4F4F0] transition-colors px-2 py-0.5 rounded">
-            {mockStatusBar.localSwitch}
-          </button>
-        </div>
-      </footer>
-    </div>
-  )
-}