@sentry/junior-dashboard 0.248.0 → 0.250.0

package/src/client/pages/system/PluginDetails.tsx

@@ -14,7 +14,7 @@ export function PluginDetails(props: { plugin: SystemPlugin }) {
         title="Details"
       />
       <Card>
-        <div className="grid grid-cols-1 gap-px bg-white/[0.055] sm:grid-cols-3">
+        <div className="grid grid-cols-1 gap-px bg-dashboard-fill-hover sm:grid-cols-3">
           <Detail icon={Boxes} label="Identifier" value={props.plugin.name} />
           <Detail
             icon={Sparkles}
@@ -27,7 +27,7 @@ export function PluginDetails(props: { plugin: SystemPlugin }) {
             value={String(props.plugin.configKeys.length)}
           />
         </div>
-        <div className="grid gap-5 border-t border-white/[0.06] p-4 sm:p-5 lg:grid-cols-2">
+        <div className="grid gap-5 border-t border-dashboard-border-subtle p-4 sm:p-5 lg:grid-cols-2">
           <CapabilityList
             emptyText="No plugin-provided skills were discovered."
             items={props.plugin.skills.map((skill) => skill.name)}
@@ -52,12 +52,16 @@ function Detail(props: { icon: typeof Boxes; label: string; value: string }) {
   const Icon = props.icon;
   return (
     <div className="flex items-center gap-3 bg-dashboard-surface-panel px-4 py-3.5">
-      <Icon aria-hidden="true" className="text-cyan-200/60" size={15} />
+      <Icon
+        aria-hidden="true"
+        className="text-dashboard-accent-text/60"
+        size={15}
+      />
       <div className="min-w-0">
         <div className="truncate font-display text-base font-medium text-dashboard-text">
           {props.value}
         </div>
-        <div className="mt-0.5 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+        <div className="mt-0.5 font-sans font-medium text-xs text-dashboard-text-muted">
           {props.label}
         </div>
       </div>
@@ -72,14 +76,14 @@ function CapabilityList(props: {
 }) {
   return (
     <div>
-      <h3 className="m-0 font-mono text-xs font-medium uppercase tracking-[0.12em] text-dashboard-text-muted">
+      <h3 className="m-0 font-sans text-xs font-medium text-dashboard-text-muted">
         {props.title}
       </h3>
       {props.items.length ? (
         <div className="mt-2.5 flex flex-wrap gap-2">
           {props.items.map((item) => (
             <span
-              className="rounded border border-white/[0.07] bg-black/20 px-2.5 py-1.5 font-mono text-xs text-dashboard-text-muted"
+              className="rounded-md border border-dashboard-border bg-dashboard-overlay-soft px-2.5 py-1.5 font-mono text-xs text-dashboard-text-muted"
               key={item}
             >
               {item}
@@ -87,7 +91,7 @@ function CapabilityList(props: {
           ))}
         </div>
       ) : (
-        <p className="mt-2 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <p className="mt-2 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {props.emptyText}
         </p>
       )}

package/src/client/pages/system/PluginPanels.tsx

@@ -31,26 +31,26 @@ function PluginPanel(props: { plugin: SystemPlugin }) {
   );
   return (
     <Link
-      className="group grid min-w-0 gap-4 rounded-lg border border-white/[0.07] bg-dashboard-surface-panel/85 p-4 no-underline transition-colors hover:border-cyan-300/20 hover:bg-cyan-300/[0.025] sm:p-5"
+      className="group grid min-w-0 gap-4 rounded-lg border border-dashboard-border bg-dashboard-surface-panel/85 p-4 no-underline transition-colors hover:border-dashboard-accent/20 hover:bg-dashboard-accent/[0.025] sm:p-5"
       to={systemPluginPath(props.plugin.name)}
     >
       <div className="flex min-w-0 items-start justify-between gap-4">
         <div className="flex min-w-0 items-start gap-3">
-          <div className="grid size-9 shrink-0 place-items-center rounded border border-cyan-300/15 bg-cyan-300/[0.075] text-cyan-200">
+          <div className="grid size-9 shrink-0 place-items-center rounded-md border border-dashboard-accent/15 bg-dashboard-accent/[0.075] text-dashboard-accent-text">
             <Boxes aria-hidden="true" size={16} strokeWidth={1.8} />
           </div>
           <div className="min-w-0">
             <h3 className="m-0 truncate font-display text-lg font-medium text-dashboard-text">
               {props.plugin.displayName}
             </h3>
-            <p className="mt-1 mb-0 line-clamp-2 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+            <p className="mt-1 mb-0 line-clamp-2 font-sans text-xs leading-relaxed text-dashboard-text-muted">
               {props.plugin.description}
             </p>
           </div>
         </div>
         <ArrowRight
           aria-hidden="true"
-          className="mt-1 shrink-0 text-dashboard-text-muted transition-transform group-hover:translate-x-0.5 group-hover:text-cyan-200/70"
+          className="mt-1 shrink-0 text-dashboard-text-muted transition-transform group-hover:translate-x-0.5 group-hover:text-dashboard-accent-text/70"
           size={16}
         />
       </div>
@@ -59,7 +59,7 @@ function PluginPanel(props: { plugin: SystemPlugin }) {
         <div
           className={`grid ${
             metrics.length === 1 ? "grid-cols-1" : "grid-cols-2"
-          } gap-px overflow-hidden rounded border border-white/[0.06] bg-white/[0.055]`}
+          } gap-px overflow-hidden rounded-md border border-dashboard-border-subtle bg-dashboard-fill-hover`}
         >
           {metrics.slice(0, 2).map((metric) => (
             <div
@@ -69,7 +69,7 @@ function PluginPanel(props: { plugin: SystemPlugin }) {
               <div className="truncate font-display text-lg font-light text-dashboard-text">
                 {metric.value}
               </div>
-              <div className="mt-1 truncate font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+              <div className="mt-1 truncate font-sans font-medium text-xs text-dashboard-text-muted">
                 {metric.label}
               </div>
             </div>
@@ -77,7 +77,7 @@ function PluginPanel(props: { plugin: SystemPlugin }) {
         </div>
       ) : null}
 
-      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-white/[0.055] pt-3">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-t border-dashboard-border-subtle pt-3">
         <PanelFact
           icon={Sparkles}
           label={`${props.plugin.skills.length} skills`}
@@ -90,7 +90,7 @@ function PluginPanel(props: { plugin: SystemPlugin }) {
 function PanelFact(props: { icon: typeof Sparkles; label: string }) {
   const Icon = props.icon;
   return (
-    <span className="inline-flex items-center gap-1.5 font-mono text-xs uppercase tracking-[0.08em] text-dashboard-text-muted">
+    <span className="inline-flex items-center gap-1.5 font-sans font-medium text-xs text-dashboard-text-muted">
       <Icon aria-hidden="true" size={11} />
       {props.label}
     </span>

package/src/client/pages/system/PluginReportRecordSet.tsx

@@ -19,12 +19,12 @@ export function PluginReportRecordSet(props: {
     <div
       className={cn(
         embedded
-          ? "border-t border-white/[0.06]"
-          : "overflow-hidden rounded border border-white/[0.07] bg-dashboard-surface-panel",
+          ? "border-t border-dashboard-border-subtle"
+          : "overflow-hidden rounded-md border border-dashboard-border bg-dashboard-surface-panel",
       )}
     >
       <div className="flex items-center justify-between gap-4 px-5 py-3">
-        <div className="font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+        <div className="font-sans font-medium text-xs text-dashboard-text-muted">
           {props.recordSet.title}
         </div>
         <div className="hidden font-mono text-xs text-dashboard-text-muted sm:block">
@@ -32,30 +32,30 @@ export function PluginReportRecordSet(props: {
         </div>
       </div>
       {records.length === 0 ? (
-        <div className="px-5 pb-5 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <div className="px-5 pb-5 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           {props.recordSet.emptyText ?? "No records."}
         </div>
       ) : fields.length === 0 ? (
-        <div className="px-5 pb-5 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+        <div className="px-5 pb-5 font-sans text-xs leading-relaxed text-dashboard-text-muted">
           Report records are unavailable because no fields were declared.
         </div>
       ) : (
         <>
-          <div className="grid gap-2 border-t border-white/[0.05] p-3 sm:hidden">
+          <div className="grid gap-2 border-t border-dashboard-border-subtle p-3 sm:hidden">
             {records.map((record) => (
               <div
                 className={cn(
-                  "grid gap-3 rounded-md border border-white/[0.06] bg-black/15 p-3",
+                  "grid gap-3 rounded-md border border-dashboard-border-subtle bg-dashboard-overlay-soft p-3",
                   rowToneClass(record.tone),
                 )}
                 key={record.id}
               >
                 {fields.map((field) => (
                   <div key={field.key}>
-                    <div className="font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+                    <div className="font-sans font-medium text-xs text-dashboard-text-muted">
                       {field.label}
                     </div>
-                    <div className="mt-1 break-words font-mono text-xs leading-relaxed text-dashboard-text-muted">
+                    <div className="mt-1 break-words font-sans text-xs leading-relaxed text-dashboard-text-muted">
                       {record.values[field.key] ?? ""}
                     </div>
                   </div>
@@ -63,13 +63,13 @@ export function PluginReportRecordSet(props: {
               </div>
             ))}
           </div>
-          <div className="hidden overflow-x-auto border-t border-white/[0.05] sm:block">
+          <div className="hidden overflow-x-auto border-t border-dashboard-border-subtle sm:block">
             <table className="w-full min-w-[36rem] border-collapse text-left">
-              <thead className="bg-black/15 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+              <thead className="bg-dashboard-overlay-soft font-sans font-medium text-xs text-dashboard-text-muted">
                 <tr>
                   {fields.map((field) => (
                     <th
-                      className="border-b border-white/[0.055] px-5 py-2.5 font-medium"
+                      className="border-b border-dashboard-border-subtle px-5 py-2.5 font-medium"
                       key={field.key}
                       scope="col"
                     >
@@ -82,14 +82,14 @@ export function PluginReportRecordSet(props: {
                 {records.map((record) => (
                   <tr
                     className={cn(
-                      "transition-colors hover:bg-white/[0.025]",
+                      "transition-colors hover:bg-dashboard-fill-soft",
                       rowToneClass(record.tone),
                     )}
                     key={record.id}
                   >
                     {fields.map((field) => (
                       <td
-                        className="max-w-72 truncate border-b border-white/[0.05] px-5 py-3 font-mono text-xs text-dashboard-text-muted"
+                        className="max-w-72 truncate border-b border-dashboard-border-subtle px-5 py-3 font-mono text-xs text-dashboard-text-muted"
                         key={field.key}
                       >
                         {record.values[field.key] ?? ""}

package/src/client/pages/system/PluginReports.tsx

@@ -21,14 +21,14 @@ export function PluginReports(props: {
     return (
       <Card padding="md">
         <div className="flex items-center gap-4">
-          <div className="grid size-10 shrink-0 place-items-center rounded border border-white/[0.07] bg-white/[0.025] text-dashboard-text-muted">
+          <div className="grid size-10 shrink-0 place-items-center rounded-md border border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted">
             <RadioTower aria-hidden="true" size={17} />
           </div>
           <div>
             <h2 className="m-0 font-display text-base font-medium text-dashboard-text-muted">
               Operational reports
             </h2>
-            <p className="mt-1 mb-0 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+            <p className="mt-1 mb-0 font-sans text-xs leading-relaxed text-dashboard-text-muted">
               {props.emptyText}
             </p>
           </div>
@@ -39,10 +39,7 @@ export function PluginReports(props: {
 
   return (
     <div className="grid gap-3">
-      <SectionIntro
-        className="px-1"
-        title="Operational reports"
-      />
+      <SectionIntro className="px-1" title="Operational reports" />
       {props.reports.map((report) => (
         <PluginReportView
           fallbackTitle={props.fallbackTitle}
@@ -68,7 +65,7 @@ function PluginReportView(props: {
   const metrics = props.report.metrics ?? [];
   return (
     <Card>
-      <div className="flex items-start justify-between gap-4 border-b border-white/[0.06] px-5 py-4">
+      <div className="flex items-start justify-between gap-4 border-b border-dashboard-border-subtle px-5 py-4">
         <div className="min-w-0">
           <h3 className="m-0 truncate font-display text-lg font-medium text-dashboard-text">
             {title}
@@ -86,7 +83,7 @@ function PluginReportView(props: {
       {metrics.length ? (
         <div
           className={cn(
-            "grid gap-px bg-white/[0.055]",
+            "grid gap-px bg-dashboard-fill-hover",
             metrics.length === 1 ? "grid-cols-1" : "grid-cols-2",
             metrics.length === 3
               ? "lg:grid-cols-3"
@@ -111,7 +108,7 @@ function PluginReportView(props: {
               <div className="truncate font-display text-2xl font-light leading-none text-dashboard-text">
                 {metric.value}
               </div>
-              <div className="mt-2 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+              <div className="mt-2 font-sans font-medium text-xs text-dashboard-text-muted">
                 {metric.label}
               </div>
             </div>
@@ -119,7 +116,7 @@ function PluginReportView(props: {
         </div>
       ) : null}
       {props.report.widgets?.length ? (
-        <div className="grid gap-3 border-t border-white/[0.06] bg-black/15 p-3 lg:grid-cols-2">
+        <div className="grid gap-3 border-t border-dashboard-border-subtle bg-dashboard-overlay-soft p-3 lg:grid-cols-2">
           {props.report.widgets.map((widget) => (
             <PluginBarChart
               key={widget.id}
@@ -146,4 +143,3 @@ function summaryToneClass(tone: string | undefined): string {
   if (tone === "good") return "shadow-[inset_0_2px_0_rgba(110,231,183,0.55)]";
   return "";
 }
-

package/src/client/pages/system/SkillInventory.tsx

@@ -17,7 +17,7 @@ export function SkillInventory(props: { skills: SkillReport[] }) {
 
   return (
     <Card>
-      <div className="flex items-start justify-between gap-4 border-b border-white/[0.06] px-5 py-4 max-sm:flex-col">
+      <div className="flex items-start justify-between gap-4 border-b border-dashboard-border-subtle px-5 py-4 max-sm:flex-col">
         <SectionIntro
           description={
             <>
@@ -28,7 +28,7 @@ export function SkillInventory(props: { skills: SkillReport[] }) {
           }
           title="Skills"
         />
-        <div className="grid min-w-[12rem] grid-cols-2 overflow-hidden rounded-lg border border-white/[0.07] bg-black/15 max-sm:w-full max-sm:min-w-0">
+        <div className="grid min-w-[12rem] grid-cols-2 overflow-hidden rounded-lg border border-dashboard-border bg-dashboard-overlay-soft max-sm:w-full max-sm:min-w-0">
           <InventoryMetric label="discovered" value={props.skills.length} />
           <InventoryMetric label="from plugins" value={pluginSkillCount} />
         </div>
@@ -42,7 +42,7 @@ export function SkillInventory(props: { skills: SkillReport[] }) {
             />
           ))
         ) : (
-          <div className="rounded-lg border border-dashed border-white/[0.08] px-4 py-8 text-center font-mono text-xs text-dashboard-text-muted">
+          <div className="rounded-lg border border-dashed border-dashboard-border px-4 py-8 text-center font-sans text-xs text-dashboard-text-muted">
             No skills have been discovered yet.
           </div>
         )}
@@ -54,10 +54,10 @@ export function SkillInventory(props: { skills: SkillReport[] }) {
 function SkillGroupCard(props: { group: SkillGroup }) {
   const label = props.group.pluginProvider ?? "Standalone";
   return (
-    <article className="rounded-lg border border-white/[0.065] bg-white/[0.025] p-4">
+    <article className="rounded-lg border border-dashboard-border-subtle bg-dashboard-fill-soft p-4">
       <div className="mb-3 flex items-center justify-between gap-3">
         <div className="flex min-w-0 items-center gap-2.5">
-          <div className="grid size-8 shrink-0 place-items-center rounded border border-cyan-300/15 bg-cyan-300/[0.075] text-cyan-200">
+          <div className="grid size-8 shrink-0 place-items-center rounded-md border border-dashboard-accent/15 bg-dashboard-accent/[0.075] text-dashboard-accent-text">
             {props.group.pluginProvider ? (
               <Boxes aria-hidden="true" size={15} strokeWidth={1.8} />
             ) : (
@@ -68,7 +68,7 @@ function SkillGroupCard(props: { group: SkillGroup }) {
             <h3 className="m-0 truncate font-display text-base font-medium text-dashboard-text">
               {label}
             </h3>
-            <div className="mt-0.5 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+            <div className="mt-0.5 font-sans font-medium text-xs text-dashboard-text-muted">
               {props.group.pluginProvider ? "plugin provider" : "core or local"}
             </div>
           </div>
@@ -81,7 +81,7 @@ function SkillGroupCard(props: { group: SkillGroup }) {
       <div className="flex flex-wrap gap-2">
         {props.group.skills.map((skill) => (
           <span
-            className="rounded border border-white/[0.07] bg-black/20 px-2.5 py-1.5 font-mono text-xs text-dashboard-text-muted"
+            className="rounded-md border border-dashboard-border bg-dashboard-overlay-soft px-2.5 py-1.5 font-mono text-xs text-dashboard-text-muted"
             key={skill.name}
           >
             {skill.name}
@@ -94,11 +94,11 @@ function SkillGroupCard(props: { group: SkillGroup }) {
 
 function InventoryMetric(props: { label: string; value: number }) {
   return (
-    <div className="border-r border-white/[0.06] px-3 py-2.5 text-center last:border-r-0">
+    <div className="border-r border-dashboard-border-subtle px-3 py-2.5 text-center last:border-r-0">
       <div className="font-display text-xl font-light leading-none text-dashboard-text">
         {formatCompactNumber(props.value)}
       </div>
-      <div className="mt-1.5 font-mono text-xs uppercase tracking-[0.1em] text-dashboard-text-muted">
+      <div className="mt-1.5 font-sans font-medium text-xs text-dashboard-text-muted">
         {props.label}
       </div>
     </div>

package/src/client/pages/system/SystemActivity.tsx

@@ -79,7 +79,7 @@ export function SystemActivity(props: {
   return (
     <section aria-label="Runtime telemetry" className="grid gap-4">
       {props.error ? (
-        <p className="m-0 font-mono text-xs text-rose-200/65">
+        <p className="m-0 font-sans text-xs text-rose-200/65">
           Metrics refresh failed. Showing cached data.
         </p>
       ) : null}

package/src/client/pages/system/SystemPage.tsx

@@ -13,10 +13,7 @@ import { PluginPanels } from "./PluginPanels";
 import { PluginReports } from "./PluginReports";
 import { SkillInventory } from "./SkillInventory";
 import { SystemActivity } from "./SystemActivity";
-import {
-  SystemPageLayout,
-  SystemRouteLoading,
-} from "./SystemPageLayout";
+import { SystemPageLayout, SystemRouteLoading } from "./SystemPageLayout";
 import {
   buildSystemPlugins,
   normalizeSystemPath,
@@ -172,14 +169,14 @@ function PluginReportError(props: { showingReports: boolean }) {
   return (
     <Card className="border-amber-300/10 bg-amber-300/[0.025]" padding="sm">
       <div className="flex items-center gap-3">
-        <div className="grid size-9 shrink-0 place-items-center rounded border border-amber-300/15 bg-amber-300/[0.055] text-amber-200/70">
+        <div className="grid size-9 shrink-0 place-items-center rounded-md border border-amber-300/15 bg-amber-300/[0.055] text-amber-200/70">
           <TriangleAlert aria-hidden="true" size={15} />
         </div>
         <div>
           <div className="font-display text-sm font-medium text-dashboard-text-muted">
             Plugin stats failed to load.
           </div>
-          <div className="mt-1 font-mono text-xs leading-relaxed text-dashboard-text-muted">
+          <div className="mt-1 font-sans text-xs leading-relaxed text-dashboard-text-muted">
             {props.showingReports
               ? `Showing the last operational reports ${getDashboardAgentName()} received.`
               : "Plugin details and capabilities are still available."}

package/src/client/pages/system/WorkspaceDetails.tsx

@@ -1,7 +1,4 @@
-import type {
-  StatsReport,
-  WorkspaceReport,
-} from "@sentry/junior/api/schema";
+import type { StatsReport, WorkspaceReport } from "@sentry/junior/api/schema";
 
 import { useStatsData } from "../../api";
 import { EmptyTelemetry } from "../../components/EmptyTelemetry";
@@ -58,7 +55,7 @@ export function WorkspaceDetailsContent(props: {
       ) : (
         <div className="grid min-w-0 gap-3">
           {props.error ? (
-            <p className="m-0 font-mono text-xs text-rose-200/65">
+            <p className="m-0 font-sans text-xs text-rose-200/65">
               Workspace usage refresh failed. Showing cached data.
             </p>
           ) : null}

package/src/client/pages/system/WorkspaceEditor.tsx

@@ -114,7 +114,7 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
           <div className="grid gap-3">
             {props.draft.repos.map((repo, index) => (
               <div
-                className="grid gap-3 rounded-lg border border-white/10 bg-black/20 p-3 sm:p-4"
+                className="grid gap-3 rounded-lg border border-dashboard-border-strong bg-dashboard-overlay-soft p-3 sm:p-4"
                 key={repo.key}
               >
                 <div className="grid gap-3 sm:grid-cols-[minmax(0,8.5rem)_minmax(0,1fr)_auto] sm:items-end">
@@ -202,7 +202,7 @@ export function WorkspaceEditor(props: WorkspaceEditorProps) {
 
         {props.error ? <InlineError>{props.error}</InlineError> : null}
 
-        <div className="flex flex-wrap items-center gap-3 border-t border-white/[0.06] pt-5">
+        <div className="flex flex-wrap items-center gap-3 border-t border-dashboard-border-subtle pt-5">
           <Button disabled={!props.canSave} type="submit">
             {props.busy
               ? "Saving…"

package/src/client/pages/system/WorkspaceList.tsx

@@ -50,7 +50,7 @@ function WorkspaceListItem(props: {
   const openWorkspace = () =>
     navigate(`/system/workspaces/${encodeURIComponent(workspace.id)}`);
   return (
-    <li className="border-b border-white/[0.055] last:border-b-0">
+    <li className="border-b border-dashboard-border-subtle last:border-b-0">
       <SelectableRow
         className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 px-4 py-3.5"
         onSelect={openWorkspace}
@@ -62,7 +62,7 @@ function WorkspaceListItem(props: {
           onClick={openWorkspace}
           type="button"
         >
-          <span className="grid size-9 shrink-0 place-items-center rounded border border-white/10 bg-white/[0.03] text-[#beaaff] transition-colors group-hover:border-cyan-300/20 group-hover:bg-cyan-300/[0.06] group-hover:text-cyan-200">
+          <span className="grid size-9 shrink-0 place-items-center rounded-md border border-dashboard-border-strong bg-dashboard-fill-soft text-dashboard-accent transition-colors group-hover:border-dashboard-accent/20 group-hover:bg-dashboard-accent/[0.06] group-hover:text-dashboard-accent-text">
             <FolderGit2 aria-hidden="true" size={16} />
           </span>
           <span className="min-w-0 flex-1">

package/src/client/pages/user/PluginUserPage.tsx

@@ -87,7 +87,7 @@ export function PluginUserPage(props: { page: PluginUserPageLink }) {
           >
             {content.metrics.map((metric) => (
               <Card className="p-4" key={metric.label}>
-                <div className="font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+                <div className="font-sans font-medium text-xs text-dashboard-text-muted">
                   {metric.label}
                 </div>
                 <div className="mt-3 font-display text-2xl font-light text-dashboard-text">
@@ -121,7 +121,7 @@ export function PluginUserPage(props: { page: PluginUserPageLink }) {
         ) : records.length === 0 ? (
           <Card padding="md">
             <div className="flex items-center gap-4">
-              <div className="grid size-10 shrink-0 place-items-center rounded border border-white/[0.07] bg-white/[0.025] text-dashboard-text-muted">
+              <div className="grid size-10 shrink-0 place-items-center rounded-md border border-dashboard-border bg-dashboard-fill-soft text-dashboard-text-muted">
                 <Boxes aria-hidden="true" size={17} />
               </div>
               <p className="m-0 text-sm text-dashboard-text-muted">
@@ -180,7 +180,7 @@ export function PluginUserPage(props: { page: PluginUserPageLink }) {
                   <dl className="mt-4 flex flex-wrap gap-x-6 gap-y-2">
                     {record.metadata.map((item) => (
                       <div key={item.label}>
-                        <dt className="font-mono text-xs uppercase tracking-[0.12em] text-dashboard-text-muted">
+                        <dt className="font-sans font-medium text-xs text-dashboard-text-muted">
                           {item.label}
                         </dt>
                         <dd className="mt-1 ml-0 font-mono text-xs text-dashboard-text-muted">

package/src/client/styles.ts

@@ -7,12 +7,13 @@ export function cn(
 
 export const dashboardContainerClass = "mx-auto w-full min-w-0 max-w-screen-xl";
 
+/** Underline a neutral inline link, such as a channel or record name in prose. */
+export const dashboardInlineLinkClass =
+  "text-dashboard-text underline decoration-dashboard-border-heavy underline-offset-2 transition-colors hover:decoration-dashboard-text-muted";
+
 export const dashboardInteractiveTextClass =
   "text-dashboard-text-muted hover:text-dashboard-text";
 
 /** Raised input surface so the chat box reads against the near-black shell. */
 export const dashboardComposerSurfaceClass =
-  "rounded-xl border border-dashboard-border-interactive bg-dashboard-surface-active";
-
-/** Shared shell canvas + grid background class from `tailwind.css`. */
-export const dashboardShellBgClass = "dashboard-shell-bg";
+  "rounded-xl border border-dashboard-border-emphasis bg-dashboard-surface-raised shadow-[0_8px_32px_rgba(0,0,0,0.35)] transition-colors";

package/src/client/types.ts

@@ -40,6 +40,8 @@ export type TranscriptViewToolCallPart = {
 export type TranscriptViewSubagentPart = {
   agentName?: string;
   childConversationId: string;
+  /** When the child reached its current terminal status. */
+  finishedTimestamp?: number;
   id: string;
   status: "aborted" | "blocked" | "completed" | "error" | "running";
   subagentKind: string;

package/src/tailwind.css

@@ -2,18 +2,24 @@
 @import "tailwindcss";
 
 /*
- * Dashboard color tokens.
- * Keep structural UI colors here so light/dark themes can share one utility surface.
+ * Dashboard design tokens. components/README.md explains each role.
+ * Keep structural UI colors here so a second theme can redefine them.
  * Prefer roles over opacity ladders. Status accents stay as Tailwind palette utilities.
  */
 @theme {
+  /* Headings, record titles, and large metric values. */
   --font-display:
     "Outfit", "Avenir Next", Avenir, "Segoe UI", -apple-system,
     BlinkMacSystemFont, sans-serif;
-  /* Primary UI/body face. Prefer Inter over the previous mono-first shell. */
+  /* UI face for prose, controls, navigation, labels, and names. */
   --font-sans:
     "Inter", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu,
     sans-serif;
+  /*
+   * Machine values only: code, ids, paths, file names, and raw payloads.
+   * Use font-sans with tabular-nums for counts, times, and prices. Controls,
+   * navigation, and human text use font-sans.
+   */
   --font-mono:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
     monospace;
@@ -43,25 +49,39 @@
   --text-4xl: 2.25rem; /* 36px — large display titles */
   --text-4xl--line-height: 1.15;
 
-  /* Canvas and elevated surfaces */
-  --color-dashboard-bg: #050507;
-  --color-dashboard-bg-elevated: #070707;
-  --color-dashboard-surface-panel: #09090b;
-  --color-dashboard-surface-active: #1a1a1c;
-  --color-dashboard-surface-raised: #0b0b0b;
-  --color-dashboard-surface-hover: #151515;
-  --color-dashboard-control: #111114;
+  /*
+   * Canvas and elevated surfaces, darkest to lightest. One cool zinc hue.
+   * bg: page canvas. bg-elevated: drawers and sheets. surface-panel: sidebar,
+   * cards, and message bubbles. surface-raised: buttons, tooltips, and drawer
+   * headers. control: form controls. surface-hover / surface-active: row
+   * hover and selected rows.
+   */
+  --color-dashboard-bg: #060607;
+  --color-dashboard-bg-elevated: #09090b;
+  --color-dashboard-surface-panel: #0c0c0e;
+  --color-dashboard-surface-active: #1c1c20;
+  --color-dashboard-surface-raised: #101013;
+  --color-dashboard-surface-hover: #17171a;
+  --color-dashboard-control: #121215;
   --color-dashboard-ink: #000000;
 
-  /* Text */
+  /* Text, brightest to dimmest: solid, text, subtle, muted, faint. */
   --color-dashboard-text: #f4f4f5;
   --color-dashboard-text-muted: #a1a1aa;
-  --color-dashboard-text-subtle: #b8b8b8;
-  --color-dashboard-text-faint: #888888;
+  --color-dashboard-text-subtle: #c4c4cc;
+  --color-dashboard-text-faint: #8a8a93;
   --color-dashboard-text-solid: #ffffff;
   --color-dashboard-text-inverse: #000000;
 
-  /* Brand focus used for rings and avatar chips */
+  /*
+   * Brand accent (lavender). Use accent for icons, active markers, and tinted
+   * fills (with an opacity suffix). Use accent-text for links and accent text
+   * on the dark canvas. Focus rings use focus, which is the same hue.
+   * Status colors (info, success, warning, error) and categorical chart or
+   * event colors stay as Tailwind palette utilities.
+   */
+  --color-dashboard-accent: #beaaff;
+  --color-dashboard-accent-text: #ddd3ff;
   --color-dashboard-focus: #beaaff;
 
   /* Hairline borders (pre-multiplied so themes can flip without white/black literals) */
@@ -82,8 +102,7 @@
   --color-dashboard-overlay-soft: rgb(0 0 0 / 0.2);
   --color-dashboard-overlay: rgb(0 0 0 / 0.55);
 
-  /* Shell grid + scroll chrome */
-  --color-dashboard-grid-line: rgb(255 255 255 / 0.04);
+  /* Scroll chrome */
   --color-dashboard-scrollbar-track: rgb(255 255 255 / 0.02);
   --color-dashboard-scrollbar-thumb: rgb(255 255 255 / 0.1);
   --color-dashboard-scrollbar-thumb-hover: rgb(255 255 255 / 0.2);
@@ -118,27 +137,6 @@
   }
 }
 
-/* Shared shell canvas + grid. Prefer this class over inline background styles. */
-.dashboard-shell-bg {
-  background-color: var(--color-dashboard-bg);
-  background-image:
-    radial-gradient(
-      ellipse at 50% 0%,
-      transparent 0%,
-      var(--color-dashboard-bg) 70%
-    ),
-    linear-gradient(var(--color-dashboard-grid-line) 1px, transparent 1px),
-    linear-gradient(
-      90deg,
-      var(--color-dashboard-grid-line) 1px,
-      transparent 1px
-    );
-  background-size:
-    100% 100%,
-    40px 40px,
-    40px 40px;
-}
-
 @source "./app.ts";
 @source "./dashboardLoader.ts";
 @source "./client.tsx";