From 2f501fc9c5d355c99ccb4a7cf258e08e72887223 Mon Sep 17 00:00:00 2001
From: John Hu <huziyong@gmail.com>
Date: Sun, 21 Jun 2026 07:48:07 +0800
Subject: [PATCH 1/6] feat(console): warm tactile design tokens + paper grain

---
 apps/console/app/globals.css | 142 +++++++++++++++++++++++++----------
 1 file changed, 102 insertions(+), 40 deletions(-)

diff --git a/apps/console/app/globals.css b/apps/console/app/globals.css
index fc3189e..fc48e3b 100644
--- a/apps/console/app/globals.css
+++ b/apps/console/app/globals.css
@@ -1,59 +1,69 @@
 @import "tailwindcss";
 
 /*
- * Auriga console design tokens. One design system: a calm, dense, neutral base
- * with a single near-black accent; semantic state colors live with the Badge.
- * Dark mode follows the OS via prefers-color-scheme (Tailwind v4's default
- * `dark:` variant keys on the same media query, so both stay in sync).
+ * Auriga console design tokens. One design system: a warm, tactile, layered base —
+ * a soft cream / charcoal neutral ramp (no brand color), depth from layered shadows
+ * and hairline rings, and a faint paper grain over the page. Semantic state colors
+ * live with the Badge. Dark mode follows the OS via prefers-color-scheme (Tailwind
+ * v4's default `dark:` variant keys on the same media query, so both stay in sync).
  */
 :root {
-  --background: 0 0% 100%;
-  --foreground: 240 10% 4%;
-  --card: 0 0% 100%;
-  --card-foreground: 240 10% 4%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 240 10% 4%;
-  --primary: 240 6% 10%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 240 5% 96%;
-  --secondary-foreground: 240 6% 10%;
-  --muted: 240 5% 96%;
-  --muted-foreground: 240 4% 44%;
-  --accent: 240 5% 95%;
-  --accent-foreground: 240 6% 10%;
+  --background: 40 22% 97%;
+  --foreground: 28 9% 12%;
+  --card: 40 40% 99%;
+  --card-foreground: 28 9% 12%;
+  --popover: 40 40% 99%;
+  --popover-foreground: 28 9% 12%;
+  --primary: 28 11% 15%;
+  --primary-foreground: 40 30% 98%;
+  --secondary: 40 16% 93%;
+  --secondary-foreground: 28 11% 15%;
+  --muted: 40 16% 93%;
+  --muted-foreground: 30 6% 40%;
+  --accent: 38 18% 90%;
+  --accent-foreground: 28 11% 15%;
   --destructive: 0 72% 51%;
   --destructive-foreground: 0 0% 98%;
-  --border: 240 6% 90%;
-  --input: 240 6% 88%;
-  --ring: 240 6% 30%;
-  --radius: 0.625rem;
+  --border: 36 16% 87%;
+  --input: 36 15% 84%;
+  --ring: 30 9% 32%;
+  --radius: 0.75rem;
+
+  /* A single faint paper grain, reused by the body and elevated surfaces. */
+  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  --grain-opacity: 0.03;
+  --grain-opacity-surface: 0.035;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: 240 10% 4%;
-    --foreground: 0 0% 96%;
-    --card: 240 9% 7%;
-    --card-foreground: 0 0% 96%;
-    --popover: 240 9% 7%;
-    --popover-foreground: 0 0% 96%;
-    --primary: 0 0% 96%;
-    --primary-foreground: 240 6% 10%;
-    --secondary: 240 4% 14%;
-    --secondary-foreground: 0 0% 96%;
-    --muted: 240 4% 14%;
-    --muted-foreground: 240 5% 64%;
-    --accent: 240 4% 16%;
-    --accent-foreground: 0 0% 96%;
+    --background: 30 8% 7%;
+    --foreground: 40 16% 92%;
+    --card: 30 7% 11%;
+    --card-foreground: 40 16% 92%;
+    --popover: 30 7% 11%;
+    --popover-foreground: 40 16% 92%;
+    --primary: 40 18% 92%;
+    --primary-foreground: 28 11% 12%;
+    --secondary: 30 6% 16%;
+    --secondary-foreground: 40 16% 92%;
+    --muted: 30 6% 16%;
+    --muted-foreground: 38 9% 62%;
+    --accent: 30 6% 19%;
+    --accent-foreground: 40 16% 92%;
     --destructive: 0 62% 47%;
     --destructive-foreground: 0 0% 98%;
-    --border: 240 4% 16%;
-    --input: 240 4% 18%;
-    --ring: 240 5% 70%;
+    --border: 36 7% 20%;
+    --input: 36 7% 22%;
+    --ring: 40 12% 70%;
+
+    --grain-opacity: 0.05;
+    --grain-opacity-surface: 0.05;
   }
 }
 
-/* Map the tokens onto Tailwind color utilities (bg-background, text-muted-foreground, …). */
+/* Map the tokens onto Tailwind color utilities (bg-background, text-muted-foreground, …)
+ * plus the layered shadow + radius scale used by the primitives. */
 @theme inline {
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
@@ -74,9 +84,14 @@
   --color-border: hsl(var(--border));
   --color-input: hsl(var(--input));
   --color-ring: hsl(var(--ring));
+  --radius-xl: calc(var(--radius) + 4px);
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
+  /* Soft, warm-tinted layered shadows. Light-mode tuned; on dark the hairline
+   * ring + border carry the elevation, so the faint shadow simply recedes. */
+  --shadow-card: 0 1px 2px -1px hsl(28 20% 12% / 0.06), 0 4px 12px -4px hsl(28 20% 12% / 0.08);
+  --shadow-card-lg: 0 2px 6px -2px hsl(28 20% 12% / 0.08), 0 12px 28px -8px hsl(28 20% 12% / 0.12);
 }
 
 @layer base {
@@ -87,12 +102,59 @@
   }
   body {
     background-color: hsl(var(--background));
+    /* A soft warm wash from the top gives the page gentle depth. */
+    background-image: radial-gradient(
+      48rem 32rem at 50% -8%,
+      hsl(40 36% 88% / 0.55),
+      transparent 70%
+    );
     color: hsl(var(--foreground));
     font-family:
       ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    line-height: 1.55;
+    letter-spacing: -0.005em;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
+  @media (prefers-color-scheme: dark) {
+    body {
+      background-image: radial-gradient(
+        48rem 32rem at 50% -8%,
+        hsl(40 18% 40% / 0.12),
+        transparent 70%
+      );
+    }
+  }
+  h1,
+  h2,
+  h3 {
+    letter-spacing: -0.013em;
+  }
+}
+
+/* Faint paper grain over the whole page (behind content). */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image: var(--grain);
+  opacity: var(--grain-opacity);
+}
+
+/* Opt-in grain for elevated surfaces (cards, panels) — gives them a tactile face. */
+.auriga-grain {
+  position: relative;
+}
+.auriga-grain::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  background-image: var(--grain);
+  opacity: var(--grain-opacity-surface);
 }
 
 /* A soft pulse for the live "running" indicator dot. */

From 1d51c34a1df58e6d1a81f2d9afdc979c7ba2e8de Mon Sep 17 00:00:00 2001
From: John Hu <huziyong@gmail.com>
Date: Sun, 21 Jun 2026 07:51:45 +0800
Subject: [PATCH 2/6] feat(console): refresh shared UI primitives

---
 apps/console/components/sparkline.tsx      |  7 ++++-
 apps/console/components/ui/badge.tsx       | 21 +++++--------
 apps/console/components/ui/bar.tsx         |  9 ++++--
 apps/console/components/ui/button.tsx      | 14 ++++-----
 apps/console/components/ui/card.tsx        | 11 +++++--
 apps/console/components/ui/empty-state.tsx | 35 ++++++++++++++++++++++
 apps/console/components/ui/input.tsx       |  2 +-
 apps/console/components/ui/select.tsx      |  2 +-
 apps/console/components/ui/table.tsx       | 24 +++++++++++----
 apps/console/components/ui/textarea.tsx    |  2 +-
 10 files changed, 93 insertions(+), 34 deletions(-)
 create mode 100644 apps/console/components/ui/empty-state.tsx

diff --git a/apps/console/components/sparkline.tsx b/apps/console/components/sparkline.tsx
index e16877c..ac6d490 100644
--- a/apps/console/components/sparkline.tsx
+++ b/apps/console/components/sparkline.tsx
@@ -14,19 +14,24 @@ export function Sparkline({
   const H = 40;
   const points = sparklinePoints(values, W, H);
   if (!points) return <span className="text-xs text-muted-foreground">no data</span>;
+  // Close the line into a filled area: drop to the baseline at both ends. A flat
+  // translucent fill (no <defs> gradient) keeps this SSR-safe — no generated ids.
+  const area = `0,${H} ${points} ${W},${H}`;
   return (
     <svg
       viewBox={`0 0 ${W} ${H}`}
       preserveAspectRatio="none"
       role="img"
       aria-label={ariaLabel ?? "trend"}
-      className={cn("h-10 w-full text-primary", className)}
+      className={cn("h-10 w-full text-foreground", className)}
     >
+      <polygon points={area} className="fill-foreground/10" stroke="none" />
       <polyline
         points={points}
         fill="none"
         stroke="currentColor"
         strokeWidth={1.5}
+        strokeLinecap="round"
         strokeLinejoin="round"
         vectorEffect="non-scaling-stroke"
       />
diff --git a/apps/console/components/ui/badge.tsx b/apps/console/components/ui/badge.tsx
index ca33841..5529477 100644
--- a/apps/console/components/ui/badge.tsx
+++ b/apps/console/components/ui/badge.tsx
@@ -6,12 +6,12 @@ import type { JobState } from "@/lib/types";
 // ring read calmly on both light and dark; `dark:` keys on prefers-color-scheme to
 // match the token theme.
 const TONE: Record<string, string> = {
-  done: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 ring-emerald-500/25",
-  failed: "bg-red-500/15 text-red-700 dark:text-red-400 ring-red-500/25",
-  running: "bg-blue-500/15 text-blue-700 dark:text-blue-400 ring-blue-500/25",
-  planning: "bg-indigo-500/15 text-indigo-700 dark:text-indigo-400 ring-indigo-500/25",
-  verifying: "bg-amber-500/15 text-amber-700 dark:text-amber-400 ring-amber-500/25",
-  paused: "bg-amber-500/15 text-amber-700 dark:text-amber-400 ring-amber-500/25",
+  done: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300 ring-emerald-500/30",
+  failed: "bg-red-500/15 text-red-700 dark:text-red-300 ring-red-500/30",
+  running: "bg-blue-500/15 text-blue-700 dark:text-blue-300 ring-blue-500/30",
+  planning: "bg-indigo-500/15 text-indigo-700 dark:text-indigo-300 ring-indigo-500/30",
+  verifying: "bg-amber-500/15 text-amber-700 dark:text-amber-300 ring-amber-500/30",
+  paused: "bg-amber-500/15 text-amber-700 dark:text-amber-300 ring-amber-500/30",
   pending: "bg-muted text-muted-foreground ring-border",
   cancelled: "bg-muted text-muted-foreground ring-border",
 };
@@ -36,18 +36,13 @@ export function Badge({
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium ring-1 ring-inset",
+        "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium ring-1 ring-inset",
         cls,
         className,
       )}
     >
       {dot && (
-        <span
-          className={cn(
-            "size-1.5 rounded-full bg-current",
-            live && "auriga-live-dot",
-          )}
-        />
+        <span className={cn("size-1.5 rounded-full bg-current", live && "auriga-live-dot")} />
       )}
       {children}
     </span>
diff --git a/apps/console/components/ui/bar.tsx b/apps/console/components/ui/bar.tsx
index 00f1af8..51aa7d7 100644
--- a/apps/console/components/ui/bar.tsx
+++ b/apps/console/components/ui/bar.tsx
@@ -18,14 +18,17 @@ export function Bar({
 }) {
   const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
   return (
-    <div className={cn("space-y-1", className)}>
+    <div className={cn("space-y-1.5", className)}>
       <div className="flex items-baseline justify-between gap-2 text-xs">
         <span className="truncate text-foreground">{label}</span>
         <span className="shrink-0 tabular-nums text-muted-foreground">{valueLabel ?? value}</span>
       </div>
-      <div className="h-1.5 overflow-hidden rounded-full bg-muted">
+      <div className="h-2 overflow-hidden rounded-full bg-muted ring-1 ring-inset ring-border/60">
         <div
-          className={cn("h-full rounded-full", warn ? "bg-amber-500" : "bg-primary")}
+          className={cn(
+            "h-full rounded-full bg-gradient-to-r",
+            warn ? "from-amber-500/80 to-amber-500" : "from-primary/75 to-primary",
+          )}
           style={{ width: `${pct}%` }}
         />
       </div>
diff --git a/apps/console/components/ui/button.tsx b/apps/console/components/ui/button.tsx
index 974e1c9..359cd59 100644
--- a/apps/console/components/ui/button.tsx
+++ b/apps/console/components/ui/button.tsx
@@ -4,23 +4,23 @@ import type { ButtonHTMLAttributes } from "react";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-1.5 whitespace-nowrap rounded-lg text-sm font-medium transition-[background-color,box-shadow,transform,color,border-color] duration-150 active:translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 disabled:active:translate-y-0 [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         // "primary"/"secondary" kept as the canonical names the existing call sites use.
-        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         secondary:
-          "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-card text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground",
         outline:
           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
         ghost: "hover:bg-accent hover:text-accent-foreground",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
       },
       size: {
-        default: "h-8 px-3 py-1.5",
-        sm: "h-7 rounded-sm px-2.5 text-xs",
-        icon: "h-8 w-8",
+        default: "h-9 px-3.5 py-2",
+        sm: "h-8 rounded-md px-2.5 text-xs",
+        icon: "h-9 w-9",
       },
     },
     defaultVariants: { variant: "primary", size: "default" },
diff --git a/apps/console/components/ui/card.tsx b/apps/console/components/ui/card.tsx
index 726c69a..645c99d 100644
--- a/apps/console/components/ui/card.tsx
+++ b/apps/console/components/ui/card.tsx
@@ -5,7 +5,9 @@ export function Card({ className, children }: { className?: string; children: Re
   return (
     <div
       className={cn(
-        "rounded-lg border bg-card text-card-foreground p-4 shadow-sm",
+        // Layered, tactile surface: warm card tone over the page, a hairline border,
+        // a soft drop shadow for lift, and a faint paper grain on the face.
+        "auriga-grain rounded-xl border bg-card text-card-foreground p-5 shadow-card",
         className,
       )}
     >
@@ -16,7 +18,12 @@ export function Card({ className, children }: { className?: string; children: Re
 
 export function CardTitle({ className, children }: { className?: string; children: ReactNode }) {
   return (
-    <h3 className={cn("mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground", className)}>
+    <h3
+      className={cn(
+        "mb-3 text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-muted-foreground",
+        className,
+      )}
+    >
       {children}
     </h3>
   );
diff --git a/apps/console/components/ui/empty-state.tsx b/apps/console/components/ui/empty-state.tsx
new file mode 100644
index 0000000..3ff75bb
--- /dev/null
+++ b/apps/console/components/ui/empty-state.tsx
@@ -0,0 +1,35 @@
+import type { ComponentType, ReactNode } from "react";
+import { cn } from "@/lib/utils";
+
+/** A calm placeholder for empty / unavailable data — replaces bare `<p>` messages. */
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  className,
+  children,
+}: {
+  icon?: ComponentType<{ className?: string }>;
+  title: string;
+  description?: ReactNode;
+  className?: string;
+  children?: ReactNode;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-border bg-muted/30 px-6 py-10 text-center",
+        className,
+      )}
+    >
+      {Icon && (
+        <div className="flex size-10 items-center justify-center rounded-full bg-muted text-muted-foreground ring-1 ring-inset ring-border">
+          <Icon className="size-5" />
+        </div>
+      )}
+      <p className="text-sm font-medium text-foreground">{title}</p>
+      {description && <p className="max-w-sm text-xs text-muted-foreground">{description}</p>}
+      {children}
+    </div>
+  );
+}
diff --git a/apps/console/components/ui/input.tsx b/apps/console/components/ui/input.tsx
index 4d747b0..eab5bc7 100644
--- a/apps/console/components/ui/input.tsx
+++ b/apps/console/components/ui/input.tsx
@@ -5,7 +5,7 @@ export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElem
   return (
     <input
       className={cn(
-        "flex h-8 w-full rounded-md border border-input bg-background px-2.5 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/apps/console/components/ui/select.tsx b/apps/console/components/ui/select.tsx
index 61f2aed..1ae94d8 100644
--- a/apps/console/components/ui/select.tsx
+++ b/apps/console/components/ui/select.tsx
@@ -5,7 +5,7 @@ export function Select({ className, children, ...props }: SelectHTMLAttributes<H
   return (
     <select
       className={cn(
-        "flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-9 w-full rounded-lg border border-input bg-background px-2.5 py-1 text-sm shadow-sm transition-colors focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
diff --git a/apps/console/components/ui/table.tsx b/apps/console/components/ui/table.tsx
index 287aa3d..c6fa0ee 100644
--- a/apps/console/components/ui/table.tsx
+++ b/apps/console/components/ui/table.tsx
@@ -2,12 +2,17 @@ import type { ReactNode } from "react";
 import { cn } from "@/lib/utils";
 
 export function Table({ children, className }: { children: ReactNode; className?: string }) {
-  return <table className={cn("w-full border-collapse text-sm", className)}>{children}</table>;
+  // Allow wide tables to scroll horizontally on small screens without breaking the card.
+  return (
+    <div className="-mx-1 overflow-x-auto">
+      <table className={cn("w-full border-collapse text-sm", className)}>{children}</table>
+    </div>
+  );
 }
 
 export function THead({ children }: { children: ReactNode }) {
   return (
-    <thead className="text-left text-xs uppercase tracking-wide text-muted-foreground">
+    <thead className="text-left text-[0.7rem] uppercase tracking-[0.08em] text-muted-foreground [&_th]:border-b [&_th]:border-border">
       {children}
     </thead>
   );
@@ -18,17 +23,26 @@ export function TBody({ children }: { children: ReactNode }) {
 }
 
 export function TR({ children, className }: { children: ReactNode; className?: string }) {
-  return <tr className={cn("border-b last:border-0 hover:bg-muted/40", className)}>{children}</tr>;
+  return (
+    <tr
+      className={cn(
+        "border-b border-border/60 transition-colors last:border-0 hover:bg-accent/50",
+        className,
+      )}
+    >
+      {children}
+    </tr>
+  );
 }
 
 export function TH({ children }: { children: ReactNode }) {
   return (
-    <th scope="col" className="px-3 py-2 font-medium">
+    <th scope="col" className="px-3 py-2.5 font-semibold">
       {children}
     </th>
   );
 }
 
 export function TD({ children, className }: { children: ReactNode; className?: string }) {
-  return <td className={cn("px-3 py-2 align-top", className)}>{children}</td>;
+  return <td className={cn("px-3 py-2.5 align-top", className)}>{children}</td>;
 }
diff --git a/apps/console/components/ui/textarea.tsx b/apps/console/components/ui/textarea.tsx
index 77dbd1b..dd5bec6 100644
--- a/apps/console/components/ui/textarea.tsx
+++ b/apps/console/components/ui/textarea.tsx
@@ -5,7 +5,7 @@ export function Textarea({ className, ...props }: TextareaHTMLAttributes<HTMLTex
   return (
     <textarea
       className={cn(
-        "flex w-full rounded-md border border-input bg-background px-2.5 py-1.5 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "flex w-full rounded-lg border border-input bg-background px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}

From ec7c87cbe2a149f30c4034d35cf62c4f19abfa77 Mon Sep 17 00:00:00 2001
From: John Hu <huziyong@gmail.com>
Date: Sun, 21 Jun 2026 07:52:59 +0800
Subject: [PATCH 3/6] feat(console): redesign app shell and navigation

---
 apps/console/app/layout.tsx               | 63 +++++++++++------------
 apps/console/components/logout-button.tsx |  2 +-
 apps/console/components/nav-links.tsx     | 43 ++++++++++++++++
 3 files changed, 73 insertions(+), 35 deletions(-)
 create mode 100644 apps/console/components/nav-links.tsx

diff --git a/apps/console/app/layout.tsx b/apps/console/app/layout.tsx
index 744e880..831faa2 100644
--- a/apps/console/app/layout.tsx
+++ b/apps/console/app/layout.tsx
@@ -1,7 +1,9 @@
 import type { Metadata } from "next";
-import type { ReactNode } from "react";
 import Link from "next/link";
+import type { ReactNode } from "react";
 import { LogoutButton } from "@/components/logout-button";
+import { NavLinks } from "@/components/nav-links";
+import { Button } from "@/components/ui/button";
 import { getSession } from "@/lib/session";
 import "./globals.css";
 
@@ -10,47 +12,40 @@ export const metadata: Metadata = {
   description: "Auriga control-plane console",
 };
 
-const NAV = [
-  { href: "/", label: "Dashboard" },
-  { href: "/jobs", label: "Jobs" },
-  { href: "/skills", label: "Skills" },
-  { href: "/config", label: "Config" },
-];
-
 export default async function RootLayout({ children }: { children: ReactNode }) {
   const session = await getSession();
   return (
     <html lang="en">
       <body className="min-h-screen bg-background text-foreground">
-        <header className="sticky top-0 z-20 border-b bg-background/80 backdrop-blur">
-          <div className="mx-auto flex h-12 max-w-6xl items-center gap-5 px-6">
-            <Link href="/" className="text-sm font-bold tracking-tight">
-              Auriga
+        <header className="sticky top-0 z-20 border-b border-border/70 bg-background/70 backdrop-blur-md">
+          <div className="mx-auto flex h-14 max-w-6xl items-center gap-3 px-6">
+            <Link href="/" className="flex items-center gap-2 font-semibold tracking-tight">
+              <span className="grid size-6 place-items-center rounded-md bg-primary text-[0.7rem] font-bold text-primary-foreground shadow-sm">
+                A
+              </span>
+              <span className="text-sm">Auriga</span>
             </Link>
-            <nav className="flex items-center gap-4 text-sm text-muted-foreground">
-              {NAV.map((n) => (
-                <Link key={n.href} href={n.href} className="transition-colors hover:text-foreground">
-                  {n.label}
-                </Link>
-              ))}
-              <Link
-                href="/jobs/new"
-                className="font-medium text-foreground transition-colors hover:text-foreground/80"
-              >
-                + New job
-              </Link>
-            </nav>
-            {session && (
-              <div className="ml-auto flex items-center gap-3 text-sm text-muted-foreground">
-                <span className="tabular-nums">
-                  {session.factio} · {session.role}
-                </span>
-                <LogoutButton />
-              </div>
-            )}
+            <div className="mx-1 hidden h-5 w-px bg-border sm:block" aria-hidden="true" />
+            <NavLinks />
+            <div className="ml-auto flex items-center gap-3">
+              <Button asChild size="sm">
+                <Link href="/jobs/new">+ New job</Link>
+              </Button>
+              {session && (
+                <div className="flex items-center gap-2.5 text-sm text-muted-foreground">
+                  <span className="hidden items-center gap-1.5 rounded-full border border-border bg-card px-2.5 py-1 text-xs shadow-sm sm:inline-flex">
+                    <span className="size-1.5 rounded-full bg-emerald-500" aria-hidden="true" />
+                    <span className="tabular-nums">
+                      {session.factio} · {session.role}
+                    </span>
+                  </span>
+                  <LogoutButton />
+                </div>
+              )}
+            </div>
           </div>
         </header>
-        <main className="mx-auto max-w-6xl px-6 py-6">{children}</main>
+        <main className="mx-auto max-w-6xl px-6 py-8">{children}</main>
       </body>
     </html>
   );
diff --git a/apps/console/components/logout-button.tsx b/apps/console/components/logout-button.tsx
index 35911d5..feb284b 100644
--- a/apps/console/components/logout-button.tsx
+++ b/apps/console/components/logout-button.tsx
@@ -15,7 +15,7 @@ export function LogoutButton() {
         router.push("/login");
       })}
       disabled={pending}
-      className="text-sm text-neutral-600 hover:underline"
+      className="text-sm text-muted-foreground transition-colors hover:text-foreground"
     >
       {pending ? "…" : "logout"}
     </button>
diff --git a/apps/console/components/nav-links.tsx b/apps/console/components/nav-links.tsx
new file mode 100644
index 0000000..6a983b1
--- /dev/null
+++ b/apps/console/components/nav-links.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+const NAV = [
+  { href: "/", label: "Dashboard" },
+  { href: "/jobs", label: "Jobs" },
+  { href: "/skills", label: "Skills" },
+  { href: "/config", label: "Config" },
+];
+
+function isActive(pathname: string, href: string) {
+  return href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(`${href}/`);
+}
+
+/** Primary nav with active-route highlighting (client-side via usePathname). */
+export function NavLinks() {
+  const pathname = usePathname() ?? "/";
+  return (
+    <nav className="flex items-center gap-1 text-sm">
+      {NAV.map((n) => {
+        const active = isActive(pathname, n.href);
+        return (
+          <Link
+            key={n.href}
+            href={n.href}
+            aria-current={active ? "page" : undefined}
+            className={cn(
+              "rounded-md px-2.5 py-1.5 font-medium transition-colors",
+              active
+                ? "bg-accent text-foreground"
+                : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
+            )}
+          >
+            {n.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}

From db42b08f620d05e22f59295a31c0a669fcceea87 Mon Sep 17 00:00:00 2001
From: John Hu <huziyong@gmail.com>
Date: Sun, 21 Jun 2026 07:56:22 +0800
Subject: [PATCH 4/6] feat(console): polish dashboard, jobs, and job detail

---
 apps/console/app/jobs/[id]/page.tsx           |  50 ++++++--
 apps/console/app/jobs/page.tsx                |  43 +++++--
 apps/console/app/page.tsx                     | 113 +++++++++++-------
 apps/console/components/live-run.tsx          |   4 +-
 .../console/components/run-timeline-panel.tsx |  10 +-
 apps/console/components/run-timeline.tsx      |   8 +-
 apps/console/components/workspace-viewer.tsx  |   4 +-
 7 files changed, 159 insertions(+), 73 deletions(-)

diff --git a/apps/console/app/jobs/[id]/page.tsx b/apps/console/app/jobs/[id]/page.tsx
index 78099ca..a68651e 100644
--- a/apps/console/app/jobs/[id]/page.tsx
+++ b/apps/console/app/jobs/[id]/page.tsx
@@ -1,3 +1,5 @@
+import { ChevronLeft } from "lucide-react";
+import Link from "next/link";
 import { notFound } from "next/navigation";
 import { api } from "@/lib/api";
 import { ApproveButton } from "@/components/approve-button";
@@ -25,28 +27,41 @@ export default async function JobDetailPage({ params }: { params: Promise<{ id:
   const trace = live ? null : await api.trace(id);
   const ws = await api.workspace(id);
   const tokens = job.usage.input_tokens + job.usage.output_tokens;
+  const hasActions = a.needsApproval || a.runnable || a.pausable || a.cancellable;
 
   return (
     <div className="space-y-5">
+      <Link
+        href="/jobs"
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+      >
+        <ChevronLeft className="size-4" />
+        Jobs
+      </Link>
+
       <Card>
-        <div className="flex items-center gap-3">
+        <div className="flex flex-wrap items-center gap-3">
           <h1 className="font-mono text-sm font-semibold">{job.id}</h1>
           <Badge tone={job.state} dot>
             {job.state}
           </Badge>
           {job.reason && <span className="text-sm text-muted-foreground">{job.reason}</span>}
         </div>
-        <p className="mt-2 text-sm">{job.spec.goal}</p>
-        <p className="mt-2 text-xs text-muted-foreground tabular-nums">
-          model {job.model ?? "—"} · attempts {job.attempts} · steps {job.steps} · tokens{" "}
-          {tokens.toLocaleString()}
-        </p>
-        <div className="mt-3 flex flex-wrap items-center gap-3">
-          {a.needsApproval && <ApproveButton id={job.id} />}
-          {a.runnable && <RunButton id={job.id} label={a.resumable ? "Resume" : "Run"} />}
-          {a.pausable && <PauseButton id={job.id} />}
-          {a.cancellable && <CancelButton id={job.id} />}
-        </div>
+        <p className="mt-3 text-base leading-relaxed">{job.spec.goal}</p>
+        <dl className="mt-4 flex flex-wrap gap-x-8 gap-y-3">
+          <Meta label="model" value={job.model ?? "—"} />
+          <Meta label="attempts" value={job.attempts} />
+          <Meta label="steps" value={job.steps} />
+          <Meta label="tokens" value={tokens.toLocaleString()} />
+        </dl>
+        {hasActions && (
+          <div className="mt-5 flex flex-wrap items-center gap-2 border-t border-border/60 pt-4">
+            {a.needsApproval && <ApproveButton id={job.id} />}
+            {a.runnable && <RunButton id={job.id} label={a.resumable ? "Resume" : "Run"} />}
+            {a.pausable && <PauseButton id={job.id} />}
+            {a.cancellable && <CancelButton id={job.id} />}
+          </div>
+        )}
       </Card>
 
       <Card>
@@ -76,3 +91,14 @@ export default async function JobDetailPage({ params }: { params: Promise<{ id:
     </div>
   );
 }
+
+function Meta({ label, value }: { label: string; value: string | number }) {
+  return (
+    <div className="flex flex-col gap-0.5">
+      <dt className="text-[0.65rem] font-medium uppercase tracking-[0.08em] text-muted-foreground">
+        {label}
+      </dt>
+      <dd className="text-sm font-medium tabular-nums">{value}</dd>
+    </div>
+  );
+}
diff --git a/apps/console/app/jobs/page.tsx b/apps/console/app/jobs/page.tsx
index c720643..a442cda 100644
--- a/apps/console/app/jobs/page.tsx
+++ b/apps/console/app/jobs/page.tsx
@@ -1,10 +1,12 @@
+import { CloudOff, Inbox } from "lucide-react";
 import Link from "next/link";
 import { api } from "@/lib/api";
 import { JobRowActions } from "@/components/job-row-actions";
 import { JobsFilterBar } from "@/components/jobs-filter-bar";
 import { JobsPager } from "@/components/jobs-pager";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardTitle } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
+import { EmptyState } from "@/components/ui/empty-state";
 import { Table, TBody, TD, TH, THead, TR } from "@/components/ui/table";
 
 export const dynamic = "force-dynamic";
@@ -30,19 +32,38 @@ export default async function JobsPage({ searchParams }: { searchParams: SearchP
     offset,
   });
 
-  if (!page) return <p className="text-muted-foreground">API unavailable or unauthorized.</p>;
+  if (!page) {
+    return (
+      <EmptyState
+        icon={CloudOff}
+        title="Unavailable"
+        description="The API could not be reached, or you're not authorized to view jobs."
+      />
+    );
+  }
 
   return (
-    <Card>
-      <div className="mb-3 flex flex-wrap items-center justify-between gap-3">
-        <CardTitle className="mb-0">Jobs</CardTitle>
+    <div className="space-y-6">
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div>
+          <h1 className="text-xl font-semibold tracking-tight">Jobs</h1>
+          <p className="mt-1 text-sm text-muted-foreground tabular-nums">
+            {page.total.toLocaleString()} total
+          </p>
+        </div>
         <JobsFilterBar />
       </div>
 
       {page.jobs.length === 0 ? (
-        <p className="text-muted-foreground">No jobs match.</p>
+        <Card>
+          <EmptyState
+            icon={Inbox}
+            title="No jobs match"
+            description="Try clearing the filters, or create a new job to get started."
+          />
+        </Card>
       ) : (
-        <>
+        <Card>
           <Table>
             <THead>
               <TR>
@@ -58,7 +79,7 @@ export default async function JobsPage({ searchParams }: { searchParams: SearchP
                 <TR key={j.id}>
                   <TD>
                     <Link
-                      className="font-mono text-xs text-foreground hover:underline"
+                      className="font-mono text-xs text-foreground transition-colors hover:text-foreground/70 hover:underline"
                       href={`/jobs/${encodeURIComponent(j.id)}`}
                     >
                       {j.id}
@@ -78,11 +99,11 @@ export default async function JobsPage({ searchParams }: { searchParams: SearchP
               ))}
             </TBody>
           </Table>
-          <div className="mt-3">
+          <div className="mt-4">
             <JobsPager total={page.total} limit={page.limit} offset={page.offset} />
           </div>
-        </>
+        </Card>
       )}
-    </Card>
+    </div>
   );
 }
diff --git a/apps/console/app/page.tsx b/apps/console/app/page.tsx
index 16acc3b..498b7a9 100644
--- a/apps/console/app/page.tsx
+++ b/apps/console/app/page.tsx
@@ -1,33 +1,51 @@
+import { CloudOff, DollarSign, Layers, Users } from "lucide-react";
 import Link from "next/link";
+import type { ComponentType } from "react";
 import { api } from "@/lib/api";
 import { Sparkline } from "@/components/sparkline";
 import { Badge } from "@/components/ui/badge";
 import { Bar } from "@/components/ui/bar";
 import { Card, CardTitle } from "@/components/ui/card";
+import { EmptyState } from "@/components/ui/empty-state";
 import { Table, TBody, TD, TH, THead, TR } from "@/components/ui/table";
 
 export const dynamic = "force-dynamic";
 
 export default async function DashboardPage() {
   const dash = await api.dashboard();
-  if (!dash) return <p className="text-muted-foreground">API unavailable.</p>;
+  if (!dash) {
+    return (
+      <EmptyState
+        icon={CloudOff}
+        title="API unavailable"
+        description="The control-plane API could not be reached. Check that it's running and try again."
+      />
+    );
+  }
 
   const totalActive = dash.active.reduce((sum, a) => sum + a.active, 0);
   const maxModelCost = Math.max(...dash.byModel.map((m) => m.cost_usd), 0.0001);
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight">Overview</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Control-plane activity across all tenants.
+        </p>
+      </div>
+
       <div className="grid gap-4 sm:grid-cols-3">
-        <Stat label="Jobs" value={dash.totals.jobs.toLocaleString()} />
-        <Stat label="Tenants" value={dash.totals.tenants.toLocaleString()} />
-        <Stat label="Cost" value={`~$${dash.totals.cost_usd.toFixed(4)}`} />
+        <Stat label="Jobs" value={dash.totals.jobs.toLocaleString()} icon={Layers} />
+        <Stat label="Tenants" value={dash.totals.tenants.toLocaleString()} icon={Users} />
+        <Stat label="Cost" value={`~$${dash.totals.cost_usd.toFixed(4)}`} icon={DollarSign} />
       </div>
 
       <div className="grid gap-4 lg:grid-cols-3">
         <Card>
           <CardTitle>Cost trend</CardTitle>
           <Sparkline values={dash.costTrend.map((p) => p.cost_usd)} ariaLabel="daily cost trend" />
-          <p className="mt-1 text-xs text-muted-foreground tabular-nums">
+          <p className="mt-2 text-xs text-muted-foreground tabular-nums">
             {dash.costTrend.length > 0
               ? `${dash.costTrend[0]?.bucket} → ${dash.costTrend.at(-1)?.bucket}`
               : "no data"}{" "}
@@ -40,7 +58,7 @@ export default async function DashboardPage() {
           {dash.byModel.length === 0 ? (
             <p className="text-sm text-muted-foreground">no data</p>
           ) : (
-            <div className="space-y-2">
+            <div className="space-y-2.5">
               {dash.byModel.slice(0, 6).map((m) => (
                 <Bar
                   key={m.model}
@@ -57,7 +75,7 @@ export default async function DashboardPage() {
         {dash.quotas && (
           <Card>
             <CardTitle>Quota utilization</CardTitle>
-            <div className="space-y-2">
+            <div className="space-y-2.5">
               <Bar
                 label="global · active"
                 value={totalActive}
@@ -120,46 +138,61 @@ export default async function DashboardPage() {
 
       <Card>
         <CardTitle>Recent audit</CardTitle>
-        <Table>
-          <THead>
-            <TR>
-              <TH>time</TH>
-              <TH>factio</TH>
-              <TH>action</TH>
-              <TH>job</TH>
-            </TR>
-          </THead>
-          <TBody>
-            {dash.recentAudit.map((e) => (
-              <TR key={e.id}>
-                <TD className="whitespace-nowrap text-xs text-muted-foreground tabular-nums">
-                  {new Date(e.ts).toLocaleString()}
-                </TD>
-                <TD>{e.factio}</TD>
-                <TD className="font-mono text-xs">{e.action}</TD>
-                <TD className="font-mono text-xs">
-                  {e.job_id ? (
-                    <Link href={`/jobs/${e.job_id}`} className="text-foreground hover:underline">
-                      {e.job_id}
-                    </Link>
-                  ) : (
-                    ""
-                  )}
-                </TD>
+        {dash.recentAudit.length === 0 ? (
+          <p className="text-sm text-muted-foreground">No recent activity.</p>
+        ) : (
+          <Table>
+            <THead>
+              <TR>
+                <TH>time</TH>
+                <TH>factio</TH>
+                <TH>action</TH>
+                <TH>job</TH>
               </TR>
-            ))}
-          </TBody>
-        </Table>
+            </THead>
+            <TBody>
+              {dash.recentAudit.map((e) => (
+                <TR key={e.id}>
+                  <TD className="whitespace-nowrap text-xs text-muted-foreground tabular-nums">
+                    {new Date(e.ts).toLocaleString()}
+                  </TD>
+                  <TD>{e.factio}</TD>
+                  <TD className="font-mono text-xs">{e.action}</TD>
+                  <TD className="font-mono text-xs">
+                    {e.job_id ? (
+                      <Link href={`/jobs/${e.job_id}`} className="text-foreground hover:underline">
+                        {e.job_id}
+                      </Link>
+                    ) : (
+                      ""
+                    )}
+                  </TD>
+                </TR>
+              ))}
+            </TBody>
+          </Table>
+        )}
       </Card>
     </div>
   );
 }
 
-function Stat({ label, value }: { label: string; value: string }) {
+function Stat({
+  label,
+  value,
+  icon: Icon,
+}: {
+  label: string;
+  value: string;
+  icon?: ComponentType<{ className?: string }>;
+}) {
   return (
     <Card>
-      <CardTitle>{label}</CardTitle>
-      <p className="text-2xl font-semibold tabular-nums">{value}</p>
+      <div className="flex items-center justify-between gap-2">
+        <CardTitle className="mb-0">{label}</CardTitle>
+        {Icon && <Icon className="size-4 text-muted-foreground" />}
+      </div>
+      <p className="mt-3 text-3xl font-semibold tracking-tight tabular-nums">{value}</p>
     </Card>
   );
 }
diff --git a/apps/console/components/live-run.tsx b/apps/console/components/live-run.tsx
index 41caaa8..9604ea8 100644
--- a/apps/console/components/live-run.tsx
+++ b/apps/console/components/live-run.tsx
@@ -56,7 +56,7 @@ export function LiveRun({ jobId, seed }: { jobId: string; seed: LiveRunSeed }) {
 function LiveStatus({ state }: { state: LiveRunState }) {
   const tokens = state.usage.input_tokens + state.usage.output_tokens;
   return (
-    <div className="flex flex-wrap items-center gap-x-4 gap-y-1 rounded-lg border bg-card px-3 py-2 text-sm">
+    <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5 rounded-xl border border-border/70 bg-muted/30 px-4 py-2.5 text-sm">
       <Badge tone={state.state} dot>
         {state.state}
       </Badge>
@@ -65,7 +65,7 @@ function LiveStatus({ state }: { state: LiveRunState }) {
       <Stat label="tokens" value={tokens.toLocaleString()} />
       <Stat label="≈ cost" value={`$${state.cost_usd.toFixed(4)}`} />
       {!state.terminal && (
-        <span className="ml-auto inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+        <span className="ml-auto inline-flex items-center gap-1.5 rounded-full bg-emerald-500/10 px-2.5 py-0.5 text-xs font-medium text-emerald-700 ring-1 ring-inset ring-emerald-500/30 dark:text-emerald-300">
           <Radio className="size-3.5 auriga-live-dot" />
           live
         </span>
diff --git a/apps/console/components/run-timeline-panel.tsx b/apps/console/components/run-timeline-panel.tsx
index c643554..4e3ec79 100644
--- a/apps/console/components/run-timeline-panel.tsx
+++ b/apps/console/components/run-timeline-panel.tsx
@@ -16,7 +16,11 @@ export function RunTimelinePanel({ events }: { events: TraceEvent[] }) {
 
   return (
     <div className="space-y-2">
-      <div role="tablist" aria-label="timeline view" className="flex gap-1 text-sm">
+      <div
+        role="tablist"
+        aria-label="timeline view"
+        className="inline-flex gap-1 rounded-lg bg-muted p-1 text-sm"
+      >
         {TABS.map((t) => (
           <button
             key={t.key}
@@ -26,8 +30,8 @@ export function RunTimelinePanel({ events }: { events: TraceEvent[] }) {
             onClick={() => setTab(t.key)}
             className={
               tab === t.key
-                ? "rounded-md bg-secondary px-2.5 py-1 font-medium text-secondary-foreground"
-                : "rounded-md px-2.5 py-1 text-muted-foreground hover:text-foreground"
+                ? "rounded-md bg-card px-2.5 py-1 font-medium text-foreground shadow-sm"
+                : "rounded-md px-2.5 py-1 text-muted-foreground transition-colors hover:text-foreground"
             }
           >
             {t.label}
diff --git a/apps/console/components/run-timeline.tsx b/apps/console/components/run-timeline.tsx
index 27c9d88..8de26a5 100644
--- a/apps/console/components/run-timeline.tsx
+++ b/apps/console/components/run-timeline.tsx
@@ -37,7 +37,7 @@ interface Row {
   body?: ReactNode;
 }
 
-const MONO = "mt-1 max-h-40 overflow-auto rounded-md bg-muted/60 p-2 font-mono text-xs text-muted-foreground whitespace-pre-wrap break-words";
+const MONO = "mt-1 max-h-40 overflow-auto rounded-lg border border-border/60 bg-muted/50 p-2.5 font-mono text-xs text-muted-foreground whitespace-pre-wrap break-words";
 
 function rowFor(e: TraceEvent): Row {
   switch (e.type) {
@@ -127,12 +127,14 @@ export function RunTimeline({
     return <p className="text-sm text-muted-foreground">No steps yet.</p>;
   }
   return (
-    <ol className={cn("space-y-3", className)}>
+    <ol className={cn("relative space-y-4", className)}>
+      {/* A subtle rail connecting the step nodes (left edge, behind the icons). */}
+      <div aria-hidden="true" className="absolute bottom-2 left-3 top-2 w-px bg-border/70" />
       {shown.map((e, i) => {
         const r = rowFor(e);
         const Icon = r.icon;
         return (
-          <li key={i} className="flex gap-3">
+          <li key={i} className="relative flex gap-3">
             <div
               className={cn(
                 "mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full ring-1 ring-inset",
diff --git a/apps/console/components/workspace-viewer.tsx b/apps/console/components/workspace-viewer.tsx
index 0e7646d..df9c619 100644
--- a/apps/console/components/workspace-viewer.tsx
+++ b/apps/console/components/workspace-viewer.tsx
@@ -37,7 +37,7 @@ export function WorkspaceViewer({ jobId, files }: { jobId: string; files: Worksp
     <div className="grid gap-3 sm:grid-cols-[16rem_1fr]">
       <div
         aria-label="workspace files"
-        className="max-h-96 overflow-auto rounded-md border bg-muted/30 p-1 text-sm"
+        className="max-h-96 overflow-auto rounded-lg border bg-muted/30 p-1.5 text-sm"
       >
         <Tree nodes={tree} selected={selected} onOpen={open} depth={0} />
       </div>
@@ -61,7 +61,7 @@ export function WorkspaceViewer({ jobId, files }: { jobId: string; files: Worksp
             ) : file.encoding === "base64" ? (
               <p className="text-sm text-muted-foreground">Binary file · {file.bytes} bytes</p>
             ) : (
-              <pre className="max-h-96 overflow-auto whitespace-pre-wrap break-words rounded-md bg-muted/60 p-2 font-mono text-xs">
+              <pre className="max-h-96 overflow-auto whitespace-pre-wrap break-words rounded-lg border border-border/60 bg-muted/50 p-3 font-mono text-xs">
                 {file.content}
               </pre>
             )}

From 038995008d835120e1e9c3843b02fac07c8a642a Mon Sep 17 00:00:00 2001
From: John Hu <huziyong@gmail.com>
Date: Sun, 21 Jun 2026 07:59:10 +0800
Subject: [PATCH 5/6] feat(console): polish login, skills, config, and forms

---
 apps/console/app/config/page.tsx        | 19 ++++--
 apps/console/app/jobs/new/page.tsx      | 20 +++++-
 apps/console/app/login/page.tsx         | 18 ++++--
 apps/console/app/skills/page.tsx        | 83 ++++++++++++++-----------
 apps/console/components/config-form.tsx | 12 ++--
 apps/console/components/job-form.tsx    | 16 +++--
 apps/console/components/login-form.tsx  | 44 ++++++-------
 7 files changed, 129 insertions(+), 83 deletions(-)

diff --git a/apps/console/app/config/page.tsx b/apps/console/app/config/page.tsx
index 26ae4ee..992a7c0 100644
--- a/apps/console/app/config/page.tsx
+++ b/apps/console/app/config/page.tsx
@@ -1,6 +1,8 @@
+import { CloudOff } from "lucide-react";
 import { api } from "@/lib/api";
 import { ConfigForm } from "@/components/config-form";
-import { Card, CardTitle } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
+import { EmptyState } from "@/components/ui/empty-state";
 import { getActor } from "@/lib/session";
 
 export const dynamic = "force-dynamic";
@@ -8,12 +10,21 @@ export const dynamic = "force-dynamic";
 export default async function ConfigPage() {
   const [config, actor] = await Promise.all([api.config(), getActor()]);
   if (!config) {
-    return <p className="text-muted-foreground">Config unavailable (the API has no config store).</p>;
+    return (
+      <EmptyState
+        icon={CloudOff}
+        title="Config unavailable"
+        description="The API has no config store configured."
+      />
+    );
   }
   return (
-    <div className="mx-auto max-w-3xl">
+    <div className="mx-auto max-w-3xl space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight">Configuration</h1>
+        <p className="mt-1 text-sm text-muted-foreground">RBAC policies and scheduler quotas.</p>
+      </div>
       <Card>
-        <CardTitle>Configuration</CardTitle>
         <ConfigForm initial={config} canEdit={actor.role === "admin"} />
       </Card>
     </div>
diff --git a/apps/console/app/jobs/new/page.tsx b/apps/console/app/jobs/new/page.tsx
index 648d9f5..8c99488 100644
--- a/apps/console/app/jobs/new/page.tsx
+++ b/apps/console/app/jobs/new/page.tsx
@@ -1,5 +1,7 @@
+import { ChevronLeft } from "lucide-react";
+import Link from "next/link";
 import { JobForm } from "@/components/job-form";
-import { Card, CardTitle } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import { getActor } from "@/lib/session";
 
 export const dynamic = "force-dynamic";
@@ -7,9 +9,21 @@ export const dynamic = "force-dynamic";
 export default async function NewJobPage() {
   const actor = await getActor();
   return (
-    <div className="mx-auto max-w-3xl">
+    <div className="mx-auto max-w-3xl space-y-5">
+      <Link
+        href="/jobs"
+        className="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+      >
+        <ChevronLeft className="size-4" />
+        Jobs
+      </Link>
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight">New job</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          Define a job spec and submit it as pending.
+        </p>
+      </div>
       <Card>
-        <CardTitle>New job</CardTitle>
         <JobForm factio={actor.factio} createdBy={`${actor.role}@${actor.factio}`} />
       </Card>
     </div>
diff --git a/apps/console/app/login/page.tsx b/apps/console/app/login/page.tsx
index 487b567..2c38317 100644
--- a/apps/console/app/login/page.tsx
+++ b/apps/console/app/login/page.tsx
@@ -1,18 +1,26 @@
 import { LoginForm } from "@/components/login-form";
-import { Card, CardTitle } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 
 export const dynamic = "force-dynamic";
 
 export default function LoginPage() {
   return (
-    <main className="mx-auto max-w-sm">
+    <div className="mx-auto flex min-h-[60vh] max-w-sm flex-col justify-center">
+      <div className="mb-6 flex flex-col items-center gap-3 text-center">
+        <span className="grid size-11 place-items-center rounded-xl bg-primary text-lg font-bold text-primary-foreground shadow-card">
+          A
+        </span>
+        <div>
+          <h1 className="text-lg font-semibold tracking-tight">Sign in to Auriga</h1>
+          <p className="mt-1 text-sm text-muted-foreground">Control-plane console</p>
+        </div>
+      </div>
       <Card>
-        <CardTitle>Sign in to Auriga</CardTitle>
         <LoginForm passwordRequired={Boolean(process.env.AURIGA_DEV_PASSWORD)} />
-        <p className="mt-3 text-xs text-neutral-500">
+        <p className="mt-4 text-xs text-muted-foreground">
           Dev sign-in — sets a session for this browser. Production sits behind an auth proxy.
         </p>
       </Card>
-    </main>
+    </div>
   );
 }
diff --git a/apps/console/app/skills/page.tsx b/apps/console/app/skills/page.tsx
index 066a2b1..097e7be 100644
--- a/apps/console/app/skills/page.tsx
+++ b/apps/console/app/skills/page.tsx
@@ -1,6 +1,8 @@
+import { Puzzle } from "lucide-react";
 import { api } from "@/lib/api";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardTitle } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
+import { EmptyState } from "@/components/ui/empty-state";
 import { Table, TBody, TD, TH, THead, TR } from "@/components/ui/table";
 
 export const dynamic = "force-dynamic";
@@ -9,40 +11,51 @@ export default async function SkillsPage() {
   const skills = await api.skills();
 
   return (
-    <Card>
-      <CardTitle>Skill marketplace</CardTitle>
-      {!skills || skills.length === 0 ? (
-        <p className="text-muted-foreground">No skills (set AURIGA_SKILLS on the API).</p>
-      ) : (
-        <Table>
-          <THead>
-            <TR>
-              <TH>skill</TH>
-              <TH>type</TH>
-              <TH>version</TH>
-              <TH>uses</TH>
-              <TH>ok</TH>
-              <TH>cost</TH>
-              <TH>description</TH>
-            </TR>
-          </THead>
-          <TBody>
-            {skills.map((s) => (
-              <TR key={`${s.name}@${s.version}`}>
-                <TD className="font-medium">{s.name}</TD>
-                <TD>
-                  <Badge>{s.type}</Badge>
-                </TD>
-                <TD className="font-mono text-xs text-muted-foreground">{s.version}</TD>
-                <TD className="tabular-nums">{s.stats.uses}</TD>
-                <TD className="tabular-nums">{s.stats.successes}</TD>
-                <TD className="tabular-nums">~${s.stats.total_cost_usd.toFixed(4)}</TD>
-                <TD className="text-muted-foreground">{s.description}</TD>
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight">Skills</h1>
+        <p className="mt-1 text-sm text-muted-foreground">
+          The skill marketplace and usage stats.
+        </p>
+      </div>
+      <Card>
+        {!skills || skills.length === 0 ? (
+          <EmptyState
+            icon={Puzzle}
+            title="No skills"
+            description="Set AURIGA_SKILLS on the API to populate the marketplace."
+          />
+        ) : (
+          <Table>
+            <THead>
+              <TR>
+                <TH>skill</TH>
+                <TH>type</TH>
+                <TH>version</TH>
+                <TH>uses</TH>
+                <TH>ok</TH>
+                <TH>cost</TH>
+                <TH>description</TH>
               </TR>
-            ))}
-          </TBody>
-        </Table>
-      )}
-    </Card>
+            </THead>
+            <TBody>
+              {skills.map((s) => (
+                <TR key={`${s.name}@${s.version}`}>
+                  <TD className="font-medium">{s.name}</TD>
+                  <TD>
+                    <Badge>{s.type}</Badge>
+                  </TD>
+                  <TD className="font-mono text-xs text-muted-foreground">{s.version}</TD>
+                  <TD className="tabular-nums">{s.stats.uses}</TD>
+                  <TD className="tabular-nums">{s.stats.successes}</TD>
+                  <TD className="tabular-nums">~${s.stats.total_cost_usd.toFixed(4)}</TD>
+                  <TD className="text-muted-foreground">{s.description}</TD>
+                </TR>
+              ))}
+            </TBody>
+          </Table>
+        )}
+      </Card>
+    </div>
   );
 }
diff --git a/apps/console/components/config-form.tsx b/apps/console/components/config-form.tsx
index 0895f6d..1d7275b 100644
--- a/apps/console/components/config-form.tsx
+++ b/apps/console/components/config-form.tsx
@@ -76,7 +76,11 @@ export function ConfigForm({ initial, canEdit = true }: { initial: AurigaConfig;
 
   return (
     <div className="space-y-4">
-      <div role="tablist" aria-label="config input mode" className="flex gap-1 text-sm">
+      <div
+        role="tablist"
+        aria-label="config input mode"
+        className="inline-flex gap-1 rounded-lg bg-muted p-1 text-sm"
+      >
         <ModeTab active={mode === "form"} onClick={() => switchMode("form")}>
           Form
         </ModeTab>
@@ -184,8 +188,8 @@ function ModeTab({
       onClick={onClick}
       className={
         active
-          ? "rounded-md bg-secondary px-2.5 py-1 font-medium text-secondary-foreground"
-          : "rounded-md px-2.5 py-1 text-muted-foreground hover:text-foreground"
+          ? "rounded-md bg-card px-2.5 py-1 font-medium text-foreground shadow-sm"
+          : "rounded-md px-2.5 py-1 text-muted-foreground transition-colors hover:text-foreground"
       }
     >
       {children}
@@ -205,7 +209,7 @@ function PolicyRow({
   onRemove: () => void;
 }) {
   return (
-    <div className="rounded-md border bg-muted/30 p-3">
+    <div className="rounded-lg border bg-muted/30 p-3">
       <div className="grid gap-3 sm:grid-cols-2">
         <Field label="Factio" hint="tenant id">
           <Input value={policy.factio} onChange={(e) => onChange({ ...policy, factio: e.target.value })} />
diff --git a/apps/console/components/job-form.tsx b/apps/console/components/job-form.tsx
index a19dc19..8424ca9 100644
--- a/apps/console/components/job-form.tsx
+++ b/apps/console/components/job-form.tsx
@@ -67,7 +67,11 @@ export function JobForm({ factio, createdBy }: { factio: string; createdBy: stri
 
   return (
     <div className="space-y-4">
-      <div role="tablist" aria-label="job spec input mode" className="flex gap-1 text-sm">
+      <div
+        role="tablist"
+        aria-label="job spec input mode"
+        className="inline-flex gap-1 rounded-lg bg-muted p-1 text-sm"
+      >
         <ModeTab active={mode === "form"} onClick={() => switchMode("form")}>
           Form
         </ModeTab>
@@ -192,12 +196,12 @@ export function JobForm({ factio, createdBy }: { factio: string; createdBy: stri
               type="checkbox"
               checked={form.requireApproval}
               onChange={(e) => set("requireApproval", e.target.checked)}
-              className="size-4 rounded border-input"
+              className="size-4 rounded border-input accent-foreground"
             />
             Require human approval before running (HITL)
           </label>
 
-          <details className="rounded-md border bg-muted/30 p-3">
+          <details className="rounded-lg border bg-muted/30 p-3">
             <summary className="cursor-pointer text-xs font-medium text-muted-foreground">
               Advanced (skills, files, links, dependencies)
             </summary>
@@ -251,8 +255,8 @@ function ModeTab({
       onClick={onClick}
       className={
         active
-          ? "rounded-md bg-secondary px-2.5 py-1 font-medium text-secondary-foreground"
-          : "rounded-md px-2.5 py-1 text-muted-foreground hover:text-foreground"
+          ? "rounded-md bg-card px-2.5 py-1 font-medium text-foreground shadow-sm"
+          : "rounded-md px-2.5 py-1 text-muted-foreground transition-colors hover:text-foreground"
       }
     >
       {children}
@@ -272,7 +276,7 @@ function CriterionRow({
   onRemove?: () => void;
 }) {
   return (
-    <div className="rounded-md border bg-background p-2">
+    <div className="rounded-lg border bg-background p-2.5">
       <div className="flex items-center gap-2">
         <Select
           aria-label="criterion type"
diff --git a/apps/console/components/login-form.tsx b/apps/console/components/login-form.tsx
index 8dfe42c..4938be4 100644
--- a/apps/console/components/login-form.tsx
+++ b/apps/console/components/login-form.tsx
@@ -2,8 +2,11 @@
 
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
-import { login } from "@/lib/actions";
 import { Button } from "@/components/ui/button";
+import { Field } from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Select } from "@/components/ui/select";
+import { login } from "@/lib/actions";
 
 const ROLES = ["viewer", "dev", "admin"];
 
@@ -27,45 +30,34 @@ export function LoginForm({ passwordRequired }: { passwordRequired: boolean }) {
   }
 
   return (
-    <form onSubmit={onSubmit} className="space-y-3">
-      <label className="block text-sm">
-        <span className="text-neutral-600">Factio (tenant)</span>
-        <input
-          value={factio}
-          onChange={(e) => setFactio(e.target.value)}
-          className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-1.5 text-sm"
-        />
-      </label>
-      <label className="block text-sm">
-        <span className="text-neutral-600">Role</span>
-        <select
-          value={role}
-          onChange={(e) => setRole(e.target.value)}
-          className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-1.5 text-sm"
-        >
+    <form onSubmit={onSubmit} className="space-y-4">
+      <Field label="Factio (tenant)" htmlFor="factio">
+        <Input id="factio" value={factio} onChange={(e) => setFactio(e.target.value)} />
+      </Field>
+      <Field label="Role" htmlFor="role">
+        <Select id="role" value={role} onChange={(e) => setRole(e.target.value)}>
           {ROLES.map((r) => (
             <option key={r} value={r}>
               {r}
             </option>
           ))}
-        </select>
-      </label>
+        </Select>
+      </Field>
       {passwordRequired && (
-        <label className="block text-sm">
-          <span className="text-neutral-600">Password</span>
-          <input
+        <Field label="Password" htmlFor="password">
+          <Input
+            id="password"
             type="password"
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            className="mt-1 w-full rounded-lg border border-neutral-300 px-3 py-1.5 text-sm"
           />
-        </label>
+        </Field>
       )}
-      <div className="flex items-center gap-3">
+      <div className="flex items-center gap-3 pt-1">
         <Button type="submit" disabled={pending}>
           {pending ? "Signing in…" : "Sign in"}
         </Button>
-        {error && <span className="text-sm text-red-600">{error}</span>}
+        {error && <span className="text-sm text-destructive">{error}</span>}
       </div>
     </form>
   );

From 899c62d2b7a636499ab14854f842076e4c4dafc9 Mon Sep 17 00:00:00 2001
From: John Hu <huziyong@gmail.com>
Date: Sun, 21 Jun 2026 08:45:39 +0800
Subject: [PATCH 6/6] style(console): align form control padding and row
 backgrounds

---
 apps/console/components/job-form.tsx  | 2 +-
 apps/console/components/ui/select.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/console/components/job-form.tsx b/apps/console/components/job-form.tsx
index 8424ca9..044749f 100644
--- a/apps/console/components/job-form.tsx
+++ b/apps/console/components/job-form.tsx
@@ -276,7 +276,7 @@ function CriterionRow({
   onRemove?: () => void;
 }) {
   return (
-    <div className="rounded-lg border bg-background p-2.5">
+    <div className="rounded-lg border bg-muted/30 p-2.5">
       <div className="flex items-center gap-2">
         <Select
           aria-label="criterion type"
diff --git a/apps/console/components/ui/select.tsx b/apps/console/components/ui/select.tsx
index 1ae94d8..6f929d8 100644
--- a/apps/console/components/ui/select.tsx
+++ b/apps/console/components/ui/select.tsx
@@ -5,7 +5,7 @@ export function Select({ className, children, ...props }: SelectHTMLAttributes<H
   return (
     <select
       className={cn(
-        "flex h-9 w-full rounded-lg border border-input bg-background px-2.5 py-1 text-sm shadow-sm transition-colors focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-9 w-full rounded-lg border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}