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

// Agent panel — chat is the write-path
function ChatPanel({ onOpenDirectives, offline }) {
  const DS = window.CommiTeaDesignSystem_20e63b;
  const { Icon, IconButton } = DS;
  const d = window.CT_DATA;
  const [msgs, setMsgs] = React.useState(d.chat);
  const [text, setText] = React.useState('');
  const [thinking, setThinking] = React.useState(false);
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    const el = scrollRef.current;
    if (el) el.scrollTop = el.scrollHeight;
  }, [msgs, thinking]);

  const send = () => {
    const t = text.trim();
    if (!t) return;
    setMsgs((m) => [...m, { from: 'user', text: t }]);
    setText('');
    setThinking(true);
    setTimeout(() => {
      setThinking(false);
      setMsgs((m) => [...m, { from: 'agent', text: d.cannedReply }]);
    }, 900);
  };

  return (
    <aside style={{
      width: 330, flexShrink: 0, display: 'flex', flexDirection: 'column',
      background: 'var(--surface-card)', borderLeft: '1px solid var(--line-1)', minHeight: 0,
    }}>
      <header style={{
        display: 'flex', alignItems: 'center', gap: 8, padding: '14px 16px',
        borderBottom: '1px solid var(--line-1)', flexShrink: 0,
      }}>
        <Icon name="sparkles" size={16} style={{ color: offline ? 'var(--ink-3)' : 'var(--jade)' }} />
        <span style={{ font: 'var(--text-body-strong)', color: 'var(--ink-1)' }}>Reginald</span>
        <span style={{ font: '400 11px var(--font-mono)', color: 'var(--ink-3)', marginLeft: 'auto' }}>{offline ? 'offline · queueing' : 'gemma-4b · local'}</span>
        <IconButton icon="history" label="Directive log" size="sm" onClick={onOpenDirectives} />
      </header>

      <div ref={scrollRef} style={{ flex: 1, overflowY: 'auto', padding: 16, display: 'flex', flexDirection: 'column', gap: 12, minHeight: 0 }}>
        {msgs.map((m, i) => m.from === 'agent' ? (
          <div key={i} style={{ font: 'var(--text-agent)', color: 'var(--ink-1)', lineHeight: 1.55 }}>{m.text}</div>
        ) : (
          <div key={i} style={{
            alignSelf: 'flex-end', maxWidth: '85%',
            background: 'var(--paper-2)', borderRadius: '10px 10px 2px 10px',
            padding: '8px 12px', font: 'var(--text-small)', color: 'var(--ink-1)',
          }}>{m.text}</div>
        ))}
        {offline ? (
          <div style={{ font: 'var(--text-agent)', color: 'var(--ink-3)' }}>The model is away from its desk. Reads still work; writes will wait their turn.</div>
        ) : null}
        {thinking ? (
          <div style={{ font: 'var(--text-agent)', color: 'var(--ink-3)' }}>considering…</div>
        ) : null}
      </div>

      <div style={{ padding: 14, borderTop: '1px solid var(--line-1)', flexShrink: 0 }}>
        <div style={{
          display: 'flex', alignItems: 'flex-end', gap: 8,
          background: 'var(--paper-0)', border: '1px solid var(--line-2)',
          borderRadius: 'var(--radius-2)', padding: '8px 8px 8px 12px',
        }}>
          <textarea
            value={text}
            onChange={(e) => setText(e.target.value)}
            onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); } }}
            placeholder={offline ? 'Writes wait for the connection…' : 'Tell me what to do…'}
            disabled={offline}
            rows={1}
            style={{
              flex: 1, resize: 'none', border: 'none', outline: 'none', background: 'transparent',
              font: 'var(--text-body)', color: 'var(--ink-1)', lineHeight: 1.45, maxHeight: 96,
            }}
          ></textarea>
          <button
            type="button"
            onClick={send}
            aria-label="Send"
            disabled={offline}
            style={{
              width: 30, height: 30, borderRadius: 'var(--radius-2)', border: 'none', cursor: offline ? 'not-allowed' : 'pointer',
              background: offline ? 'var(--paper-3)' : 'var(--accent)', color: offline ? 'var(--ink-3)' : 'var(--ink-inverse)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
            }}
          ><Icon name="send" size={14} /></button>
        </div>
        <p style={{ font: 'var(--text-caption)', color: 'var(--ink-3)', margin: '8px 2px 0' }}>
          Chat is the write-path. Destructive changes are proposed, never assumed.
        </p>
      </div>
    </aside>
  );
}
Object.assign(window, { ChatPanel });