feat(web): redesign task rail — Plan/Event log polish, entity graph resize fix

- Plan/Activity panels: humanize step titles, richer icons, empty states
  matching Scope's illustration style, pretty-printed expandable detail
- Activity log renamed to Event log; every step now expandable
- Chat: middle-truncate header title, remove redundant task-list rail and
  header stat cluster (duplicated in the sidebar), simplify markdown styling
- Fix --font-mono actually being a monospace font (was aliased to DM Sans)
- Replace rotating loader-circle spinner with a smoother fading-blade Spinner
- SessionGraph entity detail panel: resizable and self-clamping against its
  live container size (was overflowing into sibling sections), close button
- Dev launch config: fetch bearer token from the running api container so
  `npm run dev` works against the local compose stack without a hardcoded
  secret in a tracked file

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

web/src/pages/Chat.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { messages, streaming, connectionState, currentSession, sendMessage, cancelStream, reconnect, error, chatErrors, dismissError } from '$lib/stores/chat'
   import { activityLog } from '$lib/stores/activity'
-  import SessionRail from '$lib/components/SessionRail.svelte'
   import TaskContextPanel from '$lib/components/TaskContextPanel.svelte'
   import InlineApproval from '$lib/components/InlineApproval.svelte'
   import AgentIndicator from '$lib/components/AgentIndicator.svelte'
@@ -105,11 +104,6 @@
 </script>
 
 <div class="flex h-full min-h-0">
-  {#if showRail}
-    <div class="hidden md:block">
-      <SessionRail />
-    </div>
-  {/if}
   <div class="flex min-w-0 flex-1 flex-col">
     <div class="min-h-0 flex-1 overflow-y-auto" bind:this={container} onscroll={onScroll}>
       <div class="mx-auto flex max-w-3xl flex-col gap-5 p-4">
@@ -247,18 +241,14 @@
 <style>
   /* ── Art Nouveau chat styling ── */
 
-  /* Assistant message wrapper — ornamental frame */
+  /* Assistant message wrapper */
   .assistant-msg {
     position: relative;
-    border-left: 2px solid var(--primary);
-    border-image: linear-gradient(to bottom, var(--primary), transparent 80%) 1;
-    padding-left: 1rem;
   }
 
-  /* User message — softened bubble with inner glow */
+  /* User message — soft terracotta bubble, gentle lift */
   .user-msg {
-    box-shadow: 0 0 12px -4px var(--primary);
-    border: 1px solid var(--primary);
+    box-shadow: 0 1px 8px -4px var(--primary);
   }
 
   /* Prose overrides */
@@ -325,24 +315,32 @@
     border: none;
   }
 
+  /* Section headings — serif (Inknut) with a short accent rule. Extra top
+     margin separates sections; the first heading in a message doesn't. */
   .prose-chat :global(h1),
   .prose-chat :global(h2),
   .prose-chat :global(h3) {
     font-weight: 600;
-    margin: 0.75rem 0 0.375rem;
-    font-size: 1em;
+    margin: 1.15rem 0 0.4rem;
+    font-size: 1.03em;
+    letter-spacing: 0.01em;
     position: relative;
     display: inline-block;
   }
+  .prose-chat :global(:first-child):is(h1, h2, h3) {
+    margin-top: 0;
+  }
   .prose-chat :global(h1)::after,
   .prose-chat :global(h2)::after,
   .prose-chat :global(h3)::after {
     content: '';
     display: block;
-    height: 1px;
-    margin-top: 2px;
+    width: 2.5rem;
+    height: 2px;
+    margin-top: 4px;
+    border-radius: 1px;
     background: linear-gradient(to right, var(--primary), transparent);
-    opacity: 0.5;
+    opacity: 0.55;
   }
 
   .prose-chat :global(table) {
@@ -388,8 +386,11 @@
     background: linear-gradient(to right, transparent, var(--border) 20%, var(--border) 80%, transparent);
   }
 
+  /* Bold is emphasis, not color — dark weight reads cleanly and lets the
+     terracotta accent stay meaningful (code, headings, links). */
   .prose-chat :global(strong) {
-    color: var(--primary);
+    color: var(--foreground);
+    font-weight: 600;
   }
 
   .prose-chat :global(a) {