From 8d484c30d147692e46daf76facb1abe4550e1365 Mon Sep 17 00:00:00 2001
From: saravanakumardb1 <saravanakumardb1@users.noreply.github.com>
Date: Sat, 23 May 2026 01:38:35 -0700
Subject: [PATCH] feat(web/ui6): migrate dashboard, workspaces, search, chat
 pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase UI6 — the three highest-traffic operator surfaces plus chat
move off legacy globals onto @bytelyst/ui Card + Badge + Input +
Select + Textarea + Button primitives via the local adapter.

dashboard/page.tsx:
- Welcome card, Saved views card, Quick links card, Operator workflows
  card, Recent note activity card — all section.surface-card → Card.
- All saved-view/quick-link/workflow/note rows: surface-muted with
  inline styles → grid+rounded+bg utility classes with hover state.
- All inline 'badge' spans (scope, status, tags) → Badge with
  semantic variants (workflow status maps to warning/success).

workspaces/page.tsx:
- Saved-views aside, filter section, workspace article rows, error
  banner — all surface-card → Card.
- Filter input → Input. Visibility/owner/tag chips → Badge.
- Workspace-note rows → utility-class hover panels.

search/page.tsx:
- POST /notes/search action chip → Badge.
- Saved searches aside + results pane — both surface-card → Card.
- '+ Save current' button + per-view Remove button — raw <button>
  → Button (size sm, ghost variant for Remove).
- Search input + filter chips + result rows — Input + Badge +
  utility-class panels.

chat/page.tsx:
- Workspace <select> → Select with options=[{value,label}].
- Question <textarea> → Textarea.

Ratchet impact for this commit:
  raw interactive controls       25 → 19  (-6)
  legacy global surface classes  67 → 38  (-29)

Cumulative since session start (38/92 baseline):
  raw   38 → 19  (-19)
  legacy 92 → 38  (-54)

Verified: pnpm typecheck, test (96/96), audit:ui:ratchet at new
baseline.
---
 web/src/app/(app)/chat/page.tsx       | 17 +++---
 web/src/app/(app)/dashboard/page.tsx  | 55 ++++++++++----------
 web/src/app/(app)/search/page.tsx     | 74 +++++++++++++--------------
 web/src/app/(app)/workspaces/page.tsx | 58 +++++++++++----------
 4 files changed, 100 insertions(+), 104 deletions(-)

diff --git a/web/src/app/(app)/chat/page.tsx b/web/src/app/(app)/chat/page.tsx
index 875714e..37905c1 100644
--- a/web/src/app/(app)/chat/page.tsx
+++ b/web/src/app/(app)/chat/page.tsx
@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import { AppShell } from "@/components/AppShell";
-import { Badge, Button, Card } from "@/components/ui/Primitives";
+import { Badge, Button, Card, Select, Textarea } from "@/components/ui/Primitives";
 import { chatOverWorkspace, listWorkspaceSummaries } from "@/lib/notes-client";
 import type { WorkspaceSummary } from "@/lib/types";
 import { toast } from "@/lib/toast";
@@ -53,19 +53,16 @@ export default function ChatPage() {
               Create a workspace first (Dashboard seed or Workspaces), then return here.
             </p>
           ) : (
-            <select className="input-shell" value={workspaceId} onChange={(e) => setWorkspaceId(e.target.value)}>
-              {workspaces.map((w) => (
-                <option key={w.id} value={w.id}>
-                  {w.name}
-                </option>
-              ))}
-            </select>
+            <Select
+              value={workspaceId}
+              onChange={(e) => setWorkspaceId(e.target.value)}
+              options={workspaces.map((w) => ({ value: w.id, label: w.name }))}
+            />
           )}
         </label>
         <label style={{ display: "grid", gap: 8 }}>
           <span style={{ fontWeight: 600 }}>Question</span>
-          <textarea
-            className="input-shell"
+          <Textarea
             rows={4}
             value={message}
             onChange={(e) => setMessage(e.target.value)}
diff --git a/web/src/app/(app)/dashboard/page.tsx b/web/src/app/(app)/dashboard/page.tsx
index 4a92f53..8c00175 100644
--- a/web/src/app/(app)/dashboard/page.tsx
+++ b/web/src/app/(app)/dashboard/page.tsx
@@ -6,7 +6,7 @@ import { Suspense, useCallback, useEffect, useState } from "react";
 import { AppShell } from "@/components/AppShell";
 import { CreateNoteModal } from "@/components/CreateNoteModal";
 import { StateNotice } from "@/components/StateNotice";
-import { Button, Card } from "@/components/ui/Primitives";
+import { Badge, Button, Card } from "@/components/ui/Primitives";
 import { listNoteSummaries, listWorkspaceSummaries, seedOnboardingWorkspace } from "@/lib/notes-client";
 import { listApprovalQueue } from "@/lib/review-client";
 import { listSavedViews, type SavedView } from "@/lib/saved-views-client";
@@ -174,7 +174,7 @@ function DashboardContent() {
       </section>
 
       {workspaces.length === 0 ? (
-        <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-3)" }}>
+        <Card padding="md" className="grid gap-3">
           <strong>Welcome — create a sample workspace</strong>
           <p style={{ margin: 0, color: "var(--nl-text-secondary)" }}>
             Seeds a &quot;Getting started&quot; workspace with sample notes and one agent item in the review queue (backend flag{" "}
@@ -201,18 +201,18 @@ function DashboardContent() {
           >
             Seed sample workspace
           </Button>
-        </section>
+        </Card>
       ) : null}
 
       <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(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
+        <Card padding="lg" className="grid gap-4">
           <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Saved views</div>
           <p style={{ margin: 0, color: "var(--nl-text-secondary)", fontSize: "var(--nl-fs-sm)" }}>
             Views stored in your account (Search page can add more). Below that, quick links stay on the dashboard for one-tap access.
           </p>
           <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {sortedSaved.length === 0 ? (
-              <div className="surface-muted" style={{ padding: "var(--nl-space-4)", color: "var(--nl-text-secondary)" }}>
+              <div className="rounded-[var(--nl-radius-sm)] bg-[color:var(--nl-surface-muted)] p-4 text-[color:var(--nl-text-secondary)]">
                 No saved views yet. Open <Link href="/search">Search</Link> and save a query to pin it here.
               </div>
             ) : (
@@ -220,12 +220,11 @@ function DashboardContent() {
                 <Link
                   key={view.id}
                   href={hrefForSavedView(view)}
-                  className="surface-muted"
-                  style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
+                  className="grid gap-2 rounded-[var(--nl-radius-sm)] bg-[color:var(--nl-surface-muted)] p-4 transition-colors hover:bg-[color:var(--nl-surface-elevated)]"
                 >
-                  <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
+                  <div className="flex flex-wrap items-center justify-between gap-3">
                     <strong>{view.name}</strong>
-                    <span className="badge">{view.scope}</span>
+                    <Badge variant="neutral">{view.scope}</Badge>
                   </div>
                   {view.description ? (
                     <div style={{ color: "var(--nl-text-secondary)" }}>{view.description}</div>
@@ -245,12 +244,11 @@ function DashboardContent() {
               <Link
                 key={view.id}
                 href={view.href}
-                className="surface-muted"
-                style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
+                className="grid gap-2 rounded-[var(--nl-radius-sm)] bg-[color:var(--nl-surface-muted)] p-4 transition-colors hover:bg-[color:var(--nl-surface-elevated)]"
               >
-                <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
+                <div className="flex flex-wrap items-center justify-between gap-3">
                   <strong>{view.name}</strong>
-                  <span className="badge">{view.scope}</span>
+                  <Badge variant="neutral">{view.scope}</Badge>
                 </div>
                 <div style={{ color: "var(--nl-text-secondary)" }}>{view.description}</div>
                 <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
@@ -260,21 +258,20 @@ function DashboardContent() {
               </Link>
             ))}
           </div>
-        </section>
+        </Card>
 
-        <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
+        <Card padding="lg" className="grid gap-4">
           <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Operator workflows</div>
           <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {operatorWorkflows.map((workflow) => (
               <Link
                 key={workflow.id}
                 href={getWorkflowHref(workflow)}
-                className="surface-muted"
-                style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
+                className="grid gap-2 rounded-[var(--nl-radius-sm)] bg-[color:var(--nl-surface-muted)] p-4 transition-colors hover:bg-[color:var(--nl-surface-elevated)]"
               >
-                <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
+                <div className="flex flex-wrap items-center justify-between gap-3">
                   <strong>{workflow.name}</strong>
-                  <span className="badge">{workflow.status}</span>
+                  <Badge variant={workflow.status === "at_risk" ? "warning" : "success"}>{workflow.status}</Badge>
                 </div>
                 <div style={{ color: "var(--nl-text-secondary)" }}>Owner: {workflow.owner}</div>
                 <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-3)", flexWrap: "wrap" }}>
@@ -284,10 +281,10 @@ function DashboardContent() {
               </Link>
             ))}
           </div>
-        </section>
+        </Card>
       </section>
 
-      <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
+      <Card padding="lg" className="grid gap-4">
         <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>Recent note activity</div>
         {errorState ? <StateNotice state={errorState} onAction={() => void loadDashboard()} compact /> : null}
         <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
@@ -295,27 +292,27 @@ function DashboardContent() {
             <StateNotice state={getEmptyState("backend", "recent notes")} compact />
           ) : null}
           {recentNotes.map((note) => (
-            <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(--nl-space-3)", flexWrap: "wrap" }}>
+            <div key={note.id} className="grid gap-2 rounded-[var(--nl-radius-sm)] bg-[color:var(--nl-surface-muted)] p-4">
+              <div className="flex flex-wrap items-center justify-between gap-3">
                 <Link href={`/notes/${note.id}`}>
                   <strong>{note.title}</strong>
                 </Link>
-                <span style={{ color: "var(--nl-text-secondary)" }}>{note.updatedBy}</span>
+                <span className="text-[color:var(--nl-text-secondary)]">{note.updatedBy}</span>
               </div>
-              <Link href={`/notes/${note.id}`} style={{ color: "var(--nl-text-secondary)" }}>
+              <Link href={`/notes/${note.id}`} className="text-[color:var(--nl-text-secondary)]">
                 {note.excerpt}
               </Link>
-              <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
+              <div className="flex flex-wrap gap-2">
                 {note.tags.map((tag) => (
-                  <Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`} className="badge">
-                    #{tag}
+                  <Link key={tag} href={`/search?q=${encodeURIComponent(tag)}`}>
+                    <Badge variant="neutral">#{tag}</Badge>
                   </Link>
                 ))}
               </div>
             </div>
           ))}
         </div>
-      </section>
+      </Card>
       {showCreateNote && (
         <CreateNoteModal
           workspaces={workspaces}
diff --git a/web/src/app/(app)/search/page.tsx b/web/src/app/(app)/search/page.tsx
index 975d32d..2c5a940 100644
--- a/web/src/app/(app)/search/page.tsx
+++ b/web/src/app/(app)/search/page.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import { AppShell } from "@/components/AppShell";
+import { Badge, Button, Card, Input } from "@/components/ui/Primitives";
 import { searchNotesRanked, type SearchRankedHit } from "@/lib/notes-client";
 import { listSavedViews, createSavedView, deleteSavedView, type SavedView } from "@/lib/saved-views-client";
 import { useDebounce } from "@/lib/use-debounce";
@@ -90,50 +91,44 @@ function SearchPageInner() {
     <AppShell
       title="Search"
       description="Lexical and hybrid ranked search with match hints (title, body, tag). Toggle modes to compare behavior."
-      actions={<div className="badge">POST /notes/search</div>}
+      actions={<Badge variant="info">POST /notes/search</Badge>}
     >
       <section style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-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={{ fontWeight: 700 }}>Saved searches</div>
+        <Card padding="md" className="grid gap-4">
+          <div className="flex items-center justify-between">
+            <div className="font-bold">Saved searches</div>
             {query.trim() ? (
-              <button
+              <Button
                 type="button"
-                className="badge"
+                size="sm"
+                variant="secondary"
                 onClick={() => void handleSaveCurrentSearch()}
-                style={{ cursor: "pointer" }}
               >
                 + Save current
-              </button>
+              </Button>
             ) : null}
           </div>
           <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {savedViews.map((view) => (
               <div
                 key={view.id}
-                className="surface-muted"
-                style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
+                className="grid gap-2 rounded-[var(--nl-radius-sm)] bg-[color:var(--nl-surface-muted)] p-4"
               >
-                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "start" }}>
-                  <Link href={`/search?q=${encodeURIComponent(view.query)}`} style={{ display: "grid", gap: "var(--nl-space-2)" }}>
+                <div className="flex items-start justify-between">
+                  <Link href={`/search?q=${encodeURIComponent(view.query)}`} className="grid gap-2">
                     <strong>{view.name}</strong>
-                    <span style={{ color: "var(--nl-text-secondary)" }}>{view.query}</span>
+                    <span className="text-[color:var(--nl-text-secondary)]">{view.query}</span>
                   </Link>
-                  <button
+                  <Button
                     type="button"
+                    size="sm"
+                    variant="ghost"
                     onClick={() => {
                       if (window.confirm("Remove this saved view?")) void handleDeleteSavedView(view.id);
                     }}
-                    style={{
-                      color: "var(--nl-text-secondary)",
-                      background: "none",
-                      border: "none",
-                      cursor: "pointer",
-                      fontSize: "0.75rem",
-                    }}
                   >
                     Remove
-                  </button>
+                  </Button>
                 </div>
               </div>
             ))}
@@ -153,40 +148,45 @@ function SearchPageInner() {
               Lexical only
             </label>
           </div>
-        </aside>
+        </Card>
 
-        <section className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
-          <input
+        <Card padding="lg" className="grid gap-4">
+          <Input
             aria-label="Search notes"
-            className="input-shell"
             placeholder="Search notes, tags, and body text"
             value={query}
             onChange={(event) => setQuery(event.target.value)}
           />
-          <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
-            <span className="badge">mode:{mode}</span>
-            <span className="badge">{hits.length} hits</span>
+          <div className="flex flex-wrap gap-2">
+            <Badge variant="neutral">mode:{mode}</Badge>
+            <Badge variant="neutral">{hits.length} hits</Badge>
           </div>
           {error ? <div style={{ color: "var(--nl-text-secondary)" }}>{error}</div> : null}
           <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
             {hits.map((hit) => (
-              <div key={hit.noteId} 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(--nl-space-3)", flexWrap: "wrap" }}>
-                  <Link href={`/notes/${hit.noteId}`} style={{ fontWeight: 700 }}>
+              <div
+                key={hit.noteId}
+                className="grid gap-2 rounded-[var(--nl-radius-sm)] bg-[color:var(--nl-surface-muted)] p-4"
+              >
+                <div className="flex flex-wrap items-center justify-between gap-3">
+                  <Link href={`/notes/${hit.noteId}`} className="font-bold">
                     {hit.title}
                   </Link>
-                  <span className="badge">
+                  <Badge variant="neutral">
                     {hit.matchKind} · score {hit.score}
-                  </span>
+                  </Badge>
                 </div>
-                <div style={{ color: "var(--nl-text-secondary)", fontSize: "var(--nl-fs-sm)" }}>{hit.snippet}</div>
-                <Link href={`/search?q=${encodeURIComponent(hit.workspaceId)}`} style={{ color: "var(--nl-text-secondary)", fontSize: "var(--nl-fs-sm)" }}>
+                <div className="text-[length:var(--nl-fs-sm)] text-[color:var(--nl-text-secondary)]">{hit.snippet}</div>
+                <Link
+                  href={`/search?q=${encodeURIComponent(hit.workspaceId)}`}
+                  className="text-[length:var(--nl-fs-sm)] text-[color:var(--nl-text-secondary)]"
+                >
                   workspace: {hit.workspaceId}
                 </Link>
               </div>
             ))}
           </div>
-        </section>
+        </Card>
       </section>
     </AppShell>
   );
diff --git a/web/src/app/(app)/workspaces/page.tsx b/web/src/app/(app)/workspaces/page.tsx
index 41a2613..668d71b 100644
--- a/web/src/app/(app)/workspaces/page.tsx
+++ b/web/src/app/(app)/workspaces/page.tsx
@@ -5,7 +5,7 @@ import { useSearchParams } from "next/navigation";
 import { Suspense, useEffect, useMemo, useState } from "react";
 import { AppShell } from "@/components/AppShell";
 import { CreateWorkspaceModal } from "@/components/CreateWorkspaceModal";
-import { Button } from "@/components/ui/Primitives";
+import { Badge, Button, Card, Input } from "@/components/ui/Primitives";
 import { downloadNotesExport, exportNotes, listNoteSummaries, listWorkspaceSummaries, deleteWorkspace } from "@/lib/notes-client";
 import { buildWorkspaceContextPackMarkdown } from "@/lib/context-pack";
 import { toast } from "@/lib/toast";
@@ -169,60 +169,58 @@ function WorkspacesPageInner() {
       }
     >
       <section className="workspace-layout-grid" style={{ display: "grid", gridTemplateColumns: "minmax(260px, 320px) minmax(0, 1fr)", gap: "var(--nl-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={{ display: "grid", gap: "var(--nl-space-3)" }}>
+        <Card padding="md" className="grid gap-4">
+          <div className="font-bold">Saved views</div>
+          <div className="grid gap-3">
             {savedViews.map((view) => (
               <Link
                 key={view.id}
                 href={view.id === "workspace-shared" ? "/workspaces?q=shared" : "/workspaces"}
-                className="surface-muted"
-                style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}
+                className="grid gap-2 rounded-[var(--nl-radius-sm)] bg-[color:var(--nl-surface-muted)] p-4 transition-colors hover:bg-[color:var(--nl-surface-elevated)]"
               >
                 <strong>{view.name}</strong>
-                <span style={{ color: "var(--nl-text-secondary)" }}>{view.description}</span>
-                <span className="badge">{view.resultCount} results</span>
+                <span className="text-[color:var(--nl-text-secondary)]">{view.description}</span>
+                <Badge variant="neutral" className="justify-self-start">{view.resultCount} results</Badge>
               </Link>
             ))}
           </div>
-        </aside>
+        </Card>
 
-        <section className="surface-card" style={{ padding: "var(--nl-space-5)", display: "grid", gap: "var(--nl-space-4)" }}>
-          <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
-            <input
+        <Card padding="md" className="grid gap-4">
+          <div className="grid gap-3">
+            <Input
               aria-label="Filter workspaces"
-              className="input-shell"
               placeholder="Filter workspaces by owner, tag, or visibility"
               value={query}
               onChange={(event) => setQuery(event.target.value)}
             />
-            <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
-              <span className="badge">owner:any</span>
-              <span className="badge">visibility:any</span>
-              <span className="badge">sort:updated</span>
+            <div className="flex flex-wrap gap-2">
+              <Badge variant="neutral">owner:any</Badge>
+              <Badge variant="neutral">visibility:any</Badge>
+              <Badge variant="neutral">sort:updated</Badge>
             </div>
           </div>
-        </section>
+        </Card>
       </section>
 
       {error ? (
-        <section className="surface-card" style={{ padding: "var(--nl-space-6)", color: "var(--nl-text-secondary)" }}>
+        <Card padding="lg" className="text-[color:var(--nl-text-secondary)]">
           {error}
-        </section>
+        </Card>
       ) : null}
       <section style={{ display: "grid", gap: "var(--nl-space-4)" }}>
         {filteredWorkspaces.map((workspace) => {
           const workspaceNotes = notesByWorkspace.get(workspace.id) ?? [];
           return (
-            <article key={workspace.id} className="surface-card" style={{ padding: "var(--nl-space-6)", display: "grid", gap: "var(--nl-space-4)" }}>
+            <Card key={workspace.id} padding="lg" className="grid gap-4">
               <div style={{ display: "flex", justifyContent: "space-between", gap: "var(--nl-space-4)", flexWrap: "wrap" }}>
                 <div>
                   <div style={{ fontSize: "var(--nl-fs-xl)", fontWeight: 700 }}>{workspace.name}</div>
                   <div style={{ color: "var(--nl-text-secondary)", marginTop: 6 }}>{workspace.description}</div>
                 </div>
                 <div style={{ display: "grid", gap: 8, justifyItems: "end" }}>
-                  <Link href={`/workspaces?q=${encodeURIComponent(workspace.visibility)}`} className="badge">
-                    {workspace.visibility}
+                  <Link href={`/workspaces?q=${encodeURIComponent(workspace.visibility)}`}>
+                    <Badge variant="neutral">{workspace.visibility}</Badge>
                   </Link>
                   <Link href={`/workspaces?q=${encodeURIComponent(workspace.owner)}`} style={{ color: "var(--nl-text-secondary)" }}>
                     Owner: {workspace.owner}
@@ -263,20 +261,24 @@ function WorkspacesPageInner() {
               </div>
               <div style={{ display: "flex", gap: "var(--nl-space-2)", flexWrap: "wrap" }}>
                 {workspace.tags.map((tag) => (
-                  <Link key={tag} href={`/workspaces?q=${encodeURIComponent(tag)}`} className="badge">
-                    #{tag}
+                  <Link key={tag} href={`/workspaces?q=${encodeURIComponent(tag)}`}>
+                    <Badge variant="neutral">#{tag}</Badge>
                   </Link>
                 ))}
               </div>
               <div style={{ display: "grid", gap: "var(--nl-space-3)" }}>
                 {workspaceNotes.map((note) => (
-                  <Link key={note.id} href={`/notes/${note.id}`} className="surface-muted" style={{ padding: "var(--nl-space-4)", display: "grid", gap: "var(--nl-space-2)" }}>
+                  <Link
+                    key={note.id}
+                    href={`/notes/${note.id}`}
+                    className="grid gap-2 rounded-[var(--nl-radius-sm)] bg-[color:var(--nl-surface-muted)] p-4 transition-colors hover:bg-[color:var(--nl-surface-elevated)]"
+                  >
                     <strong>{note.title}</strong>
-                    <span style={{ color: "var(--nl-text-secondary)" }}>{note.excerpt}</span>
+                    <span className="text-[color:var(--nl-text-secondary)]">{note.excerpt}</span>
                   </Link>
                 ))}
               </div>
-            </article>
+            </Card>
           );
         })}
       </section>