feat: add workspace sidebar skeleton

web/workspace/src/routes/+page.svelte

@@ -1,13 +1,6 @@
 <script lang="ts">
-  type WorkspaceResponse = {
-    workspace_id: string;
-    display_name: string;
-    record_authority: string;
-    extension_points: {
-      event_stream: { status: string; note: string };
-      runner_connection: { status: string; note: string };
-    };
-  };
+  import WorkspaceSidebar from '$lib/workspace-sidebar/WorkspaceSidebar.svelte';
+  import type { WorkspaceResponse } from '$lib/workspace-sidebar/types';
 
   const endpoints = [
     { label: 'Workspace', path: '/api/workspace' },
@@ -21,6 +14,7 @@
   let loadError = $state<string | null>(null);
 
   async function loadWorkspace() {
+    loadError = null;
     try {
       const response = await fetch('/api/workspace');
       if (!response.ok) {
@@ -45,63 +39,71 @@
   />
 </svelte:head>
 
-<main class="shell">
-  <section class="hero">
-    <p class="eyebrow">Local / single-workspace bootstrap</p>
-    <h1>Yoi Workspace Control Plane</h1>
-    <p>
-      Static SPA shell for reading canonical <code>.yoi</code> project records
-      through bounded backend APIs. Ticket and Objective lifecycle authority stays
-      in the existing local record workflow.
-    </p>
-  </section>
+<div class="workspace-layout">
+  <WorkspaceSidebar {workspace} workspaceError={loadError} />
 
-  <section class="card">
-    <h2>Workspace</h2>
-    {#if workspace}
-      <dl>
-        <div>
-          <dt>ID</dt>
-          <dd>{workspace.workspace_id}</dd>
-        </div>
-        <div>
-          <dt>Name</dt>
-          <dd>{workspace.display_name}</dd>
-        </div>
-        <div>
-          <dt>Record authority</dt>
-          <dd>{workspace.record_authority}</dd>
-        </div>
-      </dl>
-    {:else if loadError}
-      <p class="error">{loadError}</p>
-    {:else}
-      <p>Waiting for <code>/api/workspace</code>…</p>
-    {/if}
-  </section>
-
-  <section class="grid">
-    <div class="card">
-      <h2>Read API surface</h2>
-      <ul>
-        {#each endpoints as endpoint}
-          <li><code>{endpoint.path}</code> — {endpoint.label}</li>
-        {/each}
-      </ul>
-    </div>
-
-    <div class="card">
-      <h2>Reserved seams</h2>
+  <main class="shell">
+    <section class="hero">
+      <p class="eyebrow">Local / single-workspace bootstrap</p>
+      <h1>Yoi Workspace Control Plane</h1>
       <p>
-        Event streams and runner connections are represented as extension-point
-        state in the backend response, but no scheduler, write API, or hosted
-        multi-tenant behavior is implemented in this slice.
+        Static SPA shell for reading canonical <code>.yoi</code> project records
+        through bounded backend APIs. Ticket and Objective lifecycle authority stays
+        in the existing local record workflow.
       </p>
-    </div>
-  </section>
-</main>
+    </section>
+
+    <section class="card">
+      <h2>Workspace</h2>
+      {#if workspace}
+        <dl>
+          <div>
+            <dt>ID</dt>
+            <dd>{workspace.workspace_id}</dd>
+          </div>
+          <div>
+            <dt>Name</dt>
+            <dd>{workspace.display_name}</dd>
+          </div>
+          <div>
+            <dt>Record authority</dt>
+            <dd>{workspace.record_authority}</dd>
+          </div>
+        </dl>
+      {:else if loadError}
+        <p class="error">{loadError}</p>
+      {:else}
+        <p>Waiting for <code>/api/workspace</code>…</p>
+      {/if}
+    </section>
+
+    <section class="grid">
+      <div class="card">
+        <h2>Read API surface</h2>
+        <ul>
+          {#each endpoints as endpoint}
+            <li><code>{endpoint.path}</code> — {endpoint.label}</li>
+          {/each}
+        </ul>
+      </div>
+
+      <div class="card">
+        <h2>Reserved seams</h2>
+        <p>
+          Event streams and runner connections are represented as extension-point
+          state in the backend response, but no scheduler, write API, or hosted
+          multi-tenant behavior is implemented in this slice.
+        </p>
+      </div>
+    </section>
+  </main>
+</div>
 
 <style>
+  :global(*) {
+    box-sizing: border-box;
+  }
+
   :global(body) {
     margin: 0;
     background: #0f172a;
@@ -110,14 +112,28 @@
       Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
 
-  .shell {
-    width: min(980px, calc(100vw - 32px));
+  .workspace-layout {
+    display: grid;
+    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
+    gap: 24px;
+    width: min(1180px, calc(100vw - 32px));
     margin: 0 auto;
-    padding: 48px 0;
+    padding: 32px 0;
+    min-width: 0;
+  }
+
+  .shell {
+    display: grid;
+    gap: 24px;
+    min-width: 0;
   }
 
   .hero {
-    margin-bottom: 24px;
+    min-width: 0;
+  }
+
+  .hero p {
+    max-width: 68ch;
   }
 
   .eyebrow {
@@ -131,12 +147,19 @@
     margin: 0 0 16px;
     font-size: clamp(2.5rem, 8vw, 5rem);
     line-height: 0.95;
+    overflow-wrap: anywhere;
   }
 
   h2 {
     margin-top: 0;
   }
 
+  p,
+  li,
+  dd {
+    overflow-wrap: anywhere;
+  }
+
   code {
     color: #bae6fd;
   }
@@ -144,7 +167,8 @@
   .grid {
     display: grid;
     gap: 16px;
-    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
+    min-width: 0;
   }
 
   .card {
@@ -153,6 +177,7 @@
     background: rgba(15, 23, 42, 0.75);
     padding: 24px;
     box-shadow: 0 24px 80px rgba(15, 23, 42, 0.35);
+    min-width: 0;
   }
 
   dl {
@@ -173,4 +198,17 @@
   .error {
     color: #fca5a5;
   }
+
+  @media (max-width: 760px) {
+    .workspace-layout {
+      grid-template-columns: 1fr;
+      width: min(100vw - 24px, 620px);
+      gap: 18px;
+      padding: 18px 0;
+    }
+
+    .card {
+      padding: 18px;
+    }
+  }
 </style>