Show the Brain beside the AI chat and make schedules from chosen material

The Brain and AI page lists Brain material (failed documents hidden) with
search, open, delete and per-material or select-all ticks. New schedules use
only the ticked material, kept through topic edits and resumes; nothing ticked
means the whole Brain. With material ticked, the agent skips the content topic
question and names the material in the chat and plan.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/pages/Instruction.tsx

@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { Icon, ruleIcon } from '../components/Icon'
 import { PageHead } from '../components/Page'
+import { BrainPanel, choosable, useDocuments } from './Brain'
 import {
   dayName, describeRule, kindLabel, KINDS, LANGUAGES, languageLabel, monthNote, videoCadence, weeklyTarget,
   type ContentKind, type ContentRule, type OutputLanguage, type ResearchRule, type Rule,
@@ -35,6 +36,14 @@ export function InstructionPage() {
   const [agent, setAgent] = useState<AgentState>(EMPTY)
   const [messages, setMessages] = useState<Message[]>([])
   const [saving, setSaving] = useState(false)
+  // Brain material the schedules are made from; none chosen means the whole Brain.
+  const [selected, setSelected] = useState<Set<number>>(new Set())
+  const docs = useDocuments()
+  // A chosen document that was deleted, or failed since, no longer counts.
+  const chosenDocs = choosable(docs.data).filter(d => selected.has(d.docId))
+  const chosen = chosenDocs.map(d => d.docId)
+  // How the chat and the plan name the chosen material: by title when there is one.
+  const sources = chosenDocs.length === 1 ? `“${chosenDocs[0].title}”` : chosenDocs.length ? t('brainPanel.nChosen', { n: chosenDocs.length }) : null
   const [phase, setPhase] = useState<Phase>('idle')
   // The live question whose typing has finished, so its reply options can show.
   const [typedLive, setTypedLive] = useState('')
@@ -46,14 +55,16 @@ export function InstructionPage() {
   const later = (fn: () => void, ms: number) => { timers.current.push(window.setTimeout(fn, ms)) }
   useEffect(() => () => timers.current.forEach(clearTimeout), [])
 
-  const question = nextQuestion(agent)
+  // The agent sees the current choice, so ticking material in the Brain panel updates its question and plan.
+  const view: AgentState = { ...agent, sources }
+  const question = nextQuestion(view)
   const ready = agent.items.filter(i => canSchedule(i.rule))
   const hasContent = agent.items.some(i => i.rule.type === 'content')
   // The agent's current turn: its question, or what it is waiting for. It stays live, so an edit in the plan updates it.
   const live = inLang(lang, () => saving
     ? { text: t('agent.approving'), options: [] as string[] }
     : question
-      ? ask(question, agent)
+      ? ask(question, view)
       : agent.items.length
         ? {
             text: hasContent && agent.language
@@ -75,7 +86,7 @@ export function InstructionPage() {
     // A picked option is in the conversation's language already; typed text may switch it.
     const replyLang = live.options.includes(input) ? lang : chatLangOf(input) ?? lang
     setChatLang(replyLang)
-    const turn = inLang(replyLang, () => respond(agent, input))
+    const turn = inLang(replyLang, () => respond(view, input))
     // The question being answered is kept in the history, with the reply after it.
     setMessages(ms => [...ms, ...(live.text ? [{ role: 'agent' as const, text: live.text }] : []), { role: 'user', text: input.trim() }])
     setText('')
@@ -106,8 +117,8 @@ export function InstructionPage() {
     // One at a time so a failure (e.g. not an organization owner) is reported per schedule.
     for (const { id, rule } of items) {
       try {
-        await createSchedule(rule.type === 'content' ? { ...rule, language } : rule)
-        done.push({ rule, ok: true })
+        await createSchedule(rule.type === 'content' ? { ...rule, language } : rule, chosen)
+        done.push({ rule: rule.type === 'content' && chosen.length ? { ...rule, chosen: true } : rule, ok: true })
         created.add(id)
       } catch (e) {
         done.push({ rule, ok: false, message: (e as Error).message })
@@ -127,69 +138,75 @@ export function InstructionPage() {
     <>
       <PageHead title={t('ins.title')} description={t('ins.description')} />
 
-      <div className="ai-workspace">
-        <div className="card agent-chat">
-          <div className="card-head">
-            <div className="assistant-title">
-              <span><Icon name="spark" /></span>
-              <div><h3>{t('agent.name')}</h3><small>{phase === 'thinking' ? t('agent.statusThinking') : t('agent.status')}</small></div>
+      <div className="unified-workspace">
+        <BrainPanel selected={selected} onSelect={setSelected} />
+        <div className="ai-column">
+          <div className="card agent-chat">
+            <div className="card-head">
+              <div className="assistant-title">
+                <span><Icon name="spark" /></span>
+                <div><h3>{t('agent.name')}</h3><small>{phase === 'thinking' ? t('agent.statusThinking') : t('agent.status')}</small></div>
+              </div>
             </div>
-          </div>
-          <div className="ai-messages" aria-live="polite" ref={chat}>
-            {messages.map((m, i) => (
-              <Bubble key={i} message={m} lang={lang} onTyped={i === messages.length - 1 && phase === 'replying' ? replied : undefined} onType={scroll} />
-            ))}
-            {phase === 'thinking' && <Thinking lang={lang} />}
-            {phase === 'pausing' && <Typing />}
-            {idle && live.text && (
-              <Bubble key={live.text} message={{ role: 'agent', text: live.text, typed: true }} lang={lang} busy={saving}
-                onTyped={() => setTypedLive(live.text)} onType={scroll} />
+            <div className="ai-messages" aria-live="polite" ref={chat}>
+              {messages.map((m, i) => (
+                <Bubble key={i} message={m} lang={lang} onTyped={i === messages.length - 1 && phase === 'replying' ? replied : undefined} onType={scroll} />
+              ))}
+              {phase === 'thinking' && <Thinking lang={lang} />}
+              {phase === 'pausing' && <Typing />}
+              {idle && live.text && (
+                <Bubble key={live.text} message={{ role: 'agent', text: live.text, typed: true }} lang={lang} busy={saving}
+                  onTyped={() => setTypedLive(live.text)} onType={scroll} />
+              )}
+            </div>
+            {showOptions && (
+              <div className="prompt-chips appear">
+                {live.options.map((o, i) => (
+                  <button key={o} className={i === 0 && !question && agent.items.length ? 'primary' : undefined} onClick={() => send(o)}>{o}</button>
+                ))}
+              </div>
             )}
+            <form id="ai-request-form" onSubmit={e => { e.preventDefault(); send(text) }}>
+              <label htmlFor="instruction" className="sr-only">{t('ins.label')}</label>
+              <textarea id="instruction" rows={2} value={text} placeholder={t('agent.placeholder')} disabled={saving}
+                onChange={e => setText(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); send(text) } }} />
+              <div className="ai-compose-footer">
+                <small>{t('agent.hint')}</small>
+                <button className="btn primary" type="submit" disabled={!text.trim() || saving || !idle}><Icon name="arrow-right" />{t('agent.send')}</button>
+              </div>
+            </form>
           </div>
-          {showOptions && (
-            <div className="prompt-chips appear">
-              {live.options.map((o, i) => (
-                <button key={o} className={i === 0 && !question && agent.items.length ? 'primary' : undefined} onClick={() => send(o)}>{o}</button>
+
+          <div className="card">
+            <div className="card-head"><h3>{t('ins.previewTitle')}</h3><span className="badge neutral">{t('ins.readyCount', { n: ready.length })}</span></div>
+            {agent.items.length === 0 && <div className="empty"><p>{t('agent.planEmpty')}</p></div>}
+            {hasContent && (
+              <label className="plan-language">
+                <span>{t('ins.language')}</span>
+                <select value={agent.language ?? ''} onChange={e => setAgent(s => ({ ...s, language: e.target.value as OutputLanguage }))}>
+                  {!agent.language && <option value="" disabled>{t('ins.languagePending')}</option>}
+                  {LANGUAGES.map(l => <option key={l} value={l}>{languageLabel(l)}</option>)}
+                </select>
+              </label>
+            )}
+            <div className="rule-list">
+              {agent.items.map(({ id, rule }) => (
+                <RuleCard key={id} rule={rule} from={sources ?? undefined} onChange={p => setAgent(s => editRule(s, id, p))} onRemove={() => setAgent(s => removeRule(s, id))} />
               ))}
             </div>
-          )}
-          <form id="ai-request-form" onSubmit={e => { e.preventDefault(); send(text) }}>
-            <label htmlFor="instruction" className="sr-only">{t('ins.label')}</label>
-            <textarea id="instruction" rows={2} value={text} placeholder={t('agent.placeholder')} disabled={saving}
-              onChange={e => setText(e.target.value)}
-              onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); send(text) } }} />
-            <div className="ai-compose-footer">
-              <small>{t('agent.hint')}</small>
-              <button className="btn primary" type="submit" disabled={!text.trim() || saving || !idle}><Icon name="arrow-right" />{t('agent.send')}</button>
-            </div>
-          </form>
-        </div>
-
-        <div className="card">
-          <div className="card-head"><h3>{t('ins.previewTitle')}</h3><span className="badge neutral">{t('ins.readyCount', { n: ready.length })}</span></div>
-          {agent.items.length === 0 && <div className="empty"><p>{t('agent.planEmpty')}</p></div>}
-          {hasContent && (
-            <label className="plan-language">
-              <span>{t('ins.language')}</span>
-              <select value={agent.language ?? ''} onChange={e => setAgent(s => ({ ...s, language: e.target.value as OutputLanguage }))}>
-                {!agent.language && <option value="" disabled>{t('ins.languagePending')}</option>}
-                {LANGUAGES.map(l => <option key={l} value={l}>{languageLabel(l)}</option>)}
-              </select>
-            </label>
-          )}
-          <div className="rule-list">
-            {agent.items.map(({ id, rule }) => (
-              <RuleCard key={id} rule={rule} onChange={p => setAgent(s => editRule(s, id, p))} onRemove={() => setAgent(s => removeRule(s, id))} />
-            ))}
+            {ready.length > 0 && (
+              <div className="rule-approve">
+                <small>
+                  <b className="rule-sources"><Icon name="brain" />{chosen.length ? t('ins.sourcesChosen', { n: chosen.length }) : t('ins.sourcesAll')}</b>
+                  {t('ins.approveNote')}
+                </small>
+                <button className="btn primary" disabled={saving || !idle} onClick={() => approve()}>
+                  <Icon name="check" />{saving ? t('ins.approving') : t('ins.approve', { n: ready.length })}
+                </button>
+              </div>
+            )}
           </div>
-          {ready.length > 0 && (
-            <div className="rule-approve">
-              <small>{t('ins.approveNote')}</small>
-              <button className="btn primary" disabled={saving || !idle} onClick={() => approve()}>
-                <Icon name="check" />{saving ? t('ins.approving') : t('ins.approve', { n: ready.length })}
-              </button>
-            </div>
-          )}
         </div>
       </div>
     </>
@@ -265,8 +282,9 @@ function Typing() {
   )
 }
 
-function RuleCard({ rule, onChange, onRemove }: {
+function RuleCard({ rule, from, onChange, onRemove }: {
   rule: Rule
+  from?: string
   onChange: (patch: Partial<ContentRule> | Partial<ResearchRule>) => void
   onRemove: () => void
 }) {
@@ -281,7 +299,7 @@ function RuleCard({ rule, onChange, onRemove }: {
     <div className={`rule-card${badCadence ? ' muted' : ''}`}>
       <span className="rule-icon"><Icon name={ruleIcon(rule)} /></span>
       <div className="rule-body">
-        <b>{describeRule(rule)}</b>
+        <b>{describeRule(rule, from)}</b>
         <div className="rule-fields">
           {rule.type === 'content' ? (
             <>
@@ -308,7 +326,7 @@ function RuleCard({ rule, onChange, onRemove }: {
               )}
             </>
           )}
-          <input aria-label={t('ins.topic')} className="rule-topic" value={rule.topic} placeholder={t('ins.topicPlaceholder')}
+          <input aria-label={t('ins.topic')} className="rule-topic" value={rule.topic} placeholder={t(from && rule.type === 'content' ? 'ins.topicPlaceholderChosen' : 'ins.topicPlaceholder')}
             onChange={e => onChange({ topic: e.target.value })} />
         </div>
         {rule.type === 'research' && (