feat: update templates and improve UI styling across components

frontend/src/components/organisms/DashboardSidebar.tsx

@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { Bot, LayoutGrid } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
@@ -9,34 +10,44 @@ export function DashboardSidebar() {
   const pathname = usePathname();
 
   return (
-    <aside className="flex h-full flex-col gap-6 rounded-xl border-2 border-gray-200 bg-white p-6 shadow-lush">
-      <div className="space-y-2">
-        <p className="text-xs font-semibold uppercase tracking-[0.3em] text-gray-500">
-          Work
+    <aside className="flex h-full flex-col gap-6 rounded-2xl surface-panel p-5">
+      <div className="space-y-3">
+        <p className="text-xs font-semibold uppercase tracking-[0.32em] text-quiet">
+          Navigation
         </p>
-        <nav className="space-y-1 text-sm">
-          <Link
-            href="/agents"
-            className={cn(
-              "block rounded-lg border border-transparent px-3 py-2 font-medium text-gray-700 hover:border-gray-200 hover:bg-gray-50",
-              pathname.startsWith("/agents") &&
-                "border-gray-200 bg-gray-50 text-gray-900"
-            )}
-          >
-            Agents
-          </Link>
+        <nav className="space-y-2 text-sm">
           <Link
             href="/boards"
             className={cn(
-              "block rounded-lg border border-transparent px-3 py-2 font-medium text-gray-700 hover:border-gray-200 hover:bg-gray-50",
+              "flex items-center gap-3 rounded-xl border border-transparent px-3 py-2 font-semibold text-muted transition hover:border-[color:var(--border)] hover:bg-[color:var(--surface-muted)]",
               pathname.startsWith("/boards") &&
-                "border-gray-200 bg-gray-50 text-gray-900"
+                "border-[color:var(--accent-soft)] bg-[color:var(--accent-soft)] text-[color:var(--accent-strong)]"
             )}
           >
+            <LayoutGrid className="h-4 w-4" />
             Boards
           </Link>
+          <Link
+            href="/agents"
+            className={cn(
+              "flex items-center gap-3 rounded-xl border border-transparent px-3 py-2 font-semibold text-muted transition hover:border-[color:var(--border)] hover:bg-[color:var(--surface-muted)]",
+              pathname.startsWith("/agents") &&
+                "border-[color:var(--accent-soft)] bg-[color:var(--accent-soft)] text-[color:var(--accent-strong)]"
+            )}
+          >
+            <Bot className="h-4 w-4" />
+            Agents
+          </Link>
         </nav>
       </div>
+      <div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4 text-xs text-quiet">
+        <p className="font-semibold uppercase tracking-[0.2em] text-strong">
+          Ops health
+        </p>
+        <p className="mt-2">
+          Live boards and agents appear here once data streams in.
+        </p>
+      </div>
     </aside>
   );
 }

frontend/src/components/organisms/LandingHero.tsx

@@ -7,16 +7,10 @@ import { Button } from "@/components/ui/button";
 
 export function LandingHero() {
   return (
-    <section className="grid w-full items-center gap-10 lg:grid-cols-[1.05fr_0.95fr]">
-      <div
-        className="space-y-8 animate-fade-in-up"
-        style={{ animationDelay: "0.05s" }}
-      >
+    <section className="grid w-full items-center gap-12 lg:grid-cols-[1.1fr_0.9fr]">
+      <div className="space-y-8 animate-fade-in-up">
         <HeroCopy />
-        <div
-          className="flex flex-col gap-3 sm:flex-row sm:items-center animate-fade-in-up"
-          style={{ animationDelay: "0.12s" }}
-        >
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
           <SignedOut>
             <SignInButton
               mode="modal"
@@ -25,60 +19,85 @@ export function LandingHero() {
               forceRedirectUrl="/boards"
               signUpForceRedirectUrl="/boards"
             >
-              <Button
-                size="lg"
-                className="w-full sm:w-auto border-2 border-gray-900 bg-gray-900 text-white hover:bg-gray-900/90"
-              >
+              <Button size="lg" className="w-full sm:w-auto">
                 Sign in to open mission control
               </Button>
             </SignInButton>
           </SignedOut>
           <SignedIn>
-            <div className="text-sm text-gray-600">
+            <div className="text-sm text-muted">
               You&apos;re signed in. Open your boards when you&apos;re ready.
             </div>
           </SignedIn>
         </div>
-        <p
-          className="text-xs uppercase tracking-[0.3em] text-gray-500 animate-fade-in-up"
-          style={{ animationDelay: "0.18s" }}
-        >
-          One login · clear ownership · faster decisions
-        </p>
+        <div className="flex flex-wrap gap-3 text-xs font-semibold uppercase tracking-[0.28em] text-quiet">
+          <span className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-1">
+            Enterprise ready
+          </span>
+          <span className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-1">
+            Agent-first ops
+          </span>
+          <span className="rounded-full border border-[color:var(--border)] bg-[color:var(--surface)] px-3 py-1">
+            24/7 visibility
+          </span>
+        </div>
       </div>
 
-      <div
-        className="relative animate-fade-in-up"
-        style={{ animationDelay: "0.3s" }}
-      >
-        <div className="glass-panel rounded-2xl bg-white p-6">
-          <div className="flex flex-col gap-6">
-            <div className="flex items-center justify-between text-xs font-semibold uppercase tracking-[0.3em] text-gray-500">
-              <span>Status</span>
-              <span className="rounded-full border border-gray-200 px-2 py-1 text-[10px]">
-                Live
-              </span>
-            </div>
-            <div className="space-y-2">
-              <p className="text-lg font-semibold text-gray-900">
-                Tasks claimed automatically
+      <div className="relative animate-fade-in-up">
+        <div className="surface-panel rounded-3xl p-6">
+          <div className="flex items-center justify-between text-xs font-semibold uppercase tracking-[0.3em] text-quiet">
+            <span>Command surface</span>
+            <span className="rounded-full border border-[color:var(--border)] px-2 py-1 text-[10px]">
+              Live
+            </span>
+          </div>
+          <div className="mt-6 space-y-4">
+            <div>
+              <p className="text-lg font-semibold text-strong">
+                Tasks claimed, tracked, delivered.
               </p>
-              <p className="text-sm text-gray-600">
-                Agents pick the next task in queue, report progress, and ship
-                deliverables back to you.
+              <p className="text-sm text-muted">
+                See every queue, agent, and handoff without chasing updates.
               </p>
             </div>
-            <div className="grid grid-cols-2 gap-3">
-              {["Assignments", "In review", "Delivered", "Signals"].map(
-                (label) => (
-                  <div
-                    key={label}
-                    className="rounded-xl border-2 border-gray-200 bg-white p-4 text-sm font-semibold text-gray-900 soft-shadow-sm"
-                  >
-                    {label}
+            <div className="grid grid-cols-3 gap-3">
+              {[
+                { label: "Active boards", value: "12" },
+                { label: "Agents live", value: "08" },
+                { label: "Tasks in flow", value: "46" },
+              ].map((item) => (
+                <div
+                  key={item.label}
+                  className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface-muted)] p-4 text-center"
+                >
+                  <div className="text-xl font-semibold text-strong">
+                    {item.value}
                   </div>
-                )
-              )}
+                  <div className="text-[11px] uppercase tracking-[0.18em] text-quiet">
+                    {item.label}
+                  </div>
+                </div>
+              ))}
+            </div>
+            <div className="rounded-2xl border border-[color:var(--border)] bg-[color:var(--surface)] p-4">
+              <div className="flex items-center justify-between text-xs font-semibold uppercase tracking-[0.2em] text-quiet">
+                <span>Signals</span>
+                <span>Updated 2m ago</span>
+              </div>
+              <div className="mt-3 space-y-2 text-sm text-muted">
+                <div className="flex items-center justify-between">
+                  <span>Agent Delta moved task to review</span>
+                  <span className="text-quiet">Just now</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Board Growth Ops hit WIP limit</span>
+                  <span className="text-quiet">5m</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Release tasks stabilized</span>
+                  <span className="text-quiet">12m</span>
+                </div>
+              </div>
             </div>
           </div>
         </div>

frontend/src/components/organisms/TaskBoard.tsx

@@ -55,18 +55,16 @@ export function TaskBoard({
   }, [tasks]);
 
   return (
-    <div className="grid grid-flow-col auto-cols-[minmax(260px,320px)] gap-6 overflow-x-auto pb-2">
+    <div className="grid grid-flow-col auto-cols-[minmax(260px,320px)] gap-6 overflow-x-auto pb-4">
       {columns.map((column) => {
         const columnTasks = grouped[column.status] ?? [];
         return (
           <div key={column.title} className="space-y-4">
             <div className="flex items-center justify-between">
-              <h3 className="text-sm font-semibold text-gray-900">
+              <h3 className="text-sm font-semibold text-strong">
                 {column.title}
               </h3>
-              <span className="text-xs text-gray-500">
-                {columnTasks.length}
-              </span>
+              <span className="text-xs text-quiet">{columnTasks.length}</span>
             </div>
             <div className="space-y-3">
               {column.status === "inbox" ? (
@@ -75,7 +73,7 @@ export function TaskBoard({
                   onClick={onCreateTask}
                   disabled={isCreateDisabled}
                   className={cn(
-                    "flex w-full items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 px-4 py-6 text-xs font-semibold uppercase tracking-[0.2em] text-gray-500 transition hover:border-gray-300 hover:bg-white",
+                    "flex w-full items-center justify-center rounded-2xl border border-dashed border-[color:var(--border)] bg-[color:var(--surface-muted)] px-4 py-6 text-[11px] font-semibold uppercase tracking-[0.2em] text-quiet transition hover:border-[color:var(--border-strong)] hover:bg-[color:var(--surface)]",
                     isCreateDisabled && "cursor-not-allowed opacity-60"
                   )}
                 >