manigent-server 0.1.0__py3-none-any.whl

manigent/web/frontend/src/components/briefing/heightBootstrap.ts

@@ -0,0 +1,224 @@
+/**
+ * The height bootstrap: the one script the desk inserts into a briefing, the
+ * string function that inserts it, and the envelope both sides speak.
+ *
+ * Pure — no React, no DOM. Everything here is either a string or a predicate
+ * over a message payload, which is why it carries the cheapest and the most
+ * load-bearing tests in this milestone: jsdom does not execute iframe scripts,
+ * so the injection point and the envelope validator are the parts of the
+ * sizing path a headless suite can actually observe.
+ */
+
+/** The envelope literal. NOT 'manigent-briefing' — a briefing whose author
+ *  guessed the longer name must not be able to resize its own frame, and a
+ *  desk that accepted both would have two contracts. */
+export const BRIEF_MESSAGE_SOURCE = 'manigent-brief'
+export const BRIEF_MESSAGE_VERSION = 1
+
+export type BriefMessageType = 'height' | 'ready' | 'error' | 'remeasure'
+
+/** child -> parent for 'height' / 'ready' / 'error'; parent -> child for
+ *  'remeasure'. One shape both ways so there is one thing to validate. */
+export interface BriefMessage {
+  source: typeof BRIEF_MESSAGE_SOURCE
+  v: typeof BRIEF_MESSAGE_VERSION
+  type: BriefMessageType
+  slug: string
+  /** integer CSS px; present on 'height' */
+  height?: number
+  /** present on 'error'; diagnostic only, never rendered as the author's */
+  message?: string
+}
+
+/** Height bounds. These are not tidiness: an unbounded height is not a
+ *  rendering bug, it is a 2,000,000px iframe that hangs the desk. */
+export const MIN_FRAME_PX = 120
+export const MAX_FRAME_PX = 20_000
+
+/** What the frame stands at before it has been told anything, and what it
+ *  keeps if it never is. */
+export const FALLBACK_FRAME_PX = 640
+
+/** How long a silent document gets before its frame says so. Long enough that
+ *  a heavy document pulling a CDN chart library over a slow connection is not
+ *  accused of failing; short enough that a genuinely dead script does not
+ *  leave the user staring at a box. */
+export const NO_REPORT_TIMEOUT_MS = 4_000
+
+const HEAD_OPEN = /<head(?:\s[^>]*)?>/i
+const HTML_OPEN = /<html(?:\s[^>]*)?>/i
+const DOCTYPE = /<!doctype[^>]*>/i
+
+/**
+ * The script the shell inserts as the first child of `<head>`. Never stored,
+ * so it never counts against the author's 256 KB.
+ *
+ * REGISTERED SYNCHRONOUSLY, at head-parse time, so all three survive an author
+ * script that throws on its first line:
+ *   - the `error` handler, which reports but deliberately does NOT
+ *     preventDefault — the author still sees their own error in the console;
+ *   - the parent-message listener, for 'remeasure';
+ *   - a readystate hook that attaches the observers once `<body>` exists.
+ *
+ * The observers cannot attach here. While `<head>` is still parsing
+ * `document.body` is null and there is nothing for a ResizeObserver to
+ * observe; what head-first actually buys is the REGISTRATION ORDER above, and
+ * that is enough for the contract's real purpose — a document whose own script
+ * throws still sizes, because a synchronous throw stops neither parsing nor
+ * DOMContentLoaded.
+ *
+ * MEASUREMENT is `body.getBoundingClientRect().bottom` plus the body's own
+ * bottom margin, and never `documentElement.scrollHeight`: scrollHeight
+ * ratchets to the frame's own viewport and never shrinks below it, so the
+ * obvious `Math.max(scrollHeight, …)` pins every 200px briefing at 800px
+ * forever. The rectangle is content-driven, shrinks correctly, and needs no
+ * CSS injected into the author's document — which is the point. A margin reset
+ * to make our measurement easier would be exactly the styling imposition this
+ * project exists to remove.
+ *
+ * COALESCING: every trigger schedules one animation frame, and the frame
+ * callback posts only when the integer height actually moved. A MutationObserver
+ * on a chatty document otherwise posts hundreds of times a second, and every
+ * post is a setState in the parent.
+ *
+ * The 5s poll is the belt for what the observers miss (an image that finishes
+ * decoding without mutating the DOM); the observers are the braces for
+ * everything after 5s.
+ */
+export function buildHeightBootstrap(slug: string): string {
+  // `<` is escaped so the slug can never close this script element early, and
+  // JSON.stringify handles quoting. The server validates slugs to
+  // [a-z0-9_-], but this function is also handed the local sample slug and
+  // should not depend on a rule enforced in another process.
+  const literal = JSON.stringify(slug).replace(/</g, '\\u003c')
+  return `(function(){
+var SLUG=${literal},SRC=${JSON.stringify(BRIEF_MESSAGE_SOURCE)},V=${BRIEF_MESSAGE_VERSION};
+var last=-1,pending=0,started=false;
+function post(type,extra){
+  var msg={source:SRC,v:V,type:type,slug:SLUG};
+  if(extra){for(var k in extra){msg[k]=extra[k];}}
+  try{parent.postMessage(msg,'*');}catch(e){}
+}
+function measure(){
+  var b=document.body;
+  if(!b)return 0;
+  var bottom=b.getBoundingClientRect().bottom,mb=0;
+  try{mb=parseFloat(getComputedStyle(b).marginBottom)||0;}catch(e){}
+  return Math.ceil(bottom+mb);
+}
+function report(){
+  pending=0;
+  var h=measure();
+  if(h>0&&h!==last){last=h;post('height',{height:h});}
+}
+function schedule(){
+  if(pending)return;
+  pending=window.requestAnimationFrame?requestAnimationFrame(report):setTimeout(report,16);
+}
+window.addEventListener('error',function(e){
+  post('error',{message:e&&e.message?String(e.message):'script error'});
+});
+window.addEventListener('message',function(e){
+  var d=e.data;
+  if(d&&d.source===SRC&&d.type==='remeasure'){last=-1;schedule();}
+});
+function attach(){
+  if(started||!document.body)return;
+  started=true;
+  post('ready');
+  schedule();
+  try{new ResizeObserver(schedule).observe(document.body);}catch(e){}
+  try{new MutationObserver(schedule).observe(document.documentElement,
+    {subtree:true,childList:true,attributes:true,characterData:true});}catch(e){}
+  window.addEventListener('load',schedule);
+  try{if(document.fonts&&document.fonts.ready){document.fonts.ready.then(schedule);}}catch(e){}
+  var poll=setInterval(schedule,250);
+  setTimeout(function(){clearInterval(poll);},5000);
+}
+if(document.readyState==='loading'){
+  document.addEventListener('readystatechange',attach);
+  document.addEventListener('DOMContentLoaded',attach);
+}else{attach();}
+})();`
+}
+
+/**
+ * Return `html` with exactly ONE `<script>` inserted. Insertion point, in
+ * order:
+ *   1. immediately after the first `<head>` / `<head …>`
+ *   2. else immediately after the first `<html>` / `<html …>`
+ *   3. else immediately after the doctype
+ *   4. else at index 0
+ *
+ * The `(?:\s[^>]*)?` is load-bearing rather than stylistic. The obvious
+ * `<head[^>]*>` also matches the literal string `<header>` — `<head`, then
+ * `[^>]*` eats `er`, then `>` — so a document with no `<head>` but a
+ * `<header>`, an ordinary shape for a hand-written briefing, would take
+ * branch 1 and bury the bootstrap inside the header element, silently.
+ *
+ * NEVER inserts ahead of `<!doctype html>`: that is quirks mode, which is a
+ * styling imposition by another name.
+ *
+ * It is a string edit, not a parse, and that is a deliberate limit rather than
+ * an oversight. A `<head>` that only LOOKS like one — inside a comment, inside
+ * a script's string literal — takes the bootstrap with it, no height is ever
+ * reported, and the frame lands in its labelled fallback. Contained and
+ * visible. An HTML parser to beat that case costs more than the case is worth.
+ *
+ * Head-first also removes the failure end-of-body insertion had: nothing of
+ * the author's precedes the insertion point, so an unterminated `<script>` in
+ * the author's document can no longer swallow the bootstrap. It can still
+ * swallow everything after it — but that is the author's own document
+ * breaking, and it shows up as the fallback rather than as a wrong size.
+ */
+export function injectHeightBootstrap(html: string, slug: string): string {
+  const tag = `<script>${buildHeightBootstrap(slug)}</script>`
+  for (const pattern of [HEAD_OPEN, HTML_OPEN, DOCTYPE]) {
+    const match = pattern.exec(html)
+    if (match) {
+      const at = match.index + match[0].length
+      return html.slice(0, at) + tag + html.slice(at)
+    }
+  }
+  return tag + html
+}
+
+/**
+ * Validate one `MessageEvent.data`. Returns null unless ALL hold: it is a
+ * plain object; `source` is our literal; `v` is 1; `slug` is this frame's
+ * slug; `type` is one of the four literals; and for 'height',
+ * `Number.isFinite(height)` and the integer height is within bounds.
+ *
+ * `event.origin` is NOT consulted, here or anywhere. For an opaque frame it is
+ * the literal string "null" for EVERY such frame, so an origin check here is
+ * not a weak check — it is one that looks like a check and validates nothing.
+ * The real authentication is `event.source === iframe.contentWindow`, made by
+ * the caller, because contentWindow identity is the one thing a message cannot
+ * forge.
+ */
+export function parseBriefMessage(data: unknown, slug: string): BriefMessage | null {
+  if (typeof data !== 'object' || data === null || Array.isArray(data)) return null
+  const d = data as Record<string, unknown>
+  if (d.source !== BRIEF_MESSAGE_SOURCE) return null
+  if (d.v !== BRIEF_MESSAGE_VERSION) return null
+  if (d.slug !== slug) return null
+  const type = d.type
+  if (type !== 'height' && type !== 'ready' && type !== 'error' && type !== 'remeasure') {
+    return null
+  }
+  const msg: BriefMessage = {
+    source: BRIEF_MESSAGE_SOURCE,
+    v: BRIEF_MESSAGE_VERSION,
+    type,
+    slug,
+  }
+  if (type === 'height') {
+    const height = d.height
+    if (typeof height !== 'number' || !Number.isFinite(height)) return null
+    const rounded = Math.ceil(height)
+    if (rounded < MIN_FRAME_PX || rounded > MAX_FRAME_PX) return null
+    msg.height = rounded
+  }
+  if (typeof d.message === 'string') msg.message = d.message
+  return msg
+}

manigent/web/frontend/src/components/briefing/parseBriefMessage.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest'
+import {
+  BRIEF_MESSAGE_SOURCE,
+  MAX_FRAME_PX,
+  MIN_FRAME_PX,
+  parseBriefMessage,
+} from './heightBootstrap'
+
+/**
+ * THE ENVELOPE VALIDATOR.
+ *
+ * The frame runs on an opaque origin, so `event.origin` is the literal string
+ * "null" for it and for every other opaque frame on the page. An origin check
+ * here would not be a weak check — it would be one that LOOKS like a check and
+ * validates nothing. Authentication is `event.source === contentWindow`, made
+ * by the caller; this function's job is only "what does the payload mean", and
+ * these tests pin the cases where a wrong answer is expensive.
+ */
+
+const envelope = (over: Record<string, unknown> = {}) => ({
+  source: BRIEF_MESSAGE_SOURCE,
+  v: 1,
+  type: 'height',
+  slug: 'wine',
+  height: 400,
+  ...over,
+})
+
+describe('parseBriefMessage — what is accepted', () => {
+  it('accepts a well-formed height envelope', () => {
+    expect(parseBriefMessage(envelope(), 'wine')).toEqual({
+      source: BRIEF_MESSAGE_SOURCE,
+      v: 1,
+      type: 'height',
+      slug: 'wine',
+      height: 400,
+    })
+  })
+
+  it('accepts ready / error / remeasure without a height', () => {
+    for (const type of ['ready', 'error', 'remeasure']) {
+      const parsed = parseBriefMessage(envelope({ type, height: undefined }), 'wine')
+      expect(parsed?.type).toBe(type)
+      expect(parsed?.height).toBeUndefined()
+    }
+  })
+})
+
+describe('parseBriefMessage — what is rejected', () => {
+  it("rejects source: 'manigent-briefing'", () => {
+    // The literal backend first proposed. Accepting both would leave the app
+    // with two contracts and this one silently half-working.
+    expect(parseBriefMessage(envelope({ source: 'manigent-briefing' }), 'wine')).toBeNull()
+  })
+
+  it('rejects a wrong version, a wrong slug, and an unknown type', () => {
+    expect(parseBriefMessage(envelope({ v: 2 }), 'wine')).toBeNull()
+    // A message from the OTHER briefing's frame must not resize this one.
+    expect(parseBriefMessage(envelope({ slug: 'cheese' }), 'wine')).toBeNull()
+    expect(parseBriefMessage(envelope({ type: 'resize' }), 'wine')).toBeNull()
+  })
+
+  it('rejects non-finite and out-of-range heights', () => {
+    // Not tidiness: a bad height is not a rendering bug, it is a 2,000,000px
+    // iframe that hangs the desk.
+    for (const height of [NaN, Infinity, -Infinity, -1, 0, MIN_FRAME_PX - 1, 10_000_000]) {
+      expect(parseBriefMessage(envelope({ height }), 'wine')).toBeNull()
+    }
+    expect(parseBriefMessage(envelope({ height: '400' }), 'wine')).toBeNull()
+    expect(parseBriefMessage(envelope({ height: undefined }), 'wine')).toBeNull()
+  })
+
+  it('accepts the bounds themselves', () => {
+    expect(parseBriefMessage(envelope({ height: MIN_FRAME_PX }), 'wine')?.height).toBe(MIN_FRAME_PX)
+    expect(parseBriefMessage(envelope({ height: MAX_FRAME_PX }), 'wine')?.height).toBe(MAX_FRAME_PX)
+  })
+
+  it('rounds a fractional height up, and rejects one that rounds out of range', () => {
+    expect(parseBriefMessage(envelope({ height: 400.2 }), 'wine')?.height).toBe(401)
+    expect(parseBriefMessage(envelope({ height: MAX_FRAME_PX + 0.1 }), 'wine')).toBeNull()
+  })
+
+  it('rejects payloads that are not plain objects', () => {
+    // Anything on the page can postMessage. A string, a null or an array
+    // reaching this function must not become a resize.
+    for (const data of ['manigent-brief', null, undefined, 42, [envelope()]]) {
+      expect(parseBriefMessage(data, 'wine')).toBeNull()
+    }
+  })
+})

manigent/web/frontend/src/components/briefing/sampleBriefing.ts

@@ -0,0 +1,148 @@
+/**
+ * The onboarding sample, as a complete HTML document rather than a React
+ * component.
+ *
+ * AC-1.4 requires the sample to render "like any published one", and under the
+ * standalone-HTML model that means going through the same iframe, the same
+ * injected bootstrap and the same sizing path as a real briefing — which a JSX
+ * subtree cannot do. A constant costs no storage, no seeding, no migration and
+ * no route.
+ *
+ * FULLY SELF-CONTAINED: its own typography, its own inline-SVG chart, no
+ * network request of any kind. That matches the worked example in
+ * `skills/brief/SKILL.md` (self-contained even though external resources are
+ * permitted), and it makes this file the frontend half of the AC-1.2 drift
+ * check: if this document and that worked example diverge on what a briefing
+ * looks like, it is visible in one diff.
+ *
+ * TWO THINGS FROM THE OLD `SampleBriefing.tsx` DELIBERATELY DO NOT COME ACROSS:
+ *   - the copy-to-clipboard button. The Clipboard API is unavailable to an
+ *     opaque-origin frame not granted `allow="clipboard-write"`, and granting
+ *     that to EVERY briefing frame is a capability grant to every future
+ *     briefing author, bought for one button on one sample. The prompt is a
+ *     selectable <pre> instead.
+ *   - the PNG screenshot mock. A srcdoc document has no base URL, so a
+ *     bundler-relative asset path does not resolve. Replaced by inline SVG,
+ *     which is also what the skill teaches authors to draw charts with.
+ */
+
+export const SAMPLE_BRIEFING_TITLE = 'Sample Briefing'
+
+/** The reserved slug's document. A complete `<!doctype html>` page — it must
+ *  contain a `<head>`, like any published briefing, because that is where the
+ *  height bootstrap is inserted. */
+export const SAMPLE_BRIEFING_HTML = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Sample briefing</title>
+<style>
+  :root { --ink:#1b1b1b; --muted:#6f6a64; --rule:#e6e2dc; --accent:#5b3a8e; }
+  body { margin:0; padding:26px 30px 32px; background:#fbfaf8; color:var(--ink);
+         font:16px/1.55 "Iowan Old Style","Palatino Linotype",Georgia,serif; }
+  h1 { margin:0 0 3px; font-size:26px; letter-spacing:-.01em; }
+  .dateline { margin:0 0 22px; font-size:12px; letter-spacing:.09em;
+              text-transform:uppercase; color:var(--muted); }
+  h2 { margin:26px 0 10px; padding-bottom:6px; font-size:12px;
+       letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
+       border-bottom:1px solid var(--rule); }
+  p { margin:0 0 12px; }
+  .panel { border:1px solid var(--rule); border-left:3px solid var(--accent);
+           border-radius:8px; background:#f4f0fa; padding:18px 20px 16px; }
+  .panel p:last-child { margin-bottom:0; }
+  pre { margin:14px 0 0; padding:13px 15px; background:#fff;
+        border:1px solid var(--rule); border-radius:6px;
+        font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
+        white-space:pre-wrap; word-break:break-word; color:var(--ink); }
+  .hint { font-size:13px; color:var(--muted); }
+  table { width:100%; border-collapse:collapse; font-size:15px; }
+  th { padding:0 0 6px; font-size:11px; font-weight:600; text-align:left;
+       letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
+  td { padding:7px 0; border-top:1px solid var(--rule); }
+  td.num { text-align:right; font-variant-numeric:tabular-nums; }
+  a { color:var(--accent); }
+  footer { margin-top:26px; padding-top:11px; border-top:1px solid var(--rule);
+           font-size:13px; color:var(--muted); }
+</style>
+</head>
+<body>
+
+  <h1>Your briefing goes here</h1>
+  <p class="dateline">Sample &middot; nothing below is real data</p>
+
+  <div class="panel">
+    <p><b>A briefing is a dashboard your agents keep up to date on a schedule.</b>
+    To create one, tell your assistant what you want to see. For example:</p>
+    <pre>please create a project to publish the following to the briefing of my desk,
+save it as an SOP, and schedule it to run everyday at 2am PT.
+- the top 3 most influential product announcements in the AI industry today,
+  summarized in 3 sentences each with a reference link
+- a list of emails that need my action today</pre>
+    <p class="hint" style="margin-top:12px;">Your assistant scopes the work, runs
+    it, and publishes the result here. Saving it as a <b>scheduled SOP</b> keeps
+    it fresh automatically.</p>
+  </div>
+
+  <h2>What a published one looks like</h2>
+  <p class="hint">Everything below is drawn by the briefing itself — its own
+  typography, its own chart, its own table. The desk imposes none of it.</p>
+
+  <!-- Bar chart. Baseline y=140, plot height 120px, scale max 40, so each bar
+       is height = value / 40 * 120 and y = 140 - height. -->
+  <svg viewBox="0 0 420 172" width="420" height="172" role="img"
+       aria-label="Sample weekly volume by channel">
+    <g font-size="10" fill="#9b948c" text-anchor="end">
+      <text x="30" y="143">0</text>
+      <text x="30" y="83">20</text>
+      <text x="30" y="23">40</text>
+    </g>
+    <g stroke="#e6e2dc">
+      <line x1="36" y1="140" x2="412" y2="140"/>
+      <line x1="36" y1="80"  x2="412" y2="80"/>
+      <line x1="36" y1="20"  x2="412" y2="20"/>
+    </g>
+    <g fill="#5b3a8e">
+      <rect x="44"  y="47"  width="48" height="93"/>
+      <rect x="120" y="68"  width="48" height="72"/>
+      <rect x="196" y="86"  width="48" height="54"/>
+      <rect x="272" y="104" width="48" height="36"/>
+      <rect x="348" y="119" width="48" height="21"/>
+    </g>
+    <g font-size="11" fill="#1b1b1b" text-anchor="middle">
+      <text x="68"  y="41">31</text>
+      <text x="144" y="62">24</text>
+      <text x="220" y="80">18</text>
+      <text x="296" y="98">12</text>
+      <text x="372" y="113">7</text>
+    </g>
+    <g font-size="11" fill="#6f6a64" text-anchor="middle">
+      <text x="68"  y="157">Mon</text>
+      <text x="144" y="157">Tue</text>
+      <text x="220" y="157">Wed</text>
+      <text x="296" y="157">Thu</text>
+      <text x="372" y="157">Fri</text>
+    </g>
+  </svg>
+
+  <h2>Needs your attention</h2>
+  <table>
+    <thead>
+      <tr><th>Item</th><th>Owner</th><th class="num">Waiting</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>Sample row — a thing to decide</td><td>you</td>
+          <td class="num">2 days</td></tr>
+      <tr><td>Sample row — a thing to read</td><td>your assistant</td>
+          <td class="num">4 hours</td></tr>
+    </tbody>
+  </table>
+
+  <footer>
+    A real briefing links its sources, like
+    <a href="https://example.com/" target="_blank" rel="noopener noreferrer">this</a>.
+    Ask your assistant to publish one and this sample disappears.
+  </footer>
+
+</body>
+</html>
+`

manigent/web/frontend/src/components/channels/ChannelBadge.tsx

@@ -0,0 +1,35 @@
+import { Globe, Mail, MessageCircle, Network, Phone, Send, Radio } from 'lucide-react'
+import { channelName } from '../../utils/channelThreads'
+
+const ICONS: Record<string, typeof Send> = {
+  telegram: Send,
+  email: Mail,
+  line: MessageCircle,
+  whatsapp: Phone,
+  webchat: Globe,
+  hub: Network,
+}
+
+/** A channel's icon, named for assistive tech ("Telegram", "Email", "LINE",
+ *  "WhatsApp", "Web chat"). The name is also the tooltip. `decorative` hides it from
+ *  assistive tech where the channel's name is already written beside it. */
+export default function ChannelBadge({ channel, size = 12, decorative = false }: {
+  channel: string; size?: number; decorative?: boolean
+}) {
+  const Icon = ICONS[channel] ?? Radio
+  const name = channelName(channel)
+  if (decorative) {
+    return <Icon className="shrink-0 text-ink-3" style={{ width: size, height: size }} aria-hidden />
+  }
+  return (
+    <span
+      role="img"
+      aria-label={name}
+      title={name}
+      data-testid="channel-badge"
+      className="shrink-0 inline-flex items-center justify-center text-ink-3"
+    >
+      <Icon className="shrink-0" style={{ width: size, height: size }} aria-hidden />
+    </span>
+  )
+}

manigent/web/frontend/src/components/chatroom/ChannelThreadControls.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Hand, Undo2 } from 'lucide-react'
+import { ApiError } from '../../api/client'
+import { getChannelThread, setThreadPaused, type ChannelThreadRow } from '../../api/endpoints/channels'
+import { CHANNEL_THREADS_KEY } from '../../hooks/useChannelThreads'
+import { THREAD_COPY, contactLabel } from '../../utils/channelThreads'
+import ChannelBadge from '../channels/ChannelBadge'
+
+/**
+ * Above a channel thread's messages, for its owner: which channel it came from
+ * and who the person is, and the per-thread takeover. "Take over" pauses the
+ * agent on this one thread (the person's messages still arrive, the agent
+ * doesn't answer, what the owner types goes out on the channel); "Hand back to
+ * the agent" un-pauses. The state shown is always the server's answer, never
+ * a guess: after the PUT the list is updated from the response and refetched.
+ *
+ * A thread whose connection was removed has nothing to pause: no control.
+ */
+export function ChannelThreadBar({ row }: { row: ChannelThreadRow }) {
+  const queryClient = useQueryClient()
+  const [error, setError] = useState<string | null>(null)
+  const [resumed, setResumed] = useState(false)
+  const contact = contactLabel(row.contact_name, row.channel)
+
+  const pause = useMutation({
+    mutationFn: (paused: boolean) => setThreadPaused(row.project_id, paused),
+    onMutate: () => setError(null),
+    onSuccess: (answer, asked) => {
+      queryClient.setQueryData<ChannelThreadRow[]>(CHANNEL_THREADS_KEY, (rows) =>
+        rows?.map((r) => (r.project_id === answer.project_id ? { ...r, paused: answer.paused } : r)),
+      )
+      void queryClient.invalidateQueries({ queryKey: CHANNEL_THREADS_KEY })
+      void queryClient.invalidateQueries({ queryKey: ['channel-thread', row.project_id] })
+      setResumed(!asked && !answer.paused)
+    },
+    onError: (e) => {
+      setError(
+        e instanceof ApiError && e.status === 403 ? THREAD_COPY.forbidden
+          : e instanceof ApiError && e.status === 404 ? THREAD_COPY.gone
+          : THREAD_COPY.failed,
+      )
+    },
+  })
+
+  return (
+    <div data-testid="channel-thread-bar" className="flex-shrink-0 border-b border-border px-6 py-2 text-xs space-y-1.5">
+      <div className="flex items-center gap-2 min-w-0">
+        <ChannelBadge channel={row.channel} size={13} />
+        <bdi className="min-w-0 truncate text-gray-600" title={contact} data-testid="channel-thread-via">
+          {THREAD_COPY.via(row.channel, contact)}
+        </bdi>
+        {!row.connection_removed && (
+          <>
+            <span className="ml-auto shrink-0 text-gray-400" data-testid="channel-pause-state">
+              {THREAD_COPY.pauseState(row.paused)}
+            </span>
+            <button
+              type="button"
+              disabled={pause.isPending}
+              onClick={() => pause.mutate(!row.paused)}
+              className="shrink-0 inline-flex items-center gap-1 px-2 py-1 rounded-md border border-border text-gray-700 hover:bg-gray-50 disabled:opacity-50"
+            >
+              {row.paused ? <Undo2 className="w-3.5 h-3.5" /> : <Hand className="w-3.5 h-3.5" />}
+              {row.paused ? THREAD_COPY.resume : THREAD_COPY.pause}
+            </button>
+          </>
+        )}
+      </div>
+      {!row.connection_removed && !row.paused && (
+        <p className="text-gray-400">{THREAD_COPY.pauseNote}</p>
+      )}
+      {row.paused && (
+        <p role="status" data-testid="channel-paused-banner" className="p-2 rounded-md bg-amber-50 border border-amber-200 text-amber-800">
+          {THREAD_COPY.pausedBanner(contact, row.channel)}
+        </p>
+      )}
+      {resumed && !row.paused && (
+        <p role="status" data-testid="channel-resume-note" className="text-gray-600">
+          {THREAD_COPY.resumeNote(contact)}
+        </p>
+      )}
+      {error && (
+        <p role="alert" data-testid="channel-pause-error" className="text-red-600">{error}</p>
+      )}
+    </div>
+  )
+}
+
+/** What the composer of a channel thread says before the owner sends. */
+export function channelComposer(row: ChannelThreadRow): { sendLabel?: string; placeholder?: string } {
+  if (row.connection_removed) return {}
+  return {
+    sendLabel: THREAD_COPY.sendLabel(row.channel),
+    placeholder: THREAD_COPY.placeholder(row.channel, contactLabel(row.contact_name, row.channel)),
+  }
+}
+
+/**
+ * Above the composer: where what the owner types will go, said BEFORE they
+ * send. Removed: nowhere. Disabled: it waits for Enable. WhatsApp with the
+ * window closed: it won't be delivered until the person writes again.
+ * Un-paused: it goes out AND the agent reads it.
+ */
+export function ChannelComposerNote({ row, messageCount }: { row: ChannelThreadRow; messageCount: number }) {
+  const { data: status } = useQuery({
+    queryKey: ['channel-thread', row.project_id, messageCount],
+    queryFn: () => getChannelThread(row.project_id),
+    retry: false,
+    enabled: row.channel === 'whatsapp' && !row.connection_removed,
+  })
+  const contact = contactLabel(row.contact_name, row.channel)
+  const lines: string[] = []
+  if (row.connection_removed) {
+    lines.push(THREAD_COPY.removedNote(row.channel))
+  } else {
+    if (!row.connection_enabled) lines.push(THREAD_COPY.disabledNote(row.channel))
+    if (status && status.window_closed_at !== null) lines.push(THREAD_COPY.windowClosed(contact))
+    if (!row.paused) lines.push(THREAD_COPY.unpausedNote(row.channel))
+  }
+  if (lines.length === 0) return null
+  return (
+    <div data-testid="channel-composer-note" className="px-4 pt-2 text-xs text-gray-600 space-y-0.5">
+      {lines.map((line) => <p key={line}>{line}</p>)}
+    </div>
+  )
+}