Pivot to text-first column-stack workspace + merge-with-review across AI artifacts
Workspace - Pivot from "set of open panes" to a Finder-style miller column stack: TopBar / LeftSidebar / [section → entity → entity ...] / pinned text editor. openPanesStore is now an ordered Column[] with pushFrom / closeFrom / setStack; only one top-level section is rooted at a time. - New entity column panes: Term, Block, Association, Constraint, Requirement, Finding. Click-through navigation truncates deeper columns automatically. - LeftSidebar surfaces a pending-count chip per section (single-glance navigation cue) and spins its analyze ↻ via SVG Spinner whenever the LLM is working — including server-initiated runs caught by the runs poll, not just user-triggered ones. Analyze pipeline + persistence - Unified `concepts` pass (taxonomy + glossary in one LLM call) replaces the two-pass setup. Server still accepts ?section=taxonomy|glossary and normalizes them for back-compat. - model / requirements / detection (assumptions, risks, inconsistencies) + cross-layer validation rules (X1–X4: stale term link, unlinked formalism, undefined linked term, prose-only term). - Persistence: NarrativeDocument, ModelSnapshot, ChangelogEntry, TaxonomyTerm, RequirementEntry, Finding, AnalysisRun. Re-runs MERGE instead of replace: gentle update on existing items, suggested on new, deprecated on missing — same idiom for every artifact kind. User pins preserve "kept" decisions across re-analyses. - Migrations: pivot_text_first, add_requirement_linked_term, term_review_state, review_state_for_reqs_and_findings, add_term_definition_pinned. Concept ↔ ontology integration - linkedTermId on Block / Association / Constraint / Requirement. PromoteToolbar lets the user formalize a concept inline: + Block / + Association / + Constraint / + Requirement, all routed through applyOps so undo/redo and SSE work for free. - decideElement op for in-canvas keep/discard on review-pending model elements. User-authored definitions - TermColumn definition is click-to-edit. Save (Cmd-Enter / blur), Cancel (Esc), Reset to AI suggestion when pinned. - definitionPinned flag on TaxonomyTerm: future Analyze runs leave the user's text alone. setTermDefinition repo function + POST /api/projects/[id]/terms/[termId]/definition endpoint. - mergeTaxonomySuggestion + applyGlossaryDefinitions both pin-aware. UX/UI - StatusChip: single component for all state idioms (suggested, deprecated, accepted, dismissed, resolved, severity, validation code, confidence, warn). Replaces 5+ ad-hoc badge classes. - PaneControls (PaneViewTabs + PaneFilterChip): separates view-mode toggles from filter chips so toggling Pending no longer flips you off the current view. - PaneEmpty: unified empty-state with title + hint + action. - PaneDrawer: collapsible groups for Pending / Discarded review; cards group as Kept (top) → Pending (bottom drawer) → Discarded (Findings only, hidden when empty). Restore action recovers dismissed/resolved findings. - ConceptCard unifies Tree and A–Z views in Concepts; only Tree parents carry the chevron (no empty placeholder offset). - Type + spacing tokens (--text-xs..xl, --space-1..6, --lh-tight/ui/ prose, --radius-*) replace every ad-hoc value. - Buttons standardized to body sans 500 (was a mishmash of mono / display). - Card shells unified across Concepts / Requirements / Findings. Cleanup - Removed: LeftRail, FindingsPanel, IssuesPanel, SocratesDock, ProposalCard, SlashMenu, SlashExtension, slashSuggestion, CanvasHeader, TaxonomyPane, GlossaryPane, TermDetail (popover; now TermColumn). - Section ids in openPanesStore: dropped taxonomy/glossary, added concepts. localStorage migration runs on hydrate. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
163
apps/web/components/editor/LeftSidebar.tsx
Normal file
163
apps/web/components/editor/LeftSidebar.tsx
Normal file
@@ -0,0 +1,163 @@
|
||||
// Single sidebar for the pivoted shell. Lists every section grouped under
|
||||
// Structure / Findings. Each row shows: title, count, last-run timestamp,
|
||||
// per-section [Analyze] button, and is itself clickable to toggle the matching
|
||||
// pane open in the main workspace.
|
||||
|
||||
"use client";
|
||||
|
||||
import { useOpenPanes, SECTION_TITLES, type SectionPaneId } from "../../lib/workspace/openPanesStore";
|
||||
import { useAnalysis } from "../../lib/workspace/analysisStore";
|
||||
import { Spinner } from "./Spinner";
|
||||
import { useState } from "react";
|
||||
|
||||
const STRUCTURE: SectionPaneId[] = ["concepts", "model", "requirements"];
|
||||
const FINDINGS: SectionPaneId[] = ["assumptions", "risks", "inconsistencies"];
|
||||
|
||||
export function LeftSidebar() {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
|
||||
if (collapsed) {
|
||||
return (
|
||||
<aside className="leftsidebar leftsidebar-collapsed" aria-label="Sections">
|
||||
<button className="leftsidebar-collapse-toggle" type="button" onClick={() => setCollapsed(false)} aria-label="Expand sidebar">
|
||||
›
|
||||
</button>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<aside className="leftsidebar" aria-label="Sections">
|
||||
<div className="leftsidebar-head">
|
||||
<span className="leftsidebar-title">Workspace</span>
|
||||
<button className="leftsidebar-collapse-toggle" type="button" onClick={() => setCollapsed(true)} aria-label="Collapse sidebar">
|
||||
‹
|
||||
</button>
|
||||
</div>
|
||||
<Group label="Structure" sections={STRUCTURE} />
|
||||
<Group label="Findings" sections={FINDINGS} />
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
function Group({ label, sections }: { label: string; sections: SectionPaneId[] }) {
|
||||
return (
|
||||
<div className="leftsidebar-group">
|
||||
<div className="leftsidebar-group-label">{label}</div>
|
||||
<ul className="leftsidebar-list">
|
||||
{sections.map(s => (
|
||||
<SectionRow key={s} id={s} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SectionRow({ id }: { id: SectionPaneId }) {
|
||||
const { isSectionOpen, toggleSection } = useOpenPanes();
|
||||
const { terms, requirements, findings, inFlight, runs, analyze } = useAnalysis();
|
||||
|
||||
const open = isSectionOpen(id);
|
||||
const count = sectionCount(id, { terms, requirements, findings });
|
||||
const pending = pendingCount(id, { terms, requirements, findings });
|
||||
// Spinner is on whenever:
|
||||
// - the user just clicked Analyze on this section (inFlight)
|
||||
// - the user clicked Analyze All
|
||||
// - the server has a "running" AnalysisRun for this section (catches
|
||||
// background runs like seed-finalize and the first-paint auto-analyze
|
||||
// that the local inFlight set doesn't know about). The analysisStore
|
||||
// polls `runs` every 3s while anything is running, so this stays
|
||||
// truthy until the run actually finishes.
|
||||
const running =
|
||||
inFlight.has(id) ||
|
||||
inFlight.has("all") ||
|
||||
(id === "concepts" && (inFlight.has("taxonomy") || inFlight.has("glossary"))) ||
|
||||
runs[id]?.status === "running" ||
|
||||
runs.all?.status === "running" ||
|
||||
(id === "concepts" &&
|
||||
(runs.taxonomy?.status === "running" || runs.glossary?.status === "running"));
|
||||
|
||||
// ONE number per row: pending if there's review work, otherwise total.
|
||||
// Runs the user the most useful signal first ("how much attention does
|
||||
// this section need?") and avoids the duplicate-count effect when
|
||||
// pending === total because nothing is accepted yet.
|
||||
const showPending = pending > 0;
|
||||
|
||||
return (
|
||||
<li className={`leftsidebar-row ${open ? "leftsidebar-row-open" : ""}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="leftsidebar-row-main"
|
||||
onClick={() => toggleSection(id)}
|
||||
aria-expanded={open}
|
||||
aria-label={
|
||||
showPending
|
||||
? `${SECTION_TITLES[id]} — ${pending} pending review`
|
||||
: `${SECTION_TITLES[id]} (${count})`
|
||||
}
|
||||
>
|
||||
<span className="leftsidebar-row-title">{SECTION_TITLES[id]}</span>
|
||||
{showPending ? (
|
||||
<span className="leftsidebar-pending-chip" title="Pending review">
|
||||
{pending}
|
||||
</span>
|
||||
) : (
|
||||
<span className="leftsidebar-row-count">{count}</span>
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`leftsidebar-analyze ${running ? "leftsidebar-analyze-running" : ""}`}
|
||||
title={running ? "Analyzing…" : `Re-run ${SECTION_TITLES[id]} analysis`}
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
void analyze(id);
|
||||
}}
|
||||
disabled={running}
|
||||
aria-label={running ? "Analyzing" : `Re-run ${SECTION_TITLES[id]} analysis`}
|
||||
>
|
||||
{running ? <Spinner /> : <span aria-hidden="true">↻</span>}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
function sectionCount(
|
||||
id: SectionPaneId,
|
||||
data: {
|
||||
terms: { id: string; status: string }[];
|
||||
requirements: { id: string; status: string }[];
|
||||
findings: { kind: string; status: string }[];
|
||||
}
|
||||
): number {
|
||||
if (id === "concepts") return data.terms.length;
|
||||
if (id === "model") return 0; // Model count is shown inside the pane itself.
|
||||
if (id === "requirements") return data.requirements.length;
|
||||
return data.findings.filter(f => f.kind === idToFindingKind(id)).length;
|
||||
}
|
||||
|
||||
/** Count items the user hasn't reviewed yet (suggested + deprecated). The
|
||||
* most useful navigation cue we can put in the sidebar — tells the user
|
||||
* where attention is needed at a glance. */
|
||||
function pendingCount(
|
||||
id: SectionPaneId,
|
||||
data: {
|
||||
terms: { status: string }[];
|
||||
requirements: { status: string }[];
|
||||
findings: { kind: string; status: string }[];
|
||||
}
|
||||
): number {
|
||||
const isPending = (s: string) => s === "suggested" || s === "deprecated";
|
||||
if (id === "concepts") return data.terms.filter(t => isPending(t.status)).length;
|
||||
if (id === "requirements") return data.requirements.filter(r => isPending(r.status)).length;
|
||||
if (id === "model") return 0; // Model pending count needs ModelStore — surfaced in the pane header.
|
||||
return data.findings.filter(f => f.kind === idToFindingKind(id) && isPending(f.status)).length;
|
||||
}
|
||||
|
||||
function idToFindingKind(id: SectionPaneId): string {
|
||||
if (id === "assumptions") return "assumption";
|
||||
if (id === "risks") return "risk";
|
||||
if (id === "inconsistencies") return "inconsistency";
|
||||
return "";
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user