commitea/docs/design/ui_kits/app/Shell.js.txt

// App shell — left rail + content + agent panel, issue page, theme toggle
function Shell() {
  const DS = window.CommiTeaDesignSystem_20e63b;
  const { Icon, Switch } = DS;
  const [view, setView] = React.useState('focus');
  const [prevView, setPrevView] = React.useState('focus');
  const [dark, setDark] = React.useState(false);
  const [issue, setIssue] = React.useState(null);
  const [offline, setOffline] = React.useState(false);
  const [readIds, setReadIds] = React.useState([]);
  const inboxUnread = window.CT_DATA.inbox.filter((n) => n.unread && !readIds.includes(n.id)).length;

  const openIssue = (i) => {
    setIssue(i);
    if (view !== 'issue') setPrevView(view);
    setView('issue');
  };

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
  }, [dark]);

  if (view === 'firstrun') {
    return <window.OnboardingScreen onDone={(dest) => setView(dest)} />;
  }

  const NAV = [
    { id: 'standup', label: 'Standup', icon: 'sun' },
    { id: 'focus', label: 'Morning service', icon: 'coffee' },
    { id: 'inbox', label: 'Inbox', icon: 'bell', count: inboxUnread || null },
    { id: 'capture', label: 'Capture', icon: 'plus' },
    { id: 'board', label: 'The pot', icon: 'square-kanban' },
    { id: 'runway', label: 'Runway', icon: 'chart-line' },
    { id: 'directives', label: 'Directives', icon: 'flag' },
  ];

  const NavItem = ({ item }) => {
    const active = view === item.id || (view === 'issue' && prevView === item.id) || ((view === 'calibration' || view === 'milestone') && item.id === 'runway');
    return (
      <button
        type="button"
        onClick={() => setView(item.id)}
        style={{
          display: 'flex', alignItems: 'center', gap: 10, width: '100%',
          font: `${active ? 600 : 500} 13.5px/1 var(--font-sans)`,
          color: active ? 'var(--ink-1)' : 'var(--ink-2)',
          background: active ? 'var(--paper-2)' : 'transparent',
          border: 'none', borderRadius: 'var(--radius-2)',
          padding: '9px 12px', cursor: 'pointer', textAlign: 'left',
          transition: 'background var(--duration-fast) var(--ease-out)',
        }}
      >
        <Icon name={item.icon} size={16} style={{ color: active ? 'var(--accent-text)' : 'var(--ink-3)' }} />
        {item.label}
        {item.count ? <span style={{ marginLeft: 'auto', font: '500 10.5px/16px var(--font-mono)', color: 'var(--accent-text)', background: 'var(--spruce-2)', borderRadius: 'var(--radius-round)', padding: '0 6px' }}>{item.count}</span> : null}
      </button>
    );
  };

  return (
    <div style={{ display: 'flex', height: '100vh', minWidth: 1280, background: 'var(--surface-app)', overflow: 'hidden' }} data-screen-label={`app-${view}`}>
      {/* left rail */}
      <nav style={{
        width: 208, flexShrink: 0, display: 'flex', flexDirection: 'column', gap: 4,
        padding: '18px 12px 14px', borderRight: '1px solid var(--line-1)',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '0 12px 16px' }}>
          <img src="../../assets/logo-icon.png" width="24" height="24" alt="" style={{ borderRadius: 6, display: 'block' }} />
          <span style={{ font: '400 21px/1 var(--font-serif-display)', color: 'var(--ink-1)' }}>
            Commi<span style={{ color: 'var(--accent-text)' }}>Tea</span>
          </span>
        </div>
        {NAV.map((n) => <NavItem key={n.id} item={n} />)}
        <div style={{ borderTop: '1px solid var(--line-1)', margin: '10px 8px' }}></div>
        <NavItem item={{ id: 'settings', label: 'Settings', icon: 'settings-2' }} />
        <NavItem item={{ id: 'firstrun', label: 'First run', icon: 'play' }} />
        <NavItem item={{ id: 'states', label: 'States', icon: 'circle-dashed' }} />
        <div style={{ marginTop: 'auto', padding: '0 12px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          <button type="button" onClick={() => setOffline(!offline)} title="Toggle the connection (demo)" style={{
            font: '400 11px var(--font-mono)', color: 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 6,
            background: 'none', border: 'none', padding: 0, cursor: 'pointer', textAlign: 'left',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: offline ? 'var(--danger)' : 'var(--ok)', display: 'inline-block' }}></span>
            gitea.stephenmann.io
          </button>
          <Switch label={<span style={{ font: 'var(--text-caption)' }}>Evening service</span>} checked={dark} onChange={(e) => setDark(e.target.checked)} />
        </div>
      </nav>

      {/* main */}
      <main style={{ flex: 1, minWidth: 0, overflowY: 'auto', padding: '24px 28px' }}>
        <div style={{ maxWidth: 1120, margin: '0 auto', height: view === 'board' ? '100%' : 'auto', display: 'flex', flexDirection: 'column', gap: 14 }}>
          {offline ? <window.OfflineBanner /> : null}
          {view === 'focus' ? <window.FocusScreen onOpenIssue={openIssue} /> : null}
          {view === 'board' ? <window.BoardScreen onOpenIssue={openIssue} /> : null}
          {view === 'runway' ? <window.RunwayScreen onOpenCalibration={() => setView('calibration')} onOpenMilestone={() => setView('milestone')} /> : null}
          {view === 'capture' ? <window.CaptureScreen onDone={() => setView('focus')} /> : null}
          {view === 'standup' ? <window.StandupScreen onBegin={() => setView('focus')} onOpenIssue={openIssue} /> : null}
          {view === 'settings' ? <window.SettingsScreen dark={dark} setDark={setDark} /> : null}
          {view === 'directives' ? <window.DirectivesScreen /> : null}
          {view === 'issue' && issue ? <window.IssueScreen issue={issue} onBack={() => setView(prevView)} onOpenIssue={openIssue} /> : null}
          {view === 'calibration' ? <window.CalibrationScreen onBack={() => setView('runway')} /> : null}
          {view === 'milestone' ? <window.MilestoneScreen onBack={() => setView('runway')} onOpenIssue={openIssue} /> : null}
          {view === 'states' ? <window.StatesScreen onCapture={() => setView('capture')} /> : null}
          {view === 'inbox' ? <window.InboxScreen onOpenIssue={openIssue} onOpenDirectives={() => setView('directives')} readIds={readIds} setReadIds={setReadIds} /> : null}
        </div>
      </main>

      <window.ChatPanel onOpenDirectives={() => setView('directives')} offline={offline} />
    </div>
  );
}
Object.assign(window, { Shell });