bytelyst/learning_ai_notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): replace --ml-* (MindLyst) with --nl-* (NoteLett) CSS namespace across 18 files

Browse Source
This commit is contained in:
saravanakumardb1 2026-03-21 20:18:44 -07:00
parent f95ba73c31
commit 85968e7b2a
18 changed files with 222 additions and 222 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/src/app/(app)/dashboard/page.tsx
View File

@ -131,58 +131,58 @@ export default function DashboardPage() {
</button> </button>
} }
> >
<section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--ml-space-4)" }}> <section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--nl-space-4)" }}>
{summaryCards.map((card) => ( {summaryCards.map((card) => (
<Link key={card.id} href={card.href} className="surface-card" style={{ padding: "var(--ml-space-5)" }}> <Link key={card.id} href={card.href} className="surface-card" style={{ padding: "var(--nl-space-5)" }}>
<div style={{ color: "var(--ml-text-secondary)" }}>{card.label}</div> <div style={{ color: "var(--nl-text-secondary)" }}>{card.label}</div>
<div style={{ fontSize: "var(--ml-fs-3xl)", fontWeight: 700, marginTop: "var(--ml-space-2)" }}>{card.value}</div> <div style={{ fontSize: "var(--nl-fs-3xl)", fontWeight: 700, marginTop: "var(--nl-space-2)" }}>{card.value}</div>
</Link> </Link>
))} ))}
</section> </section>
<section style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.1fr) minmax(320px, 0.9fr)", gap: "var(--ml-space-4)" }}> <section style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.1fr) minmax(320px, 0.9fr)", gap: "var(--nl-space-4)" }}>
<section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ fontSize: "var(--ml-fs-xl)", fontWeight: 700 }}>Saved views</div> <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Saved views</div>
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
{savedViews.map((view) => ( {savedViews.map((view) => (
<Link <Link
key={view.id} key={view.id}
href={getSavedViewHref(view)} href={getSavedViewHref(view)}
className="surface-muted" className="surface-muted"
style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }} style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
> >
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
<strong>{view.name}</strong> <strong>{view.name}</strong>
<span className="badge">{view.scope}</span> <span className="badge">{view.scope}</span>
</div> </div>
<div style={{ color: "var(--ml-text-secondary)" }}>{view.description}</div> <div style={{ color: "var(--nl-text-secondary)" }}>{view.description}</div>
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
<span style={{ color: "var(--ml-text-secondary)" }}>{view.query}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{view.query}</span>
<span style={{ color: "var(--ml-text-secondary)" }}>{view.resultCount} results</span> <span style={{ color: "var(--nl-text-secondary)" }}>{view.resultCount} results</span>
</div> </div>
</Link> </Link>
))} ))}
</div> </div>
</section> </section>
<section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ fontSize: "var(--ml-fs-xl)", fontWeight: 700 }}>Operator workflows</div> <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Operator workflows</div>
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
{operatorWorkflows.map((workflow) => ( {operatorWorkflows.map((workflow) => (
<Link <Link
key={workflow.id} key={workflow.id}
href={getWorkflowHref(workflow)} href={getWorkflowHref(workflow)}
className="surface-muted" className="surface-muted"
style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }} style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
> >
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
<strong>{workflow.name}</strong> <strong>{workflow.name}</strong>
<span className="badge">{workflow.status}</span> <span className="badge">{workflow.status}</span>
</div> </div>
<div style={{ color: "var(--ml-text-secondary)" }}>Owner: {workflow.owner}</div> <div style={{ color: "var(--nl-text-secondary)" }}>Owner: {workflow.owner}</div>
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
<span style={{ color: "var(--ml-text-secondary)" }}>Queue: {workflow.queueCount}</span> <span style={{ color: "var(--nl-text-secondary)" }}>Queue: {workflow.queueCount}</span>
<span style={{ color: "var(--ml-text-secondary)" }}>SLA: {workflow.sla}</span> <span style={{ color: "var(--nl-text-secondary)" }}>SLA: {workflow.sla}</span>
</div> </div>
</Link> </Link>
))} ))}
@ -190,22 +190,22 @@ export default function DashboardPage() {
</section> </section>
</section> </section>
<section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ fontSize: "var(--ml-fs-xl)", fontWeight: 700 }}>Recent note activity</div> <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Recent note activity</div>
{error ? <div style={{ color: "var(--ml-text-secondary)" }}>{error}</div> : null} {error ? <div style={{ color: "var(--nl-text-secondary)" }}>{error}</div> : null}
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
{recentNotes.map((note) => ( {recentNotes.map((note) => (
<div key={note.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}> <div key={note.id} className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
<Link href={`/notes/${note.id}`}> <Link href={`/notes/${note.id}`}>
<strong>{note.title}</strong> <strong>{note.title}</strong>
</Link> </Link>
<span style={{ color: "var(--ml-text-secondary)" }}>{note.updatedBy}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{note.updatedBy}</span>
</div> </div>
<Link href={`/notes/${note.id}`} style={{ color: "var(--ml-text-secondary)" }}> <Link href={`/notes/${note.id}`} style={{ color: "var(--nl-text-secondary)" }}>
{note.excerpt} {note.excerpt}
</Link> </Link>
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
{note.tags.map((tag) => ( {note.tags.map((tag) => (
<Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge"> <Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge">
#{tag} #{tag}

10
web/src/app/(app)/notes/[noteId]/page.tsx
View File

@ -148,7 +148,7 @@ export default function NoteDetailPage() {
description="Editable note surface with metadata, linked context, tasks, artifacts, and review history." description="Editable note surface with metadata, linked context, tasks, artifacts, and review history."
actions={<div className="badge">Loading</div>} actions={<div className="badge">Loading</div>}
> >
<section className="surface-card" style={{ padding: "var(--ml-space-6)", color: "var(--ml-text-secondary)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-6)", color: "var(--nl-text-secondary)" }}>
{error ?? "Loading note…"} {error ?? "Loading note…"}
</section> </section>
</AppShell> </AppShell>
@ -160,7 +160,7 @@ export default function NoteDetailPage() {
title={note.title} title={note.title}
description="Editable note surface with metadata, linked context, tasks, artifacts, and review history." description="Editable note surface with metadata, linked context, tasks, artifacts, and review history."
actions={ actions={
<div style={{ display: "flex", gap: "var(--ml-space-2)", alignItems: "center" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", alignItems: "center" }}>
{isSaving ? ( {isSaving ? (
<div className="badge">Saving</div> <div className="badge">Saving</div>
) : ( ) : (
@ -182,11 +182,11 @@ export default function NoteDetailPage() {
</div> </div>
} }
> >
<div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.7fr) minmax(320px, 1fr)", gap: "var(--ml-space-4)" }}> <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.7fr) minmax(320px, 1fr)", gap: "var(--nl-space-4)" }}>
<NoteEditor note={note} onSave={handleSave} isSaving={isSaving} /> <NoteEditor note={note} onSave={handleSave} isSaving={isSaving} />
<aside style={{ display: "grid", gap: "var(--ml-space-4)" }}> <aside style={{ display: "grid", gap: "var(--nl-space-4)" }}>
{error ? <div className="surface-card" style={{ padding: "var(--ml-space-4)", color: "var(--ml-text-secondary)" }}>{error}</div> : null} {error ? <div className="surface-card" style={{ padding: "var(--nl-space-4)", color: "var(--nl-text-secondary)" }}>{error}</div> : null}
<MetadataPanel note={note} /> <MetadataPanel note={note} />
<LinkedNotesPanel linkedNotes={note.linkedNotes} /> <LinkedNotesPanel linkedNotes={note.linkedNotes} />
<TaskReviewPanel tasks={note.tasks} onCreate={handleCreateTask} isCreating={isCreatingTask} /> <TaskReviewPanel tasks={note.tasks} onCreate={handleCreateTask} isCreating={isCreatingTask} />

58
web/src/app/(app)/reviews/page.tsx
View File

@ -170,20 +170,20 @@ export default function ReviewsPage() {
description="Approval queue, proposal comparison, and audit-oriented review surfaces for agent-mediated edits." description="Approval queue, proposal comparison, and audit-oriented review surfaces for agent-mediated edits."
actions={<div className="badge">Operator workflow shell</div>} actions={<div className="badge">Operator workflow shell</div>}
> >
<section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--ml-space-4)" }}> <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-space-4)" }}>
<aside className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}> <aside className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ fontWeight: 700 }}>Operator workflows</div> <div style={{ fontWeight: 700 }}>Operator workflows</div>
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
{operatorWorkflows.map((workflow) => ( {operatorWorkflows.map((workflow) => (
<Link <Link
key={workflow.id} key={workflow.id}
href={getWorkflowHref(workflow)} href={getWorkflowHref(workflow)}
className="surface-muted" className="surface-muted"
style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }} style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
> >
<strong>{workflow.name}</strong> <strong>{workflow.name}</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>Owner: {workflow.owner}</span> <span style={{ color: "var(--nl-text-secondary)" }}>Owner: {workflow.owner}</span>
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
<span className="badge">{workflow.status}</span> <span className="badge">{workflow.status}</span>
<span className="badge">Queue: {workflow.queueCount}</span> <span className="badge">Queue: {workflow.queueCount}</span>
<span className="badge">SLA {workflow.sla}</span> <span className="badge">SLA {workflow.sla}</span>
@ -193,10 +193,10 @@ export default function ReviewsPage() {
</div> </div>
</aside> </aside>
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
<div style={{ fontWeight: 700 }}>Approval queue</div> <div style={{ fontWeight: 700 }}>Approval queue</div>
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap", alignItems: "center" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap", alignItems: "center" }}>
{batchMode ? ( {batchMode ? (
<> <>
<span className="badge">{selectedBatchIds.size} selected</span> <span className="badge">{selectedBatchIds.size} selected</span>
@ -208,20 +208,20 @@ export default function ReviewsPage() {
<span className="badge">status:pending</span> <span className="badge">status:pending</span>
</div> </div>
</div> </div>
{error ? <div style={{ color: "var(--ml-text-secondary)" }}>{error}</div> : null} {error ? <div style={{ color: "var(--nl-text-secondary)" }}>{error}</div> : null}
{batchMode ? ( {batchMode ? (
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
<button <button
type="button" type="button"
disabled={isSubmitting} disabled={isSubmitting}
onClick={() => void handleBatchDecision("approved")} onClick={() => void handleBatchDecision("approved")}
style={{ style={{
border: "none", border: "none",
borderRadius: "var(--ml-radius-md)", borderRadius: "var(--nl-radius-md)",
padding: "8px 16px", padding: "8px 16px",
background: "var(--ml-accent-primary)", background: "var(--nl-accent-primary)",
color: "var(--ml-text-primary)", color: "var(--nl-text-primary)",
fontWeight: 600, fontWeight: 600,
cursor: "pointer", cursor: "pointer",
}} }}
@ -234,8 +234,8 @@ export default function ReviewsPage() {
onClick={() => void handleBatchDecision("rejected")} onClick={() => void handleBatchDecision("rejected")}
className="surface-muted" className="surface-muted"
style={{ style={{
border: "1px solid var(--ml-border-subtle)", border: "1px solid var(--nl-border-subtle)",
borderRadius: "var(--ml-radius-md)", borderRadius: "var(--nl-radius-md)",
padding: "8px 16px", padding: "8px 16px",
cursor: "pointer", cursor: "pointer",
}} }}
@ -245,7 +245,7 @@ export default function ReviewsPage() {
</div> </div>
) : null} ) : null}
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
{approvalQueue.map((item) => ( {approvalQueue.map((item) => (
<button <button
key={item.id} key={item.id}
@ -253,17 +253,17 @@ export default function ReviewsPage() {
className="surface-muted" className="surface-muted"
onClick={() => batchMode ? toggleBatchItem(item.id) : setSelectedApprovalId(item.id)} onClick={() => batchMode ? toggleBatchItem(item.id) : setSelectedApprovalId(item.id)}
style={{ style={{
padding: "var(--ml-space-4)", padding: "var(--nl-space-4)",
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
gap: "var(--ml-space-3)", gap: "var(--nl-space-3)",
alignItems: "center", alignItems: "center",
flexWrap: "wrap", flexWrap: "wrap",
textAlign: "left", textAlign: "left",
width: "100%", width: "100%",
borderColor: batchMode borderColor: batchMode
? selectedBatchIds.has(item.id) ? "var(--ml-accent-primary)" : undefined ? selectedBatchIds.has(item.id) ? "var(--nl-accent-primary)" : undefined
: featuredProposal?.id === item.id ? "var(--ml-accent-primary)" : undefined, : featuredProposal?.id === item.id ? "var(--nl-accent-primary)" : undefined,
background: batchMode background: batchMode
? selectedBatchIds.has(item.id) ? "rgba(90, 140, 255, 0.12)" : undefined ? selectedBatchIds.has(item.id) ? "rgba(90, 140, 255, 0.12)" : undefined
: featuredProposal?.id === item.id ? "rgba(90, 140, 255, 0.12)" : undefined, : featuredProposal?.id === item.id ? "rgba(90, 140, 255, 0.12)" : undefined,
@ -271,9 +271,9 @@ export default function ReviewsPage() {
> >
<div style={{ display: "grid", gap: 4 }}> <div style={{ display: "grid", gap: 4 }}>
<strong>{item.title}</strong> <strong>{item.title}</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>{item.owner}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{item.owner}</span>
</div> </div>
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
{batchMode ? ( {batchMode ? (
<span className="badge">{selectedBatchIds.has(item.id) ? "selected" : "unselected"}</span> <span className="badge">{selectedBatchIds.has(item.id) ? "selected" : "unselected"}</span>
) : null} ) : null}
@ -286,7 +286,7 @@ export default function ReviewsPage() {
</section> </section>
</section> </section>
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<label htmlFor="review-note" style={{ fontWeight: 600 }}>Review note</label> <label htmlFor="review-note" style={{ fontWeight: 600 }}>Review note</label>
<textarea <textarea
id="review-note" id="review-note"
@ -296,11 +296,11 @@ export default function ReviewsPage() {
rows={2} rows={2}
style={{ style={{
width: "100%", width: "100%",
padding: "var(--ml-space-3)", padding: "var(--nl-space-3)",
background: "var(--ml-bg-elevated)", background: "var(--nl-bg-elevated)",
color: "var(--ml-text-primary)", color: "var(--nl-text-primary)",
border: "1px solid var(--ml-border-subtle)", border: "1px solid var(--nl-border-subtle)",
borderRadius: "var(--ml-radius-md)", borderRadius: "var(--nl-radius-md)",
resize: "vertical", resize: "vertical",
fontFamily: "inherit", fontFamily: "inherit",
fontSize: "0.875rem", fontSize: "0.875rem",

50
web/src/app/(app)/search/page.tsx
View File

@ -87,8 +87,8 @@ function SearchPageInner() {
description="Lexical search, tag filtering, and retrieval entry points. Semantic ranking and explainability remain follow-up work." description="Lexical search, tag filtering, and retrieval entry points. Semantic ranking and explainability remain follow-up work."
actions={<div className="badge">Backend-backed note search</div>} actions={<div className="badge">Backend-backed note search</div>}
> >
<section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--ml-space-4)" }}> <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-space-4)" }}>
<aside className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}> <aside className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
<div style={{ fontWeight: 700 }}>Saved searches</div> <div style={{ fontWeight: 700 }}>Saved searches</div>
{query.trim() ? ( {query.trim() ? (
@ -102,22 +102,22 @@ function SearchPageInner() {
</button> </button>
) : null} ) : null}
</div> </div>
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
{savedViews.map((view) => ( {savedViews.map((view) => (
<div <div
key={view.id} key={view.id}
className="surface-muted" className="surface-muted"
style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }} style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
> >
<div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
<Link href={`/search?q=${encodeURIComponent(view.query)}`} style={{ display: "grid", gap: "var(--ml-space-2)" }}> <Link href={`/search?q=${encodeURIComponent(view.query)}`} style={{ display: "grid", gap: "var(--nl-space-2)" }}>
<strong>{view.name}</strong> <strong>{view.name}</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>{view.query}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{view.query}</span>
</Link> </Link>
<button <button
type="button" type="button"
onClick={() => void handleDeleteSavedView(view.id)} onClick={() => void handleDeleteSavedView(view.id)}
style={{ color: "var(--ml-text-secondary)", background: "none", border: "none", cursor: "pointer", fontSize: "0.75rem" }} style={{ color: "var(--nl-text-secondary)", background: "none", border: "none", cursor: "pointer", fontSize: "0.75rem" }}
> >
Remove Remove
</button> </button>
@ -125,20 +125,20 @@ function SearchPageInner() {
</div> </div>
))} ))}
{savedViews.length === 0 ? ( {savedViews.length === 0 ? (
<span style={{ color: "var(--ml-text-secondary)", fontSize: "0.875rem" }}>No saved searches yet.</span> <span style={{ color: "var(--nl-text-secondary)", fontSize: "0.875rem" }}>No saved searches yet.</span>
) : null} ) : null}
</div> </div>
<div style={{ display: "grid", gap: "var(--ml-space-2)" }}> <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
<strong>Retrieval filters</strong> <strong>Retrieval filters</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>workspace:any</span> <span style={{ color: "var(--nl-text-secondary)" }}>workspace:any</span>
<span style={{ color: "var(--ml-text-secondary)" }}>status:active + draft</span> <span style={{ color: "var(--nl-text-secondary)" }}>status:active + draft</span>
<span style={{ color: "var(--ml-text-secondary)" }}>relationship scope: linked + cited</span> <span style={{ color: "var(--nl-text-secondary)" }}>relationship scope: linked + cited</span>
<span style={{ color: "var(--ml-text-secondary)" }}>explainability: matched fields</span> <span style={{ color: "var(--nl-text-secondary)" }}>explainability: matched fields</span>
</div> </div>
</aside> </aside>
<section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
<input <input
aria-label="Search notes" aria-label="Search notes"
className="input-shell" className="input-shell"
@ -146,30 +146,30 @@ function SearchPageInner() {
value={query} value={query}
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
/> />
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
<span className="badge">workspace:all</span> <span className="badge">workspace:all</span>
<span className="badge">status:active</span> <span className="badge">status:active</span>
<span className="badge">source:manual+agent</span> <span className="badge">source:manual+agent</span>
<span className="badge">matched:title+body</span> <span className="badge">matched:title+body</span>
</div> </div>
{error ? <div style={{ color: "var(--ml-text-secondary)" }}>{error}</div> : null} {error ? <div style={{ color: "var(--nl-text-secondary)" }}>{error}</div> : null}
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
{notes.map((note) => ( {notes.map((note) => (
<div key={note.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}> <div key={note.id} className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
<div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) repeat(3, minmax(100px, auto))", gap: "var(--ml-space-3)", alignItems: "start" }}> <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) repeat(3, minmax(100px, auto))", gap: "var(--nl-space-3)", alignItems: "start" }}>
<Link href={`/notes/${note.id}`} style={{ display: "grid", gap: "var(--ml-space-2)" }}> <Link href={`/notes/${note.id}`} style={{ display: "grid", gap: "var(--nl-space-2)" }}>
<strong>{note.title}</strong> <strong>{note.title}</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>{note.excerpt}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{note.excerpt}</span>
</Link> </Link>
<Link href={`/search?q=${encodeURIComponent(note.status)}`} style={{ color: "var(--ml-text-secondary)" }}> <Link href={`/search?q=${encodeURIComponent(note.status)}`} style={{ color: "var(--nl-text-secondary)" }}>
{note.status} {note.status}
</Link> </Link>
<span style={{ color: "var(--ml-text-secondary)" }}>{note.updatedBy}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{note.updatedBy}</span>
<Link href={`/search?q=${encodeURIComponent(note.workspaceId.replace("workspace-", ""))}`} style={{ color: "var(--ml-text-secondary)" }}> <Link href={`/search?q=${encodeURIComponent(note.workspaceId.replace("workspace-", ""))}`} style={{ color: "var(--nl-text-secondary)" }}>
{note.workspaceId.replace("workspace-", "")} {note.workspaceId.replace("workspace-", "")}
</Link> </Link>
</div> </div>
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
{note.tags.map((tag) => ( {note.tags.map((tag) => (
<Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge"> <Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge">
#{tag} #{tag}

14
web/src/app/(app)/settings/page.tsx
View File

@ -7,22 +7,22 @@ export default function SettingsPage() {
description="Auth/session controls, integration defaults, and workspace-level product preferences." description="Auth/session controls, integration defaults, and workspace-level product preferences."
actions={<div className="badge">Auth fallback active</div>} actions={<div className="badge">Auth fallback active</div>}
> >
<section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "var(--ml-space-4)" }}> <section style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "var(--nl-space-4)" }}>
<article className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}> <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<strong>Authentication</strong> <strong>Authentication</strong>
<div style={{ color: "var(--ml-text-secondary)" }}> <div style={{ color: "var(--nl-text-secondary)" }}>
Initial shell uses a demo session fallback until platform auth contracts are finalized. Initial shell uses a demo session fallback until platform auth contracts are finalized.
</div> </div>
</article> </article>
<article className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}> <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<strong>Telemetry & diagnostics</strong> <strong>Telemetry & diagnostics</strong>
<div style={{ color: "var(--ml-text-secondary)" }}> <div style={{ color: "var(--nl-text-secondary)" }}>
Both clients are initialized on app boot with best-effort defaults and no hard dependency on backend readiness. Both clients are initialized on app boot with best-effort defaults and no hard dependency on backend readiness.
</div> </div>
</article> </article>
<article className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}> <article className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<strong>Deferred configuration</strong> <strong>Deferred configuration</strong>
<div style={{ color: "var(--ml-text-secondary)" }}> <div style={{ color: "var(--nl-text-secondary)" }}>
Feature flags, blob upload policies, saved views, and extraction preferences remain follow-up work. Feature flags, blob upload policies, saved views, and extraction preferences remain follow-up work.
</div> </div>
</article> </article>

38
web/src/app/(app)/workspaces/page.tsx
View File

@ -118,27 +118,27 @@ function WorkspacesPageInner() {
</button> </button>
} }
> >
<section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--ml-space-4)" }}> <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-space-4)" }}>
<aside className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}> <aside className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ fontWeight: 700 }}>Saved views</div> <div style={{ fontWeight: 700 }}>Saved views</div>
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
{savedViews.map((view) => ( {savedViews.map((view) => (
<Link <Link
key={view.id} key={view.id}
href={view.id === "workspace-shared" ? "/workspaces?q=shared" : "/workspaces"} href={view.id === "workspace-shared" ? "/workspaces?q=shared" : "/workspaces"}
className="surface-muted" className="surface-muted"
style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }} style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
> >
<strong>{view.name}</strong> <strong>{view.name}</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>{view.description}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{view.description}</span>
<span className="badge">{view.resultCount} results</span> <span className="badge">{view.resultCount} results</span>
</Link> </Link>
))} ))}
</div> </div>
</aside> </aside>
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
<input <input
aria-label="Filter workspaces" aria-label="Filter workspaces"
className="input-shell" className="input-shell"
@ -146,7 +146,7 @@ function WorkspacesPageInner() {
value={query} value={query}
onChange={(event) => setQuery(event.target.value)} onChange={(event) => setQuery(event.target.value)}
/> />
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
<span className="badge">owner:any</span> <span className="badge">owner:any</span>
<span className="badge">visibility:any</span> <span className="badge">visibility:any</span>
<span className="badge">sort:updated</span> <span className="badge">sort:updated</span>
@ -156,41 +156,41 @@ function WorkspacesPageInner() {
</section> </section>
{error ? ( {error ? (
<section className="surface-card" style={{ padding: "var(--ml-space-6)", color: "var(--ml-text-secondary)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-6)", color: "var(--nl-text-secondary)" }}>
{error} {error}
</section> </section>
) : null} ) : null}
<section style={{ display: "grid", gap: "var(--ml-space-4)" }}> <section style={{ display: "grid", gap: "var(--nl-space-4)" }}>
{filteredWorkspaces.map((workspace) => { {filteredWorkspaces.map((workspace) => {
const workspaceNotes = notesByWorkspace.get(workspace.id) ?? []; const workspaceNotes = notesByWorkspace.get(workspace.id) ?? [];
return ( return (
<article key={workspace.id} className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}> <article key={workspace.id} className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-4)", flexWrap: "wrap" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-4)", flexWrap: "wrap" }}>
<div> <div>
<div style={{ fontSize: "var(--ml-fs-xl)", fontWeight: 700 }}>{workspace.name}</div> <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>{workspace.name}</div>
<div style={{ color: "var(--ml-text-secondary)", marginTop: 6 }}>{workspace.description}</div> <div style={{ color: "var(--nl-text-secondary)", marginTop: 6 }}>{workspace.description}</div>
</div> </div>
<div style={{ display: "grid", gap: 8, justifyItems: "end" }}> <div style={{ display: "grid", gap: 8, justifyItems: "end" }}>
<Link href={`/workspaces?q=${encodeURIComponent(workspace.visibility)}`} className="badge"> <Link href={`/workspaces?q=${encodeURIComponent(workspace.visibility)}`} className="badge">
{workspace.visibility} {workspace.visibility}
</Link> </Link>
<Link href={`/workspaces?q=${encodeURIComponent(workspace.owner)}`} style={{ color: "var(--ml-text-secondary)" }}> <Link href={`/workspaces?q=${encodeURIComponent(workspace.owner)}`} style={{ color: "var(--nl-text-secondary)" }}>
Owner: {workspace.owner} Owner: {workspace.owner}
</Link> </Link>
</div> </div>
</div> </div>
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
{workspace.tags.map((tag) => ( {workspace.tags.map((tag) => (
<Link key={tag} href={`/workspaces?q=${encodeURIComponent(tag)}`} className="badge"> <Link key={tag} href={`/workspaces?q=${encodeURIComponent(tag)}`} className="badge">
#{tag} #{tag}
</Link> </Link>
))} ))}
</div> </div>
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
{workspaceNotes.map((note) => ( {workspaceNotes.map((note) => (
<Link key={note.id} href={`/notes/${note.id}`} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}> <Link key={note.id} href={`/notes/${note.id}`} className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
<strong>{note.title}</strong> <strong>{note.title}</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>{note.excerpt}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{note.excerpt}</span>
</Link> </Link>
))} ))}
</div> </div>

38
web/src/app/globals.css
View File

@ -5,15 +5,15 @@
} }
html { html {
background: var(--ml-bg-canvas); background: var(--nl-bg-canvas);
} }
body { body {
margin: 0; margin: 0;
min-height: 100vh; min-height: 100vh;
background: linear-gradient(180deg, var(--ml-bg-canvas) 0%, #0b1020 100%); background: linear-gradient(180deg, var(--nl-bg-canvas) 0%, #0b1020 100%);
color: var(--ml-text-primary); color: var(--nl-text-primary);
font-family: var(--ml-font-body); font-family: var(--nl-font-body);
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
@ -41,26 +41,26 @@ button {
} }
.sidebar { .sidebar {
border-right: 1px solid var(--ml-border-default); border-right: 1px solid var(--nl-border-default);
background: rgba(12, 17, 31, 0.82); background: rgba(12, 17, 31, 0.82);
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
} }
.main-panel { .main-panel {
min-width: 0; min-width: 0;
padding: var(--ml-space-8); padding: var(--nl-space-8);
} }
.surface-card { .surface-card {
border: 1px solid var(--ml-border-default); border: 1px solid var(--nl-border-default);
border-radius: var(--ml-radius-md); border-radius: var(--nl-radius-md);
background: rgba(18, 23, 37, 0.86); background: rgba(18, 23, 37, 0.86);
box-shadow: var(--ml-elevation-md); box-shadow: var(--nl-elevation-md);
} }
.surface-muted { .surface-muted {
border: 1px solid var(--ml-border-default); border: 1px solid var(--nl-border-default);
border-radius: var(--ml-radius-sm); border-radius: var(--nl-radius-sm);
background: rgba(26, 35, 53, 0.72); background: rgba(26, 35, 53, 0.72);
} }
@ -68,25 +68,25 @@ button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
border-radius: var(--ml-radius-pill); border-radius: var(--nl-radius-pill);
padding: 6px 10px; padding: 6px 10px;
background: rgba(90, 140, 255, 0.14); background: rgba(90, 140, 255, 0.14);
color: var(--ml-text-primary); color: var(--nl-text-primary);
font-size: var(--ml-fs-sm); font-size: var(--nl-fs-sm);
} }
.input-shell { .input-shell {
width: 100%; width: 100%;
border: 1px solid var(--ml-border-default); border: 1px solid var(--nl-border-default);
border-radius: var(--ml-radius-sm); border-radius: var(--nl-radius-sm);
background: rgba(10, 15, 28, 0.88); background: rgba(10, 15, 28, 0.88);
color: var(--ml-text-primary); color: var(--nl-text-primary);
padding: 12px 14px; padding: 12px 14px;
} }
.page-grid { .page-grid {
display: grid; display: grid;
gap: var(--ml-space-6); gap: var(--nl-space-6);
} }
@media (max-width: 980px) { @media (max-width: 980px) {
@ -96,6 +96,6 @@ button {
.sidebar { .sidebar {
border-right: 0; border-right: 0;
border-bottom: 1px solid var(--ml-border-default); border-bottom: 1px solid var(--nl-border-default);
} }
} }

6
web/src/app/not-found.tsx
View File

@ -2,11 +2,11 @@ import Link from "next/link";
export default function NotFoundPage() { export default function NotFoundPage() {
return ( return (
<main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--ml-space-8)" }}> <main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--nl-space-8)" }}>
<section className="surface-card" style={{ padding: "var(--ml-space-8)", display: "grid", gap: "var(--ml-space-4)", maxWidth: 520 }}> <section className="surface-card" style={{ padding: "var(--nl-space-8)", display: "grid", gap: "var(--nl-space-4)", maxWidth: 520 }}>
<div className="badge">Missing note or route</div> <div className="badge">Missing note or route</div>
<h1 style={{ margin: 0 }}>Not found</h1> <h1 style={{ margin: 0 }}>Not found</h1>
<p style={{ margin: 0, color: "var(--ml-text-secondary)" }}> <p style={{ margin: 0, color: "var(--nl-text-secondary)" }}>
The requested note or view does not exist or is no longer available for your current workspace access. The requested note or view does not exist or is no longer available for your current workspace access.
</p> </p>
<Link href="/dashboard" className="surface-muted" style={{ padding: "12px 16px", width: "fit-content" }}> <Link href="/dashboard" className="surface-muted" style={{ padding: "12px 16px", width: "fit-content" }}>

12
web/src/app/page.tsx
View File

@ -2,18 +2,18 @@ import Link from "next/link";
export default function HomePage() { export default function HomePage() {
return ( return (
<main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--ml-space-8)" }}> <main style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: "var(--nl-space-8)" }}>
<section className="surface-card" style={{ maxWidth: 760, padding: "var(--ml-space-8)", display: "grid", gap: "var(--ml-space-5)" }}> <section className="surface-card" style={{ maxWidth: 760, padding: "var(--nl-space-8)", display: "grid", gap: "var(--nl-space-5)" }}>
<div className="badge">Backend-backed web surface</div> <div className="badge">Backend-backed web surface</div>
<div style={{ display: "grid", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
<h1 style={{ margin: 0, fontFamily: "var(--ml-font-display)", fontSize: "var(--ml-fs-3xl)" }}> <h1 style={{ margin: 0, fontFamily: "var(--nl-font-display)", fontSize: "var(--nl-fs-3xl)" }}>
NoteLett NoteLett
</h1> </h1>
<p style={{ margin: 0, color: "var(--ml-text-secondary)", lineHeight: 1.6 }}> <p style={{ margin: 0, color: "var(--nl-text-secondary)", lineHeight: 1.6 }}>
Structured notes workspace for humans and agents with search, review, and operational context. Structured notes workspace for humans and agents with search, review, and operational context.
</p> </p>
</div> </div>
<div style={{ display: "flex", gap: "var(--ml-space-3)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
<Link href="/dashboard" className="surface-muted" style={{ padding: "12px 16px", background: "rgba(90, 140, 255, 0.16)" }}> <Link href="/dashboard" className="surface-muted" style={{ padding: "12px 16px", background: "rgba(90, 140, 255, 0.16)" }}>
Open dashboard Open dashboard
</Link> </Link>

12
web/src/components/AgentTimeline.tsx
View File

@ -2,19 +2,19 @@ import type { AgentTimelineItem } from "@/lib/types";
export function AgentTimeline({ items }: { items: AgentTimelineItem[] }) { export function AgentTimeline({ items }: { items: AgentTimelineItem[] }) {
return ( return (
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
<div style={{ fontWeight: 700 }}>Agent activity timeline</div> <div style={{ fontWeight: 700 }}>Agent activity timeline</div>
<span className="badge">review UX</span> <span className="badge">review UX</span>
</div> </div>
{items.map((item) => ( {items.map((item) => (
<div key={item.id} className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}> <div key={item.id} className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", flexWrap: "wrap" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
<strong>{item.actor}</strong> <strong>{item.actor}</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>{item.timestamp}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{item.timestamp}</span>
</div> </div>
<div>{item.action}</div> <div>{item.action}</div>
<div style={{ color: "var(--ml-text-secondary)" }}>{item.summary}</div> <div style={{ color: "var(--nl-text-secondary)" }}>{item.summary}</div>
<div className="badge" style={{ width: "fit-content" }}>{item.status}</div> <div className="badge" style={{ width: "fit-content" }}>{item.status}</div>
</div> </div>
))} ))}

8
web/src/components/AppShell.tsx
View File

@ -22,16 +22,16 @@ export function AppShell({
<div className="page-grid"> <div className="page-grid">
<header <header
className="surface-card" className="surface-card"
style={{ padding: "var(--ml-space-6)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-4)", alignItems: "start", flexWrap: "wrap" }} style={{ padding: "var(--nl-space-6)", display: "flex", justifyContent: "space-between", gap: "var(--nl-space-4)", alignItems: "start", flexWrap: "wrap" }}
> >
<div style={{ display: "grid", gap: "var(--ml-space-2)" }}> <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
<h1 <h1
id="page-title" id="page-title"
style={{ margin: 0, fontFamily: "var(--ml-font-display)", fontSize: "var(--ml-fs-2xl)", fontWeight: 700 }} style={{ margin: 0, fontFamily: "var(--nl-font-display)", fontSize: "var(--nl-fs-2xl)", fontWeight: 700 }}
> >
{title} {title}
</h1> </h1>
<div style={{ color: "var(--ml-text-secondary)", maxWidth: 720 }}>{description}</div> <div style={{ color: "var(--nl-text-secondary)", maxWidth: 720 }}>{description}</div>
</div> </div>
{actions ? <div aria-label="Page actions">{actions}</div> : null} {actions ? <div aria-label="Page actions">{actions}</div> : null}
</header> </header>

26
web/src/components/ArtifactPanel.tsx
View File

@ -57,14 +57,14 @@ export function ArtifactPanel({
} }
return ( return (
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
<div style={{ fontWeight: 700 }}>Artifacts</div> <div style={{ fontWeight: 700 }}>Artifacts</div>
<span className="badge">blob-backed view</span> <span className="badge">blob-backed view</span>
</div> </div>
<div className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "grid", gap: "var(--ml-space-3)" }}> <div className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "grid", gap: "var(--nl-space-3)" }}>
<div style={{ display: "grid", gap: "var(--ml-space-2)" }}> <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
<label htmlFor="artifact-title" style={{ color: "var(--ml-text-secondary)" }}> <label htmlFor="artifact-title" style={{ color: "var(--nl-text-secondary)" }}>
Add artifact Add artifact
</label> </label>
<input <input
@ -75,7 +75,7 @@ export function ArtifactPanel({
placeholder="Artifact title" placeholder="Artifact title"
/> />
</div> </div>
<div style={{ display: "grid", gridTemplateColumns: "minmax(140px, 180px) minmax(0, 1fr)", gap: "var(--ml-space-3)" }}> <div style={{ display: "grid", gridTemplateColumns: "minmax(140px, 180px) minmax(0, 1fr)", gap: "var(--nl-space-3)" }}>
<select <select
className="input-shell" className="input-shell"
value={artifactType} value={artifactType}
@ -110,10 +110,10 @@ export function ArtifactPanel({
}} }}
style={{ style={{
border: "none", border: "none",
borderRadius: "var(--ml-radius-md)", borderRadius: "var(--nl-radius-md)",
padding: "8px 12px", padding: "8px 12px",
background: "var(--ml-accent-primary)", background: "var(--nl-accent-primary)",
color: "var(--ml-text-primary)", color: "var(--nl-text-primary)",
fontWeight: 600, fontWeight: 600,
}} }}
> >
@ -122,13 +122,13 @@ export function ArtifactPanel({
</div> </div>
</div> </div>
{artifacts.map((artifact) => ( {artifacts.map((artifact) => (
<div key={artifact.id} className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}> <div key={artifact.id} className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
<div style={{ display: "grid", gap: 4 }}> <div style={{ display: "grid", gap: 4 }}>
<strong>{artifact.name}</strong> <strong>{artifact.name}</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>{artifact.type}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{artifact.type}</span>
</div> </div>
<div style={{ display: "flex", gap: "var(--ml-space-3)", alignItems: "center" }}> <div style={{ display: "flex", gap: "var(--nl-space-3)", alignItems: "center" }}>
<span style={{ color: "var(--ml-text-secondary)" }}>{artifact.status}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{artifact.status}</span>
{artifact.blobPath ? ( {artifact.blobPath ? (
<button <button
type="button" type="button"

6
web/src/components/LinkedNotesPanel.tsx
View File

@ -3,12 +3,12 @@ import type { LinkedNote } from "@/lib/types";
export function LinkedNotesPanel({ linkedNotes }: { linkedNotes: LinkedNote[] }) { export function LinkedNotesPanel({ linkedNotes }: { linkedNotes: LinkedNote[] }) {
return ( return (
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<div style={{ fontWeight: 700 }}>Linked notes</div> <div style={{ fontWeight: 700 }}>Linked notes</div>
{linkedNotes.map((linkedNote) => ( {linkedNotes.map((linkedNote) => (
<Link key={linkedNote.id} href={`/notes/${linkedNote.id}`} className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "grid", gap: 4 }}> <Link key={linkedNote.id} href={`/notes/${linkedNote.id}`} className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "grid", gap: 4 }}>
<strong>{linkedNote.title}</strong> <strong>{linkedNote.title}</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>{linkedNote.relationship}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{linkedNote.relationship}</span>
</Link> </Link>
))} ))}
</section> </section>

16
web/src/components/MetadataPanel.tsx
View File

@ -3,18 +3,18 @@ import type { NoteDetail } from "@/lib/types";
export function MetadataPanel({ note }: { note: NoteDetail }) { export function MetadataPanel({ note }: { note: NoteDetail }) {
return ( return (
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<div style={{ fontWeight: 700 }}>Metadata</div> <div style={{ fontWeight: 700 }}>Metadata</div>
<div style={{ display: "grid", gap: "var(--ml-space-2)" }}> <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
<div style={{ color: "var(--ml-text-secondary)" }}>Owner: {note.metadata.owner}</div> <div style={{ color: "var(--nl-text-secondary)" }}>Owner: {note.metadata.owner}</div>
<div style={{ color: "var(--ml-text-secondary)" }}>Source: {note.metadata.source}</div> <div style={{ color: "var(--nl-text-secondary)" }}>Source: {note.metadata.source}</div>
<Link href="/reviews" style={{ color: "var(--ml-text-secondary)" }}> <Link href="/reviews" style={{ color: "var(--nl-text-secondary)" }}>
Review state: {note.metadata.reviewState} Review state: {note.metadata.reviewState}
</Link> </Link>
<div style={{ color: "var(--ml-text-secondary)" }}>Tasks: {note.metadata.taskCount}</div> <div style={{ color: "var(--nl-text-secondary)" }}>Tasks: {note.metadata.taskCount}</div>
<div style={{ color: "var(--ml-text-secondary)" }}>Artifacts: {note.metadata.artifactCount}</div> <div style={{ color: "var(--nl-text-secondary)" }}>Artifacts: {note.metadata.artifactCount}</div>
</div> </div>
<div style={{ display: "flex", gap: "var(--ml-space-2)", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
{note.tags.map((tag) => ( {note.tags.map((tag) => (
<Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge"> <Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge">
#{tag} #{tag}

18
web/src/components/NoteEditor.tsx
View File

@ -19,16 +19,16 @@ export function NoteEditor({
}, [note.body, note.title]); }, [note.body, note.title]);
return ( return (
<section className="surface-card" style={{ padding: "var(--ml-space-6)", display: "grid", gap: "var(--ml-space-4)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
<form <form
style={{ display: "grid", gap: "var(--ml-space-4)" }} style={{ display: "grid", gap: "var(--nl-space-4)" }}
onSubmit={(event) => { onSubmit={(event) => {
event.preventDefault(); event.preventDefault();
void onSave({ title, body }); void onSave({ title, body });
}} }}
> >
<div style={{ display: "grid", gap: "var(--ml-space-2)" }}> <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
<label htmlFor="note-title" style={{ color: "var(--ml-text-secondary)" }}> <label htmlFor="note-title" style={{ color: "var(--nl-text-secondary)" }}>
Title Title
</label> </label>
<input <input
@ -39,8 +39,8 @@ export function NoteEditor({
/> />
</div> </div>
<div style={{ display: "grid", gap: "var(--ml-space-2)" }}> <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
<label htmlFor="note-body" style={{ color: "var(--ml-text-secondary)" }}> <label htmlFor="note-body" style={{ color: "var(--nl-text-secondary)" }}>
Body Body
</label> </label>
<textarea <textarea
@ -58,10 +58,10 @@ export function NoteEditor({
disabled={isSaving} disabled={isSaving}
style={{ style={{
border: "none", border: "none",
borderRadius: "var(--ml-radius-md)", borderRadius: "var(--nl-radius-md)",
padding: "10px 14px", padding: "10px 14px",
background: "var(--ml-accent-primary)", background: "var(--nl-accent-primary)",
color: "var(--ml-text-primary)", color: "var(--nl-text-primary)",
fontWeight: 600, fontWeight: 600,
}} }}
> >

24
web/src/components/ProposalReviewCard.tsx
View File

@ -14,10 +14,10 @@ export function ProposalReviewCard({
isSubmitting?: boolean; isSubmitting?: boolean;
}) { }) {
return ( return (
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-4)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
<div style={{ fontWeight: 700 }}>{title}</div> <div style={{ fontWeight: 700 }}>{title}</div>
<div style={{ display: "flex", gap: "var(--ml-space-2)", alignItems: "center", flexWrap: "wrap" }}> <div style={{ display: "flex", gap: "var(--nl-space-2)", alignItems: "center", flexWrap: "wrap" }}>
<span className="badge">before / after</span> <span className="badge">before / after</span>
{onReject ? ( {onReject ? (
<button <button
@ -25,7 +25,7 @@ export function ProposalReviewCard({
className="surface-muted" className="surface-muted"
onClick={onReject} onClick={onReject}
disabled={isSubmitting} disabled={isSubmitting}
style={{ border: "1px solid var(--ml-border-subtle)", borderRadius: "var(--ml-radius-md)", padding: "8px 12px" }} style={{ border: "1px solid var(--nl-border-subtle)", borderRadius: "var(--nl-radius-md)", padding: "8px 12px" }}
> >
Reject Reject
</button> </button>
@ -37,10 +37,10 @@ export function ProposalReviewCard({
disabled={isSubmitting} disabled={isSubmitting}
style={{ style={{
border: "none", border: "none",
borderRadius: "var(--ml-radius-md)", borderRadius: "var(--nl-radius-md)",
padding: "8px 12px", padding: "8px 12px",
background: "var(--ml-accent-primary)", background: "var(--nl-accent-primary)",
color: "var(--ml-text-primary)", color: "var(--nl-text-primary)",
fontWeight: 600, fontWeight: 600,
}} }}
> >
@ -49,14 +49,14 @@ export function ProposalReviewCard({
) : null} ) : null}
</div> </div>
</div> </div>
<div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--ml-space-4)" }}> <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))", gap: "var(--nl-space-4)" }}>
<div className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}> <div className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
<strong>Before</strong> <strong>Before</strong>
<div style={{ color: "var(--ml-text-secondary)", whiteSpace: "pre-wrap" }}>{before}</div> <div style={{ color: "var(--nl-text-secondary)", whiteSpace: "pre-wrap" }}>{before}</div>
</div> </div>
<div className="surface-muted" style={{ padding: "var(--ml-space-4)", display: "grid", gap: "var(--ml-space-2)" }}> <div className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
<strong>After</strong> <strong>After</strong>
<div style={{ color: "var(--ml-text-secondary)", whiteSpace: "pre-wrap" }}>{after}</div> <div style={{ color: "var(--nl-text-secondary)", whiteSpace: "pre-wrap" }}>{after}</div>
</div> </div>
</div> </div>
</section> </section>

22
web/src/components/Sidebar.tsx
View File

@ -17,22 +17,22 @@ export function Sidebar() {
const pathname = usePathname() ?? ""; const pathname = usePathname() ?? "";
return ( return (
<aside className="sidebar" style={{ padding: "var(--ml-space-6)" }} aria-label="Primary"> <aside className="sidebar" style={{ padding: "var(--nl-space-6)" }} aria-label="Primary">
<div style={{ display: "grid", gap: "var(--ml-space-6)" }}> <div style={{ display: "grid", gap: "var(--nl-space-6)" }}>
<div className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}> <div className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<div className="badge" style={{ width: "fit-content" }}> <div className="badge" style={{ width: "fit-content" }}>
<Sparkles size={14} /> <Sparkles size={14} />
Web Agent workstream Web Agent workstream
</div> </div>
<div> <div>
<div style={{ fontSize: "var(--ml-fs-xl)", fontFamily: "var(--ml-font-display)", fontWeight: 700 }}>{PRODUCT_NAME}</div> <div style={{ fontSize: "var(--nl-fs-xl)", fontFamily: "var(--nl-font-display)", fontWeight: 700 }}>{PRODUCT_NAME}</div>
<div style={{ color: "var(--ml-text-secondary)", marginTop: 6 }}> <div style={{ color: "var(--nl-text-secondary)", marginTop: 6 }}>
Human-first notes UX with agent-safe structure and review surfaces. Human-first notes UX with agent-safe structure and review surfaces.
</div> </div>
</div> </div>
</div> </div>
<nav aria-label="Primary navigation" style={{ display: "grid", gap: "var(--ml-space-2)" }}> <nav aria-label="Primary navigation" style={{ display: "grid", gap: "var(--nl-space-2)" }}>
{navItems.map((item) => { {navItems.map((item) => {
const Icon = item.icon; const Icon = item.icon;
const active = pathname === item.href || pathname.startsWith(`${item.href}/`); const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
@ -45,9 +45,9 @@ export function Sidebar() {
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "var(--ml-space-3)", gap: "var(--nl-space-3)",
padding: "12px 14px", padding: "12px 14px",
borderColor: active ? "var(--ml-accent-primary)" : undefined, borderColor: active ? "var(--nl-accent-primary)" : undefined,
background: active ? "rgba(90, 140, 255, 0.16)" : undefined, background: active ? "rgba(90, 140, 255, 0.16)" : undefined,
}} }}
> >
@ -58,10 +58,10 @@ export function Sidebar() {
})} })}
</nav> </nav>
<div className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-2)" }}> <div className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-2)" }}>
<strong>Keyboard flow</strong> <strong>Keyboard flow</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>Use Tab to move between navigation, filters, and dense result surfaces.</span> <span style={{ color: "var(--nl-text-secondary)" }}>Use Tab to move between navigation, filters, and dense result surfaces.</span>
<span style={{ color: "var(--ml-text-secondary)" }}>Use the skip link to jump directly into page content.</span> <span style={{ color: "var(--nl-text-secondary)" }}>Use the skip link to jump directly into page content.</span>
</div> </div>
</div> </div>
</aside> </aside>

22
web/src/components/TaskReviewPanel.tsx
View File

@ -28,14 +28,14 @@ export function TaskReviewPanel({
} }
return ( return (
<section className="surface-card" style={{ padding: "var(--ml-space-5)", display: "grid", gap: "var(--ml-space-3)" }}> <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
<div style={{ display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}> <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
<div style={{ fontWeight: 700 }}>Task extraction review</div> <div style={{ fontWeight: 700 }}>Task extraction review</div>
<span className="badge">backend-backed review</span> <span className="badge">backend-backed review</span>
</div> </div>
<div className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "grid", gap: "var(--ml-space-3)" }}> <div className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "grid", gap: "var(--nl-space-3)" }}>
<div style={{ display: "grid", gap: "var(--ml-space-2)" }}> <div style={{ display: "grid", gap: "var(--nl-space-2)" }}>
<label htmlFor="task-title" style={{ color: "var(--ml-text-secondary)" }}> <label htmlFor="task-title" style={{ color: "var(--nl-text-secondary)" }}>
Add task Add task
</label> </label>
<input <input
@ -62,10 +62,10 @@ export function TaskReviewPanel({
}} }}
style={{ style={{
border: "none", border: "none",
borderRadius: "var(--ml-radius-md)", borderRadius: "var(--nl-radius-md)",
padding: "8px 12px", padding: "8px 12px",
background: "var(--ml-accent-primary)", background: "var(--nl-accent-primary)",
color: "var(--ml-text-primary)", color: "var(--nl-text-primary)",
fontWeight: 600, fontWeight: 600,
}} }}
> >
@ -74,12 +74,12 @@ export function TaskReviewPanel({
</div> </div>
</div> </div>
{tasks.map((task) => ( {tasks.map((task) => (
<div key={task.id} className="surface-muted" style={{ padding: "var(--ml-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--ml-space-3)", alignItems: "center" }}> <div key={task.id} className="surface-muted" style={{ padding: "var(--nl-space-3)", display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", alignItems: "center" }}>
<div style={{ display: "grid", gap: 4 }}> <div style={{ display: "grid", gap: 4 }}>
<strong>{task.title}</strong> <strong>{task.title}</strong>
<span style={{ color: "var(--ml-text-secondary)" }}>Source: {task.source}</span> <span style={{ color: "var(--nl-text-secondary)" }}>Source: {task.source}</span>
</div> </div>
<span style={{ color: "var(--ml-text-secondary)" }}>{task.status}</span> <span style={{ color: "var(--nl-text-secondary)" }}>{task.status}</span>
</div> </div>
))} ))}
</section> </section>