// Context Workspace — a Cowork-style CONTEXT for a pinned entity. // 4 panels: Side (menu + create chat + Conversations + Related) | Chat (focus header + thread + follow-ups + input) // | Results (navigatable widgets + agent output) | Context (Global + Local + Related context + Collaterals) // Self-contained; gated on the "workspace" rail icon. TEMPORARY placement — will be relocated later. // ---------- sample data (focus entity = the "Epic set" collateral on Planning › Unified Search Revamp) ---------- const CTX_PEOPLE = { simon: { initials: "SS", tint: "#b6892e", name: "Simon" }, maya: { initials: "MC", tint: "#3b5cf6", name: "Maya" }, tomas: { initials: "TB", tint: "#0e7c66", name: "Tomas" }, lena: { initials: "LH", tint: "#c2410c", name: "Lena" }, }; const CTX_FOCUS = { kind: "Epic", name: "Indexing epic", initiative: "Unified Search Revamp", step: "Planning", state: "Draft", // Draft · Published target: { system: "jira", label: "TEK · Indexing epic", url: "#" }, collaborators: ["simon", "maya", "tomas"], agents: ["Planning agent"], }; const CTX_CONVERSATIONS = [ { id: "x1", title: "Story map workshop", people: ["simon", "maya"], agent: true, snippet: "Break the search epic into indexing, relevance, UI…", time: "2h", mine: true, needs: false, joined: true }, { id: "x2", title: "Estimation pass on epics", people: ["simon", "tomas"], agent: true, snippet: "Reindex job is the long pole — 8 pts.", time: "1d", mine: false, needs: true, joined: true }, { id: "x3", title: "Acceptance criteria · relevance", people: ["maya"], agent: true, snippet: "Proposing nDCG@10 ≥ 0.8 as the gate.", time: "2d", mine: false, needs: false, joined: false }, { id: "x4", title: "Edge cases · multi-language", people: ["tomas"], agent: true, snippet: "CJK tokenization changes the analyzer.", time: "4d", mine: false, needs: false, joined: false }, ]; // Related ENTITIES (side-panel navigation) const RELATED = { Children: [ { id: "r1", name: "TEK-512 · Reindex job", kind: "story" }, { id: "r2", name: "TEK-518 · Language analyzer", kind: "story" }, { id: "r3", name: "TEK-520 · Relevance eval harness", kind: "story" }, ], Parents: [{ id: "r4", name: "Unified Search Revamp", kind: "initiative" }], Siblings: [ { id: "r5", name: "Architecture · ADR", kind: "collateral" }, { id: "r6", name: "PRD", kind: "collateral" }, ], }; const CTX_THREAD = [ { role: "user", who: "simon", md: "Draft the epic breakdown from the approved PRD and architecture. Relevance needs a measurable acceptance criterion." }, { role: "agent", md: "I split the work into **three epics** — **Indexing** (4 stories), **Relevance** (4 stories), and **Result UI** (3 stories) — **11 stories** total. The Relevance epic carries a measurable AC: `nDCG@10 ≥ 0.8` on the curated eval set.\n\nSee the **Epic breakdown** in the Results panel →" }, { role: "user", who: "maya", md: "Good. Lay out the individual stories with point estimates so we can see the weight." }, { role: "agent", md: "Here's the full **story table** — 11 stories with estimates. The **reindex job (TEK-512)** is the heaviest at **8 points**; the index schema and relevance ranker are 5 each, and the result-card UI and language analyzer are 3 each.\n\nThe **story table** is on the right →" }, { role: "user", who: "tomas", md: "Which of these is the critical path? I'm worried the reindex blocks everything." }, { role: "agent", md: "You're right. The **critical path** runs **Schema → Reindex → Ranker → Eval**. **TEK-512 (Reindex job, 8 pts)** is the long pole — the ranker and eval harness can't start until the reindex lands.\n\nSee the **critical-path map** →" }, { role: "user", who: "maya", md: "Add a story for the multi-language analyzer — Tomas raised CJK tokenization in the edge-case chat." }, { role: "agent", md: "Added **TEK-518 “Language-aware analyzer (incl. CJK)”** under the **Indexing** epic, estimated at **3 points**, and cited the multi-language edge-case conversation. The default analyzer mis-splits CJK, so we need a per-locale analyzer for indexing and query tokenization to match.\n\nThe **story card** is on the right →" }, { role: "user", who: "simon", md: "Before we commit the plan, what's the implementation risk on the delivery branch?" }, { role: "agent", md: "I ran an **implementation-risk** pass on `features/new-chat-frontend` — overall **68/100**. Two **high** risks: a race condition between streaming chunks and the optimistic message, and virtualization breaking scroll-to-bottom on tool-call expansion. Plus a medium-risk pinned-context migration with **no backfill**.\n\nFull breakdown — the **Implementation risk** widget on the right →" }, { role: "user", who: "simon", md: "Understood. Once the Product Owner signs off we publish the epic set to Jira." }, { role: "agent", md: "The **epic set** is ready for review and the **story map** is in sync. When the exit gate is met, publish the epic set to **TEK** and I'll keep the estimates and critical-path updated as stories move." }, ]; const CTX_WIDGETS = [ { id: "w1", title: "Epic breakdown", kind: "epics", turn: 1, msg: 1 }, { id: "w2", title: "Story table (11)", kind: "stories", turn: 2, msg: 3 }, { id: "w3", title: "Critical-path map", kind: "path", turn: 3, msg: 5 }, { id: "w4", title: "Language analyzer story", kind: "story", turn: 4, msg: 7 }, { id: "w0", title: "Implementation risk", kind: "risk", turn: 5, msg: 9 }, ]; // data (JSON) preview for each widget — same widget/data concept as the chat-flow widgets const CTX_WIDGET_DATA = { w0: { story: "TEK-Search", overall_risk: 42, top: [{ id: "r1", severity: "medium", area: "reindex throughput" }, { id: "r2", severity: "low", area: "analyzer locale coverage" }] }, w1: { epics: [{ name: "Indexing", stories: 4 }, { name: "Relevance", stories: 4 }, { name: "Result UI", stories: 3 }] }, w2: { total: 11, stories: [["TEK-512", "Reindex job", 8], ["TEK-513", "Index schema", 5], ["TEK-514", "Relevance ranker", 5], ["TEK-518", "Language analyzer", 3], ["TEK-521", "Result card UI", 3]] }, w3: { path: ["Schema", "Reindex", "Ranker", "Eval"], critical: "TEK-512", points: 8 }, w4: { id: "TEK-518", title: "Language-aware analyzer (incl. CJK)", epic: "Indexing", points: 3, cites: "edge-cases conversation" }, }; const CTX_FOLLOWUPS = ["Estimate the Result-UI epic", "Draft acceptance criteria for indexing", "Find overlapping Jira stories", "Generate a test plan for the reindex", "Summarize open decisions"]; const GLOBAL_CONTEXT = [ { id: "g1", name: "Corporate vision", version: "v4", proposed: false }, { id: "g2", name: "Definition of Done", version: "v2", proposed: true }, { id: "g3", name: "Epic / story template", version: "v7", proposed: false }, { id: "g4", name: "Estimation rules", version: "v3", proposed: true }, ]; const LOCAL_CONTEXT = [ { id: "l1", name: "Relevance metric decision", kind: "md", snippet: "nDCG@10 ≥ 0.8 agreed on the curated eval set.", body: `## Relevance metric decision We agreed to gate the **Relevance** epic on \`nDCG@10 ≥ 0.8\`, measured on the curated eval set. - Eval set: **1,200** labelled queries - Re-scored nightly after each ranker change - Owner: Product Owner > Rationale: nDCG@10 tracks the search-satisfaction survey (r = 0.72), so it is a defensible exit gate. Open question: do we hold the gate for **per-locale** eval once the CJK analyzer lands?` }, { id: "l2", name: "Reindex throughput model", kind: "html", snippet: "Interactive estimate · nightly off-peak window.", body: `

Estimated reindex throughput against the nightly off-peak window (4h). The full corpus is 48M documents.

Workersdocs/sFull reindexFits window
41,8007.4 h✗
83,4003.9 h✓
124,9002.7 h✓
Recommended: 8 workers — clears the corpus with ~1h headroom.
` }, { id: "l3", name: "CJK tokenization note", kind: "md", snippet: "Default analyzer mis-splits CJK; needs per-locale analyzer.", body: `## CJK tokenization note The default analyzer splits CJK text on whitespace, which **mis-tokenizes** Chinese, Japanese and Korean queries. \`\`\` "検索エンジン" → ["検索エンジン"] // wrong: one token \`\`\` We need a **per-locale analyzer** so indexing and query tokenization use the same rules: - \`ja\` → kuromoji - \`zh\` → smartcn - \`ko\` → nori This is tracked as **TEK-518** under the Indexing epic.` }, ]; // Related CONTEXT (content surfaced from children) const CHILD_CONTEXT = [ { id: "cc1", name: "Throughput benchmark", from: "TEK-512 · Reindex job", kind: "html" }, { id: "cc2", name: "Analyzer locale matrix", from: "TEK-518 · Language analyzer", kind: "md" }, ]; const CTX_COLLATERALS = [ { id: "c1", name: "Indexing epic", type: "Epic", state: "Draft", system: "jira", active: true, kind: "md", body: `## Indexing epic\n\nBuild the search index pipeline so queries return in < 200ms p95.\n\n**Stories (4)**\n- TEK-512 · Reindex job — 8 pts (critical path)\n- TEK-513 · Index schema — 5 pts\n- TEK-518 · Language-aware analyzer (incl. CJK) — 3 pts\n- TEK-520 · Relevance eval harness — 3 pts\n\n> Exit gate: a full reindex clears the nightly off-peak window with 8 workers.` }, { id: "c2", name: "Relevance epic", type: "Epic", state: "Published", system: "jira", active: false, target: { label: "TEK · Relevance epic", url: "#" } }, { id: "c3", name: "Result UI epic", type: "Epic", state: "Draft", system: "jira", active: false }, { id: "c4", name: "PRD", type: "PRD", state: "Published", system: "confluence", active: false, target: { label: "Confluence · ENG", url: "#" } }, { id: "c5", name: "Architecture ADR", type: "ADR", state: "Published", system: "confluence", active: false, target: { label: "Confluence · ARCH", url: "#" } }, ]; const CTX_STATE = { Draft: { bg: "#f1f1ee", text: "#5a5a5a", dot: "#98A2B3" }, Published: { bg: "#e9f6ed", text: "#15803d", dot: "#16A34A" }, }; const CTX_SYS = { jira: { icon: "jira", color: "#2563eb", label: "Jira" }, confluence: { icon: "confluence", color: "#1c4f9c", label: "Confluence" }, git: { icon: "repo", color: "#0e0e10", label: "Git" }, teklens: { icon: "sparkles", color: "#8b5cf6", label: "Teklens" } }; function CtxAvatar({ who, size = 22 }) { const p = CTX_PEOPLE[who] || { initials: "?", tint: "#9aa0a6" }; return {p.initials}; } function CtxAgentAvatar({ size = 22 }) { return ; } function CtxStatePill({ state, sm }) { const s = CTX_STATE[state] || CTX_STATE.Draft; return {state}; } const relIcon = (k) => k === "story" ? "story" : k === "initiative" ? "grid" : "file"; // thin collapsed-panel rail function CtxRail({ icon, label, onExpand }) { return (
{label}
); } const clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v)); // Follow-up chip function FollowChip({ label, onClick }) { return ( ); } // Follow-ups row: render as many chips as fit one line; overflow into a … menu function CtxFollowUps({ items }) { const rowRef = useRef(null); const measRef = useRef(null); const [vis, setVis] = useState(items.length); const [open, setOpen] = useState(false); useEffect(() => { const compute = () => { const row = rowRef.current, meas = measRef.current; if (!row || !meas) return; const avail = row.clientWidth; const widths = [...meas.children].map((c) => c.offsetWidth); const gap = 6, moreW = 38; let used = 0, n = 0; for (let i = 0; i < widths.length; i++) { const add = widths[i] + (i > 0 ? gap : 0); const needMore = i < widths.length - 1; if (used + add + (needMore ? gap + moreW : 0) <= avail) { used += add; n++; } else break; } setVis(Math.max(1, n)); }; compute(); const ro = new ResizeObserver(compute); if (rowRef.current) ro.observe(rowRef.current); return () => ro.disconnect(); }, [items]); const shown = items.slice(0, vis); const hidden = items.slice(vis); return (
{/* hidden measurer */} {shown.map((f, i) => )} {hidden.length > 0 && (
{open && ( <>
setOpen(false)} />
{hidden.map((f, i) => ( ))}
)}
)}
); } // ===================================================================== function ContextWorkspace({ sideOpen = true }) { const [activeConvo, setActiveConvo] = useState("x1"); const [activeWidget, setActiveWidget] = useState(0); const [agentOpen, setAgentOpen] = useState(false); const [wView, setWView] = useState("widget"); // widget | data preview (same concept as chat widgets) const [composer, setComposer] = useState(""); const [relOpen, setRelOpen] = useState(true); const [chatsOpen, setChatsOpen] = useState(true); const [sec, setSec] = useState({ global: true, local: true, related: false, collaterals: true }); const tSec = (k) => setSec((o) => ({ ...o, [k]: !o[k] })); // panel collapse + resize const [col, setCol] = useState({ side: false, chat: false, panel: false }); const tCol = (k) => setCol((o) => ({ ...o, [k]: !o[k] })); const [pw, setPw] = useState({ side: 280, panel: 468 }); // combined right panel: tabs + local-context preview const [tab, setTab] = useState("results"); const [preview, setPreview] = useState(null); const openPreview = (item) => { setPreview(item); setTab("preview"); }; const previewItem = preview || CTX_COLLATERALS.find((c) => c.active); const compactTabs = pw.panel < 560; const convo = CTX_CONVERSATIONS.find((c) => c.id === activeConvo); // navigating a result widget scrolls the chat to the message that produced it const chatScrollRef = useRef(null); useEffect(() => { const el = chatScrollRef.current; if (!el) return; const wi = CTX_WIDGETS[activeWidget]; if (!wi) return; const target = el.querySelector(`[data-msg="${wi.msg}"]`); if (target) { const top = target.getBoundingClientRect().top - el.getBoundingClientRect().top + el.scrollTop - 16; el.scrollTop = Math.max(0, top); target.setAttribute("data-flash", "1"); setTimeout(() => target.removeAttribute("data-flash"), 900); } }, [activeWidget]); return (
{/* ============ PANEL 1 — SIDE: menu + create chat + Conversations + Related ============ */} {sideOpen && <>
Teklens AI
{/* Chats */} {chatsOpen && (
{CTX_CONVERSATIONS.map((c) => (
setActiveConvo(c.id)} className={`group w-full text-left rounded-md px-2 py-1.5 border cursor-pointer ${activeConvo === c.id ? "bg-white border-[#e6dfcd] shadow-[0_1px_2px_rgba(0,0,0,0.03)]" : "border-transparent hover:bg-white/60"}`}>
{c.needs && } {c.title} {c.mine && } {c.time}
{c.mine ? : c.joined ? : }
{c.snippet}
))}
)}
{/* Related entities (navigation) */} {relOpen && Object.entries(RELATED).map(([group, items]) => (
{group}
{items.map((r) => (
))}
))}
setPw((p) => ({ ...p, side: clamp(p.side + dx, 200, 620) }))} /> } {/* ============ PANEL 2 — CHAT: focus header + thread + follow-ups + input ============ */} {col.chat ? <> tCol("chat")} />
: <>
{/* focus / pinned entity header — shown as a pinned badge */}
{CTX_FOCUS.name}
{CTX_FOCUS.collaborators.map((w, i) => )}
{/* markdown conversation (no inline widgets) */}
{CTX_THREAD.map((m, i) => m.role === "user" ? (
{m.md}
) : (
Planning agent
))}
{/* follow-up actions — show as many as fit one line, rest in a … menu */}
{/* input — pinned sources/filters/agents (NOT the focus entity) */}
Planning agent Story Drafter TEK backlog