From f2aa5148459c02e192256413c44a399725b1e163 Mon Sep 17 00:00:00 2001
From: Hibryda <hibryda@protonmail.com>
Date: Sun, 8 Mar 2026 02:32:00 +0100
Subject: [PATCH] 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/Agent/AgentPane.svelte  | 108 +-------------
 .../components/Workspace/ClaudeSession.svelte |   1 +
 .../components/Workspace/ProjectBox.svelte    |  84 ++++++++++-
 .../components/Workspace/ProjectFiles.svelte  | 141 ++++++++++++++++++
 .../components/Workspace/ProjectHeader.svelte |  78 +++++++++-
 5 files changed, 297 insertions(+), 115 deletions(-)
 create mode 100644 v2/src/lib/components/Workspace/ProjectFiles.svelte

diff --git a/v2/src/lib/components/Agent/AgentPane.svelte b/v2/src/lib/components/Agent/AgentPane.svelte
index a36b98d..4f1c0f3 100644
--- a/v2/src/lib/components/Agent/AgentPane.svelte
+++ b/v2/src/lib/components/Agent/AgentPane.svelte
@@ -29,10 +29,11 @@
     sessionId: string;
     prompt?: string;
     cwd?: string;
+    profile?: string;
     onExit?: () => void;
   }
 
-  let { sessionId, prompt: initialPrompt = '', cwd: initialCwd, onExit }: Props = $props();
+  let { sessionId, prompt: initialPrompt = '', cwd: initialCwd, profile: profileName, onExit }: Props = $props();
 
   let session = $derived(getAgentSession(sessionId));
   let inputPrompt = $state(initialPrompt);
@@ -45,13 +46,8 @@
   let childSessions = $derived(session ? getChildSessions(session.id) : []);
   let totalCost = $derived(session && childSessions.length > 0 ? getTotalCost(session.id) : null);
 
-  // Working directory
-  let cwdInput = $state(initialCwd ?? '');
-  let showCwdPicker = $state(false);
-
-  // Profile selector
+  // Profile list (for resolving profileName to config_dir)
   let profiles = $state<ClaudeProfile[]>([]);
-  let selectedProfile = $state('');
 
   // Skill autocomplete
   let skills = $state<ClaudeSkill[]>([]);
@@ -119,11 +115,11 @@
       updateAgentStatus(sessionId, 'starting');
     }
 
-    const profile = profiles.find(p => p.name === selectedProfile);
+    const profile = profileName ? profiles.find(p => p.name === profileName) : undefined;
     await queryAgent({
       session_id: sessionId,
       prompt: text,
-      cwd: cwdInput || undefined,
+      cwd: initialCwd || undefined,
       max_turns: 50,
       resume_session_id: resumeId,
       setting_sources: ['user', 'project'],
@@ -224,37 +220,6 @@
 <div class="agent-pane">
   {#if !session || session.messages.length === 0}
     <div class="prompt-area">
-      <div class="session-toolbar">
-        <div class="toolbar-row">
-          <label class="toolbar-label">
-            <span class="toolbar-icon">DIR</span>
-            <input
-              type="text"
-              class="toolbar-input"
-              bind:value={cwdInput}
-              placeholder="Working directory (default: ~)"
-              onfocus={() => showCwdPicker = true}
-              onblur={() => setTimeout(() => showCwdPicker = false, 150)}
-            />
-          </label>
-          {#if profiles.length > 1}
-            <label class="toolbar-label">
-              <span class="toolbar-icon">ACC</span>
-              <select class="toolbar-select" bind:value={selectedProfile}>
-                <option value="">Default account</option>
-                {#each profiles as profile (profile.name)}
-                  <option value={profile.name}>
-                    {profile.display_name || profile.name}
-                    {#if profile.subscription_type}
-                      ({profile.subscription_type})
-                    {/if}
-                  </option>
-                {/each}
-              </select>
-            </label>
-          {/if}
-        </div>
-      </div>
       <form onsubmit={handleSubmit} class="prompt-form">
         <div class="prompt-wrapper">
           <textarea
@@ -938,69 +903,6 @@
   .follow-up-btn:hover { opacity: 0.9; }
   .follow-up-btn:disabled { opacity: 0.4; cursor: not-allowed; }
 
-  /* Session toolbar */
-  .session-toolbar {
-    width: 100%;
-    margin-bottom: 0.5rem;
-  }
-
-  .toolbar-row {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
-
-  .toolbar-label {
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex: 1;
-    min-width: 180px;
-  }
-
-  .toolbar-icon {
-    font-size: 9px;
-    font-weight: 700;
-    color: var(--ctp-crust);
-    background: var(--ctp-overlay1);
-    padding: 2px 5px;
-    border-radius: 3px;
-    letter-spacing: 0.5px;
-    flex-shrink: 0;
-  }
-
-  .toolbar-input {
-    flex: 1;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: 3px;
-    color: var(--text-primary);
-    font-size: 11px;
-    padding: 3px 6px;
-    font-family: var(--font-mono);
-  }
-
-  .toolbar-input:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-
-  .toolbar-select {
-    flex: 1;
-    background: var(--bg-surface);
-    border: 1px solid var(--border);
-    border-radius: 3px;
-    color: var(--text-primary);
-    font-size: 11px;
-    padding: 3px 4px;
-    font-family: inherit;
-  }
-
-  .toolbar-select:focus {
-    outline: none;
-    border-color: var(--accent);
-  }
-
   /* Skill autocomplete */
   .prompt-wrapper {
     position: relative;
diff --git a/v2/src/lib/components/Workspace/ClaudeSession.svelte b/v2/src/lib/components/Workspace/ClaudeSession.svelte
index 08e658a..4555b51 100644
--- a/v2/src/lib/components/Workspace/ClaudeSession.svelte
+++ b/v2/src/lib/components/Workspace/ClaudeSession.svelte
@@ -107,6 +107,7 @@
     <AgentPane
       {sessionId}
       cwd={project.cwd}
+      profile={project.profile || undefined}
     />
   {/if}
 </div>
diff --git a/v2/src/lib/components/Workspace/ProjectBox.svelte b/v2/src/lib/components/Workspace/ProjectBox.svelte
index 8b86088..2ac9baf 100644
--- a/v2/src/lib/components/Workspace/ProjectBox.svelte
+++ b/v2/src/lib/components/Workspace/ProjectBox.svelte
@@ -5,6 +5,8 @@
   import ClaudeSession from './ClaudeSession.svelte';
   import TerminalTabs from './TerminalTabs.svelte';
   import TeamAgentsPanel from './TeamAgentsPanel.svelte';
+  import ProjectFiles from './ProjectFiles.svelte';
+  import ContextPane from '../Context/ContextPane.svelte';
 
   interface Props {
     project: ProjectConfig;
@@ -17,6 +19,9 @@
 
   let accentVar = $derived(PROJECT_ACCENTS[slotIndex % PROJECT_ACCENTS.length]);
   let mainSessionId = $state<string | null>(null);
+
+  type ProjectTab = 'claude' | 'files' | 'context';
+  let activeTab = $state<ProjectTab>('claude');
 </script>
 
 <div
@@ -31,10 +36,40 @@
     onclick={onactivate}
   />
 
-  <div class="project-session-area">
-    <ClaudeSession {project} onsessionid={(id) => mainSessionId = id} />
-    {#if mainSessionId}
-      <TeamAgentsPanel {mainSessionId} />
+  <div class="project-tabs">
+    <button
+      class="ptab"
+      class:active={activeTab === 'claude'}
+      onclick={() => activeTab = 'claude'}
+    >Claude</button>
+    <button
+      class="ptab"
+      class:active={activeTab === 'files'}
+      onclick={() => activeTab = 'files'}
+    >Files</button>
+    <button
+      class="ptab"
+      class:active={activeTab === 'context'}
+      onclick={() => activeTab = 'context'}
+    >Context</button>
+  </div>
+
+  <div class="project-content-area">
+    {#if activeTab === 'claude'}
+      <div class="content-pane">
+        <ClaudeSession {project} onsessionid={(id) => mainSessionId = id} />
+        {#if mainSessionId}
+          <TeamAgentsPanel {mainSessionId} />
+        {/if}
+      </div>
+    {:else if activeTab === 'files'}
+      <div class="content-pane">
+        <ProjectFiles cwd={project.cwd} projectName={project.name} />
+      </div>
+    {:else if activeTab === 'context'}
+      <div class="content-pane">
+        <ContextPane onExit={() => {}} />
+      </div>
     {/if}
   </div>
 
@@ -46,7 +81,7 @@
 <style>
   .project-box {
     display: grid;
-    grid-template-rows: auto 1fr auto;
+    grid-template-rows: auto auto 1fr auto;
     min-width: 30rem;
     scroll-snap-align: start;
     background: var(--ctp-base);
@@ -60,13 +95,50 @@
     border-color: var(--accent);
   }
 
-  .project-session-area {
+  .project-tabs {
     display: flex;
+    gap: 0;
+    background: var(--ctp-mantle);
+    border-bottom: 1px solid var(--ctp-surface0);
+    flex-shrink: 0;
+  }
+
+  .ptab {
+    padding: 0.25rem 0.75rem;
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--ctp-overlay1);
+    font-size: 0.7rem;
+    font-weight: 500;
+    cursor: pointer;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    transition: color 0.1s, border-color 0.1s;
+  }
+
+  .ptab:hover {
+    color: var(--ctp-text);
+  }
+
+  .ptab.active {
+    color: var(--ctp-text);
+    border-bottom-color: var(--accent);
+    font-weight: 600;
+  }
+
+  .project-content-area {
     overflow: hidden;
     position: relative;
     min-height: 0;
   }
 
+  .content-pane {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+  }
+
   .project-terminal-area {
     height: 16rem;
     min-height: 8rem;
diff --git a/v2/src/lib/components/Workspace/ProjectFiles.svelte b/v2/src/lib/components/Workspace/ProjectFiles.svelte
new file mode 100644
index 0000000..8329e3a
--- /dev/null
+++ b/v2/src/lib/components/Workspace/ProjectFiles.svelte
@@ -0,0 +1,141 @@
+<script lang="ts">
+  import { discoverMarkdownFiles, type MdFileEntry } from '../../adapters/groups-bridge';
+  import MarkdownPane from '../Markdown/MarkdownPane.svelte';
+
+  interface Props {
+    cwd: string;
+    projectName: string;
+  }
+
+  let { cwd, projectName }: Props = $props();
+
+  let files = $state<MdFileEntry[]>([]);
+  let selectedPath = $state<string | null>(null);
+  let loading = $state(false);
+
+  $effect(() => {
+    loadFiles(cwd);
+  });
+
+  async function loadFiles(dir: string) {
+    loading = true;
+    try {
+      files = await discoverMarkdownFiles(dir);
+      const priority = files.find(f => f.priority);
+      selectedPath = priority?.path ?? files[0]?.path ?? null;
+    } catch (e) {
+      console.warn('Failed to discover markdown files:', e);
+      files = [];
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<div class="project-files">
+  <aside class="file-picker">
+    {#if loading}
+      <div class="state-msg">Scanning...</div>
+    {:else if files.length === 0}
+      <div class="state-msg">No files found</div>
+    {:else}
+      <ul class="file-list">
+        {#each files as file}
+          <li>
+            <button
+              class="file-btn"
+              class:active={selectedPath === file.path}
+              class:priority={file.priority}
+              onclick={() => (selectedPath = file.path)}
+            >
+              {file.name}
+            </button>
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </aside>
+
+  <main class="doc-content">
+    {#if selectedPath}
+      <MarkdownPane paneId="pf-{projectName}" filePath={selectedPath} />
+    {:else}
+      <div class="state-msg full">Select a file</div>
+    {/if}
+  </main>
+</div>
+
+<style>
+  .project-files {
+    display: flex;
+    height: 100%;
+    overflow: hidden;
+    flex: 1;
+  }
+
+  .file-picker {
+    width: 10rem;
+    flex-shrink: 0;
+    background: var(--ctp-mantle);
+    border-right: 1px solid var(--ctp-surface0);
+    overflow-y: auto;
+    padding: 0.25rem 0;
+  }
+
+  .file-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .file-btn {
+    display: block;
+    width: 100%;
+    padding: 0.2rem 0.5rem;
+    background: transparent;
+    border: none;
+    color: var(--ctp-subtext0);
+    font-size: 0.72rem;
+    text-align: left;
+    cursor: pointer;
+    transition: color 0.1s, background 0.1s;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .file-btn:hover {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+  }
+
+  .file-btn.active {
+    background: var(--ctp-surface0);
+    color: var(--ctp-text);
+    font-weight: 600;
+  }
+
+  .file-btn.priority {
+    color: var(--ctp-blue);
+  }
+
+  .doc-content {
+    flex: 1;
+    overflow: auto;
+    min-width: 0;
+  }
+
+  .state-msg {
+    color: var(--ctp-overlay0);
+    font-size: 0.75rem;
+    padding: 0.75rem 0.5rem;
+    text-align: center;
+  }
+
+  .state-msg.full {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+</style>
diff --git a/v2/src/lib/components/Workspace/ProjectHeader.svelte b/v2/src/lib/components/Workspace/ProjectHeader.svelte
index 071f175..7e5b807 100644
--- a/v2/src/lib/components/Workspace/ProjectHeader.svelte
+++ b/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>