{/* Top bar — back link + breadcrumb */}

{briefing.id}

{/* Header — title, status, owner, actions */}

{briefing.title}

Created {relTime(briefing.created_at)} · Updated {relTime(briefing.updated_at)}

Owner patchBriefing(briefing.id, { owner: v })} />

setShowRejectModal(true)} />

{/* Tabs */}

{tabs.map(([id, label]) => ( ))}

{/* Body — full bleed */}

{tab === 'intake' && ( loadBriefing && loadBriefing(briefing.id)} /> )} {tab === 'brief' && (

)} {tab === 'cd_brief' && (

)} {tab === 'comments' && (

commentOnBriefing(briefing.id, body)} />

)} {tab === 'activity' && (

)}

{/* Reject modal */} {showRejectModal && ( setShowRejectModal(false)} onConfirm={async (reason) => { setShowRejectModal(false); await handleTransition('rejected', reason); }} /> )}

); } // Wrapper that resolves the briefing record from the store before rendering // the page. Keeps the app's route dispatcher trivial. function BriefingDetailRoute() { const { route, briefingsById } = useStore(); const briefing = briefingsById[route.briefingId]; if (!briefing) { return (

Loading briefing…

); } return ; } function OwnerInput({ value, onSubmit }) { const [editing, setEditing] = useState(false); const [draft, setDraft] = useState(value); React.useEffect(() => { setDraft(value); }, [value]); if (!editing) { return ( ); } return ( setDraft(e.target.value)} onBlur={() => { setEditing(false); if (draft !== value) onSubmit(draft); }} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); e.target.blur(); } if (e.key === 'Escape') { setDraft(value); setEditing(false); } }} style={{ padding: '4px 8px', borderRadius: 6, border: '1px solid var(--ink)', background: 'var(--bg)', color: 'var(--ink)', fontSize: 12, fontFamily: 'inherit', outline: 'none', minWidth: 200, }} /> ); } function ActionButtons({ briefing, busy, onTransition, onReject }) { const buttons = []; switch (briefing.status) { case 'draft': buttons.push({ label: 'Submit for creative review', to: 'in_creative_review', primary: true }); buttons.push({ label: 'Archive', to: 'archived' }); break; case 'in_creative_review': buttons.push({ label: 'Approve creative · pass to business', to: 'in_business_review', primary: true }); buttons.push({ label: 'Reject', onClick: onReject, danger: true }); break; case 'in_business_review': buttons.push({ label: 'Approve business · final approval', to: 'approved', primary: true }); buttons.push({ label: 'Reject', onClick: onReject, danger: true }); break; case 'approved': buttons.push({ label: 'Archive', to: 'archived' }); break; case 'rejected': buttons.push({ label: 'Reopen as draft', to: 'draft' }); buttons.push({ label: 'Archive', to: 'archived' }); break; case 'archived': // Terminal — no actions break; } if (!buttons.length) return null; return (

{buttons.map((b, i) => ( ))}

); } function RejectModal({ onCancel, onConfirm }) { const [reason, setReason] = useState(''); return ( <>

Reject briefing

Add a short reason. The briefing can be reopened as draft.

setReason(e.target.value)}
          placeholder="What's wrong with this brief?"
          rows={4}
          style={{
            padding: '8px 12px', borderRadius: 8,
            border: '1px solid var(--line)',
            fontFamily: 'inherit', fontSize: 13,
            resize: 'vertical', outline: 'none',
          }}
        />
        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
          <button
            type="button"
            onClick={onCancel}
            className="btn-reset"
            style={{
              padding: '7px 14px', borderRadius: 8,
              border: '1px solid var(--line)',
              background: 'var(--card-solid)', color: 'var(--ink)',
              fontSize: 12, cursor: 'pointer',
            }}
          >Cancel</button>
          <button
            type="button"
            onClick={() => onConfirm(reason)}
            disabled={!reason.trim()}
            className="btn-reset"
            style={{
              padding: '7px 14px', borderRadius: 8,
              border: '1px solid #e08a8a',
              background: reason.trim() ? '#fdecec' : 'var(--bg-2)',
              color: '#a72020',
              fontSize: 12, cursor: reason.trim() ? 'pointer' : 'default',
              opacity: reason.trim() ? 1 : 0.6,
            }}
          >Reject</button>
        </div>
      </div>
    </>
  );
}

// ─── Tab content ─────────────────────────────────────────────────────────

function BriefTab({ brief }) {
  if (!brief) return <Empty text="No marketing brief captured yet." />;
  // Reuse the existing BriefCard component.
  return <BriefCard brief={brief} onOpen={() => {}} />;
}

function CDBriefTab({ brief }) {
  if (!brief) return <Empty text="No creative-direction brief captured yet." />;
  return <CDBriefCard brief={brief} />;
}

function CommentsTab({ briefing, onSubmit }) {
  const [body, setBody] = useState('');
  const [busy, setBusy] = useState(false);

const submit = async () => {
    if (!body.trim() || busy) return;
    setBusy(true);
    try {
      await onSubmit(body);
      setBody('');
    } finally { setBusy(false); }
  };

const comments = briefing.comments || [];

return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div>
        <textarea
          value={body}
          onChange={(e) => setBody(e.target.value)}
          placeholder="Leave a comment…"
          rows={3}
          style={{
            width: '100%', padding: '10px 12px', borderRadius: 8,
            border: '1px solid var(--line)', background: 'var(--card-solid)',
            fontFamily: 'inherit', fontSize: 13,
            resize: 'vertical', outline: 'none', boxSizing: 'border-box',
          }}
        />
        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 8 }}>
          <button
            type="button"
            onClick={submit}
            disabled={!body.trim() || busy}
            className="btn-reset"
            style={{
              padding: '7px 14px', borderRadius: 8,
              border: '1px solid var(--moss-deep)',
              background: body.trim() ? 'var(--moss-deep)' : 'var(--bg-2)',
              color: body.trim() ? 'var(--bg)' : 'var(--ink-mute)',
              fontSize: 12, cursor: body.trim() && !busy ? 'pointer' : 'default',
              opacity: busy ? 0.6 : 1,
            }}
          >{busy ? 'Posting…' : 'Post comment'}</button>
        </div>
      </div>
      {comments.length === 0 ? (
        <div style={{ fontSize: 12, color: 'var(--ink-mute)', fontStyle: 'italic' }}>
          No comments yet.
        </div>
      ) : (
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {comments.slice().reverse().map(c => (
            <div key={c.id} style={{
              padding: 12, borderRadius: 8,
              background: 'var(--bg-2)', border: '1px solid var(--line-soft)',
            }}>
              <div style={{
                display: 'flex', gap: 8, alignItems: 'baseline',
                fontSize: 11, marginBottom: 4,
              }}>
                <span style={{ fontWeight: 500, color: 'var(--ink)' }}>{c.author}</span>
                <span style={{ color: 'var(--ink-mute)', fontFamily: 'var(--font-mono)', fontSize: 10 }}>
                  {relTime(c.created_at)}
                </span>
              </div>
              <div style={{ fontSize: 13, lineHeight: 1.5, color: 'var(--ink)', whiteSpace: 'pre-wrap' }}>
                {c.body}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function ActivityTab({ events }) {
  if (!events.length) return <Empty text="No activity yet." />;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      {events.slice().reverse().map((e, i) => (
        <div key={i} style={{
          padding: '8px 12px', borderRadius: 6,
          background: 'var(--card-solid)', border: '1px solid var(--line-soft)',
          fontSize: 12, lineHeight: 1.5,
        }}>
          <div style={{
            display: 'flex', gap: 8, fontFamily: 'var(--font-mono)',
            fontSize: 9, letterSpacing: '.06em', color: 'var(--ink-mute)',
            textTransform: 'uppercase',
          }}>
            <span>{e.kind.replace(/_/g, ' ')}</span>
            <span style={{ flex: 1 }} />
            <span>{relTime(e.at)} · {e.actor}</span>
          </div>
          {e.detail && Object.keys(e.detail).length > 0 && (
            <div style={{ marginTop: 4, color: 'var(--ink-soft)' }}>
              {Object.entries(e.detail).map(([k, v]) => `${k}: ${v}`).join(' · ')}
            </div>
          )}
        </div>
      ))}
    </div>
  );
}

function Empty({ text }) {
  return (
    <div style={{
      padding: '40px 0', textAlign: 'center',
      color: 'var(--ink-mute)', fontSize: 13, fontStyle: 'italic',
    }}>{text}</div>
  );
}

// ─── IntakePane (full-page CD chat) ─────────────────────────────────────
//
// Lives inside BriefingDetailPage when status is `draft` and no marketing
// brief has landed yet. Owns its own streaming state — calls
// api.chat({threadId, userText, onEvent}) and accumulates text + activity
// locally so we don't have to navigate to /t/<id>. When the backend
// emits `briefing_record` (or any artifact that fills the brief), we
// trigger a re-fetch of the briefing record so the parent page flips
// to the review tabs.
//
// Why local (not store) streaming state: the store's streaming slot is
// keyed to route.threadId, but the intake runs while the route is on
// /briefings/<id>. Keeping it local avoids tangling the two flows.

function IntakePane({ threadId, briefingId, onBriefingUpdated }) {
  const { loadBriefings } = useStore();

const [input, setInput] = useState('');
  const [streaming, setStreaming] = useState(false);
  const [partial, setPartial] = useState('');
  const [history, setHistory] = useState([]);   // [{role:'user'|'assistant', text}]
  const [activity, setActivity] = useState([]); // structured cards (pickers, brief, etc.)
  const [todos, setTodos] = useState([]);
  const scrollRef = React.useRef(null);

// Load the thread's persisted messages so the whole conversation —
  // prose AND the agent activity trail (tool calls, pickers, todos) —
  // survives page reloads. `api.appendMessage` already stores
  // {activity, todos, steps, plan} alongside each assistant message
  // (see api.js:535), so the rehydrate just keeps those fields.
  useEffect(() => {
    if (!threadId) return;
    let cancelled = false;
    setInput('');
    setStreaming(false);
    setPartial('');
    setActivity([]);
    setTodos([]);
    (async () => {
      try {
        const msgs = await api.listMessages(threadId);
        if (cancelled) return;
        const restored = (msgs || [])
          .filter(m => m.role === 'user' || m.role === 'assistant')
          .map(m => {
            const text = typeof m.content === 'string'
              ? m.content
              : (m.content?.[0]?.text || '');
            return {
              role: m.role,
              text,
              // Carry the agent receipts forward so the historical turn
              // renders with the same trail it had when it streamed.
              activity: Array.isArray(m.activity) ? m.activity : [],
              todos: Array.isArray(m.todos) ? m.todos : [],
            };
          });
        setHistory(restored);
      } catch (e) {
        console.error('[intake] failed to load history', e);
        setHistory([]);
      }
    })();
    return () => { cancelled = true; };
  }, [threadId]);

// Keep the conversation pinned to the bottom as text streams in.
  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [partial, history.length, activity.length, todos.length]);

const send = async () => {
    const text = input.trim();
    if (!text || streaming || !threadId) return;
    setInput('');
    setHistory(h => [...h, { role: 'user', text }]);
    setStreaming(true);
    setPartial('');

try {
      // Persist the user turn — api.chat reads prior history from
      // localStorage to build the SSE request body, and the IntakePane
      // mount-effect re-hydrates from this same store on next visit.
      await api.appendMessage(threadId, { role: 'user', content: text });

await api.chat({
        threadId,
        userText: text,
        attachments: [],
        onEvent: (ev) => {
          if (ev.type === 'content.delta') {
            setPartial(ev.text);
          } else if (ev.type === 'todos') {
            setTodos(ev.todos || []);
          } else if (ev.type === 'activity') {
            // Capture every activity entry — tools, subagents, and
            // artifacts (pickers, briefs). The ActivityTrail component
            // renders them with full transparency: tool name, args,
            // result preview, subagent boundaries.
            if (ev.entry) setActivity(a => [...a, ev.entry]);
          } else if (ev.type === 'activity.update') {
            // Hydrates a tool entry with its result body once the
            // backend emits tool.result. Patch in place by tool_use_id.
            setActivity(a => a.map(e =>
              (e.tool_use_id && ev.entry && e.tool_use_id === ev.entry.tool_use_id)
                ? ev.entry
                : e
            ));
          } else if (ev.type === 'briefing_record' || ev.type === 'briefing.record') {
            // The backend either created or updated a record. Either way
            // pull a fresh copy so the parent page can flip from intake
            // to review tabs.
            onBriefingUpdated && onBriefingUpdated();
          }
        },
      });
    } catch (err) {
      console.error('[briefing-intake] stream failed', err);
      setActivity(a => [...a, { kind: 'error', text: String(err.message || err) }]);
    } finally {
      // Commit the assistant turn — text PLUS its agent receipts
      // (activity trail and todos) — as a frozen entry in history.
      // `api.chat` also persists the same data to localStorage, so
      // re-mount picks it back up as a frozen turn next time.
      const turnActivity = activity;
      const turnTodos = todos;
      setHistory(h => partial
        ? [...h, { role: 'assistant', text: partial, activity: turnActivity, todos: turnTodos }]
        : h
      );
      setPartial('');
      // Reset the live trail — next turn starts fresh.
      setActivity([]);
      setTodos([]);
      setStreaming(false);
      // Refresh both list and detail — SSE may have updated either.
      loadBriefings && loadBriefings();
      onBriefingUpdated && onBriefingUpdated();
    }
  };

return (
    <div style={{
      flex: 1, display: 'flex', flexDirection: 'column',
      overflow: 'hidden', background: 'var(--bg-2)',
    }}>
      {/* Conversation area */}
      <div ref={scrollRef} style={{
        flex: 1, overflowY: 'auto', padding: '24px 32px',
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        <div style={{
          maxWidth: 720, width: '100%', margin: '0 auto',
          display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          {history.length === 0 && !streaming && activity.length === 0 && (
            <div style={{
              padding: '32px 0', color: 'var(--ink-mute)',
              fontSize: 13.5, fontStyle: 'italic', textAlign: 'center',
            }}>
              Tell the Creative Director what you want to brief — product, market,
              audience cue, anything you have. The agent runs the intake from there.
            </div>
          )}

{history.map((m, i) => (
            <React.Fragment key={i}>
              <div
                style={{
                  alignSelf: m.role === 'user' ? 'flex-end' : 'flex-start',
                  maxWidth: '88%',
                  padding: '10px 14px', borderRadius: 12,
                  background: m.role === 'user' ? 'var(--moss-deep)' : 'var(--card-solid)',
                  color: m.role === 'user' ? 'var(--bg)' : 'var(--ink)',
                  border: m.role === 'user' ? 'none' : '1px solid var(--line)',
                  fontSize: 13.5, lineHeight: 1.5, whiteSpace: 'pre-wrap',
                }}
              >
                {m.text}
              </div>
              {/* Persisted agent receipts for this turn — render the
                  todos and activity trail right under the assistant
                  bubble, so the user sees what was run when they
                  reload the page or come back to the briefing. */}
              {m.role === 'assistant' && Array.isArray(m.todos) && m.todos.length > 0 && window.TodoListCard && (
                <window.TodoListCard todos={m.todos} />
              )}
              {m.role === 'assistant' && Array.isArray(m.activity) && m.activity.length > 0 && window.ActivityTrail && (
                <window.ActivityTrail activity={m.activity.filter(e => e.kind !== 'error')} />
              )}
            </React.Fragment>
          ))}

{/* Status pill — surfaced the moment the user hits Send and
              stays visible until either tool calls start landing or the
              first text chunk streams in. Closes the "did anything
              happen?" gap on slow first-byte turns. */}
          {streaming && !partial && activity.length === 0 && todos.length === 0 && (
            <div style={{
              alignSelf: 'flex-start', maxWidth: '88%',
              padding: '8px 14px', borderRadius: 12,
              background: 'var(--bg-2)', border: '1px solid var(--line)',
              color: 'var(--ink-mute)', fontSize: 12.5, fontStyle: 'italic',
              display: 'inline-flex', alignItems: 'center', gap: 8,
            }}>
              <span className="pulse">●</span>
              Creative Director is thinking…
            </div>
          )}

{streaming && partial && (
            <div style={{
              alignSelf: 'flex-start', maxWidth: '88%',
              padding: '10px 14px', borderRadius: 12,
              background: 'var(--card-solid)', border: '1px solid var(--line)',
              color: 'var(--ink)', fontSize: 13.5, lineHeight: 1.5,
              whiteSpace: 'pre-wrap',
            }}>
              {partial}
              <span className="pulse" style={{ marginLeft: 4 }}>▍</span>
            </div>
          )}

{/* Live trail — only rendered for the IN-FLIGHT turn. Frozen
              into the assistant message above on stream end. */}
          {streaming && todos.length > 0 && window.TodoListCard && (
            <window.TodoListCard todos={todos} />
          )}

{/* Errors get a small inline pill — surfaced alongside the trail */}
          {activity.filter(e => e.kind === 'error').map((e, i) => (
            <div key={`err-${i}`} style={{
              padding: '10px 12px', borderRadius: 8,
              background: '#fdecec', color: '#a72020',
              border: '1px solid #e08a8a', fontSize: 12,
            }}>{e.text}</div>
          ))}

{streaming && activity.length > 0 && window.ActivityTrail && (
            <window.ActivityTrail activity={activity.filter(e => e.kind !== 'error')} />
          )}
        </div>
      </div>

{/* Composer — pinned to bottom of pane */}
      <div style={{
        padding: '14px 32px 18px', borderTop: '1px solid var(--line-soft)',
        background: 'var(--bg)',
      }}>
        <div style={{
          maxWidth: 720, margin: '0 auto',
          display: 'flex', gap: 10, alignItems: 'flex-end',
          padding: 12, borderRadius: 12,
          border: '1px solid var(--line)', background: 'var(--card-solid)',
        }}>
          <textarea
            value={input}
            onChange={(e) => setInput(e.target.value)}
            onKeyDown={(e) => {
              if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); send(); }
            }}
            placeholder={streaming ? 'Agent is responding…' : 'Describe the brief — product, market, audience…'}
            disabled={streaming}
            rows={2}
            style={{
              flex: 1, border: 'none', outline: 'none', resize: 'none',
              background: 'transparent',
              fontFamily: 'var(--font-serif)', fontSize: 14,
              color: 'var(--ink)', minHeight: 32, lineHeight: 1.4,
            }}
          />
          <button
            type="button"
            onClick={send}
            disabled={streaming || !input.trim()}
            className="btn-reset"
            style={{
              padding: '8px 12px', borderRadius: 8,
              background: input.trim() && !streaming ? 'var(--moss-deep)' : 'var(--bg-2)',
              color: input.trim() && !streaming ? 'var(--bg)' : 'var(--ink-mute)',
              cursor: input.trim() && !streaming ? 'pointer' : 'default',
              fontSize: 12, display: 'flex', gap: 6, alignItems: 'center',
            }}
          >
            Send <Icon name="send" size={13} />
          </button>
        </div>
      </div>
    </div>
  );
}

window.BriefingsView = BriefingsView;
window.BriefingDetailRoute = BriefingDetailRoute;
window.StatusPill = StatusPill;