ui: goal visual identity — accent, icon, distinct cards

Goals never read as tasks at a glance: a --goal accent with tinted
surface, the 🎯 marker on the nav entry, the goals pages and the
dashboard pile's goal cards (goal-card class beside the plain task
cards), and the goal page's accent-framed status head.

src/pages/app.css

@@ -18,6 +18,11 @@
     --danger: #cf222e;
     --review: #bf8700;
     --plan: #8250df;
+    /* The goal accent (plan 12 identity): goals never read as tasks
+       at a glance — their chrome carries this instead of the task
+       blue. */
+    --goal: #8250df;
+    --goal-surface: #faf7ff;
     --radius: 8px;
 }
 
@@ -281,7 +286,40 @@ summary { cursor: pointer; font-weight: 600; }
 
 .goal-strip { display: flex; gap: var(--grid-1); flex-wrap: wrap; align-items: center; }
 .badge-kind-task { background: #ddf4ff; color: #0969da; }
-.badge-kind-goal { background: #f3e8ff; color: var(--plan); }
+.badge-kind-goal { background: #f3e8ff; color: var(--goal); }
+
+/* ---- Goal identity (a goal never reads as a task at a glance) ---- */
+
+/* The goal page's status card: the goal accent replaces the task
+   blue of .status-head. */
+.goal-head { border-left: 4px solid var(--goal); }
+
+/* Dashboard pile cards for goal items: goal accent + tinted
+   surface, next to the plain white task cards. */
+.card.goal-card {
+    background: var(--goal-surface);
+    border-left: 4px solid var(--goal);
+}
+
+/* The 🎯 marker rides the nav entry, the goals pages and the goal
+   pile cards. */
+.goal-icon {
+    font-style: normal;
+    margin-right: 0.15rem;
+}
+
+nav .nav-goal { font-weight: 600; }
+
+/* The supervision narrative's markdown bodies flow inside the flex
+   event row. */
+.goal-event-text { flex: 1 1 16rem; min-width: 0; }
+.goal-event-text > :first-child { margin-top: 0; }
+.goal-event-text > :last-child { margin-bottom: 0; }
+
+/* The current-activity card on the goal page. */
+.goal-activity code { word-break: break-all; }
+
+
 .goal-filter {
     background: var(--line-soft);
     border: 1px solid var(--line);

src/pages/goals.html

@@ -18,7 +18,7 @@
 </head>
 <body>
     <div class="page">
-        <h1>Goals</h1>
+        <h1><span class="goal-icon">🎯</span> Goals</h1>
         <p class="muted">User-created units of agent-orchestrated work — brief, plan,
             task fan-out, one shared goal branch per involved repo.</p>
 
@@ -64,7 +64,7 @@
             <tbody>
                 <tr stm-for-goal-in="goals.goals">
                     <td stm-text="goal.id">id</td>
-                    <td><a stm-attribute.href="'/goals/' + goal.id" stm-text="goal.title">title</a></td>
+                    <td><span class="goal-icon">🎯</span><a stm-attribute.href="'/goals/' + goal.id" stm-text="goal.title">title</a></td>
                     <td><span stm-attribute.class="'badge badge-' + goal.status"
                               stm-text="goal.display">status</span></td>
                     <td><code stm-text="goal.branch_name">branch</code></td>

src/pages/home.html

@@ -167,8 +167,10 @@
                 reviews across all tasks and goals, newest first — follow the link to
                 answer on the task or goal page.</p>
             <div class="cards" stm-if="dashboard.pinned.length > 0">
-                <section class="card" stm-for-blockview-in="dashboard.pinned">
+                <section stm-for-blockview-in="dashboard.pinned"
+                         stm-attribute.class="blockview.item_type == 'goal' ? 'card goal-card' : 'card'">
                     <p>
+                        <span stm-if="blockview.item_type == 'goal'" class="goal-icon">🎯</span>
                         <span stm-attribute.class="'badge badge-kind-' + blockview.item_type"
                               stm-text="blockview.item_type">task</span>
                         <span stm-attribute.class="'badge badge-' + blockview.block_type" stm-text="blockview.block_type">type</span>

src/pages/main.html

@@ -130,7 +130,7 @@
             <!-- spry:nav-begin -->
             <a href="/projects">Projects</a>
             <a href="/tasks">Tasks</a>
-            <a href="/goals">Goals</a>
+            <a href="/goals" class="nav-goal"><span class="goal-icon">🎯</span> Goals</a>
             <a href="/saddles">Saddles</a>
             <a href="/rules">Rules</a>
             <!-- spry:nav-end -->

test/web_stack_test.py

@@ -5299,6 +5299,25 @@ def bundle_goals(ctx):
     check(any(b["block_type"] == "plan" and b["is_plan_review"]
               for b in state["blocks"]),
           "the goal blocks list carries the pending plan block")
+
+    print("== feedback: goal visual identity ==")
+    # A goal never reads as a task at a glance: marked nav entry,
+    # iconed list page, and the dashboard pile's goal cards carry
+    # their own accent styling.
+    home_html = http_get_page(auth, "/")
+    check('class="nav-goal"' in home_html and "🎯" in home_html,
+          "the nav carries the marked 🎯 Goals entry beside Tasks")
+    check(any(p["item_type"] == "goal" for p in
+              slot_public(auth, "/", "dashboard")["pinned"]),
+          "the goal's pending block pins onto the dashboard pile")
+    check("'card goal-card'" in home_html and 'badge-kind-goal' in home_html,
+          "dashboard goal cards carry the distinct goal styling")
+    goals_html = http_get_page(auth, "/goals")
+    check("🎯" in goals_html and "goal-icon" in goals_html,
+          "the goals list page carries the goal icon")
+    goal_page_html = http_get_page(auth, "/goals/%d" % goal1)
+    check('class="card goal-head"' in goal_page_html and "goal-page" in goal_page_html,
+          "the goal page carries the goal-accented identity chrome")
     # Reject with feedback: the agent revises.
     fake.goal_script = [("plan", "# Plan v2\n\n1. Add tests\n2. Add docs\n3. Ship")]
     act(auth, pending["answer_action"], {"answer": "Add documentation please"})