feat(v3): project-level tabs + clean AgentPane + ProjectHeader info bar

- ProjectBox: Claude|Files|Context tab bar switching content area
- ProjectFiles.svelte: project-scoped markdown file viewer
- ProjectHeader: CWD (ellipsized from start) + profile as info text
- AgentPane: removed DIR/ACC toolbar, CWD+profile now props from parent
- ClaudeSession: passes project.profile to AgentPane

v2/src/lib/components/Workspace/ProjectHeader.svelte

@@ -12,6 +12,19 @@
   let { project, slotIndex, active, onclick }: Props = $props();
 
   let accentVar = $derived(PROJECT_ACCENTS[slotIndex % PROJECT_ACCENTS.length]);
+
+  /** Shorten home dir for display */
+  let displayCwd = $derived(() => {
+    const home = '/home/';
+    const cwd = project.cwd || '~';
+    if (cwd.startsWith(home)) {
+      const afterHome = cwd.slice(home.length);
+      const slashIdx = afterHome.indexOf('/');
+      if (slashIdx >= 0) return '~' + afterHome.slice(slashIdx);
+      return '~';
+    }
+    return cwd;
+  });
 </script>
 
 <button
@@ -20,16 +33,26 @@
   style="--accent: var({accentVar})"
   {onclick}
 >
-  <span class="project-icon">{project.icon || '📁'}</span>
-  <span class="project-name">{project.name}</span>
-  <span class="project-id">({project.identifier})</span>
+  <div class="header-main">
+    <span class="project-icon">{project.icon || '📁'}</span>
+    <span class="project-name">{project.name}</span>
+    <span class="project-id">({project.identifier})</span>
+  </div>
+  <div class="header-info">
+    <span class="info-cwd" title={project.cwd}>{displayCwd()}</span>
+    {#if project.profile}
+      <span class="info-sep">·</span>
+      <span class="info-profile" title={project.profile}>{project.profile}</span>
+    {/if}
+  </div>
 </button>
 
 <style>
   .project-header {
     display: flex;
     align-items: center;
-    gap: 0.375rem;
+    justify-content: space-between;
+    gap: 0.5rem;
     padding: 0.375rem 0.625rem;
     background: var(--ctp-mantle);
     border: none;
@@ -52,6 +75,14 @@
     border-bottom-color: var(--accent);
   }
 
+  .header-main {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    min-width: 0;
+    flex-shrink: 0;
+  }
+
   .project-icon {
     font-size: 0.85rem;
     line-height: 1;
@@ -61,8 +92,6 @@
   .project-name {
     font-weight: 600;
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   .project-id {
@@ -70,4 +99,41 @@
     font-size: 0.7rem;
     white-space: nowrap;
   }
+
+  .header-info {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 0;
+    flex-shrink: 1;
+    overflow: hidden;
+  }
+
+  .info-cwd {
+    font-size: 0.65rem;
+    color: var(--ctp-overlay0);
+    font-family: var(--font-mono, monospace);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    direction: rtl;
+    text-align: left;
+    unicode-bidi: plaintext;
+    max-width: 12rem;
+  }
+
+  .info-sep {
+    color: var(--ctp-surface2);
+    font-size: 0.6rem;
+    flex-shrink: 0;
+  }
+
+  .info-profile {
+    font-size: 0.65rem;
+    color: var(--ctp-overlay0);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 6rem;
+  }
 </style>