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
This commit is contained in:
Hibryda
parent
e2fda3f742
commit
f2aa514845
5 changed files with 297 additions and 115 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -107,6 +107,7 @@
|
|||
<AgentPane
|
||||
{sessionId}
|
||||
cwd={project.cwd}
|
||||
profile={project.profile || undefined}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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,12 +36,42 @@
|
|||
onclick={onactivate}
|
||||
/>
|
||||
|
||||
<div class="project-session-area">
|
||||
<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>
|
||||
|
||||
<div class="project-terminal-area">
|
||||
<TerminalTabs {project} />
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
141
v2/src/lib/components/Workspace/ProjectFiles.svelte
Normal file
141
v2/src/lib/components/Workspace/ProjectFiles.svelte
Normal file
|
|
@ -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>
|
||||
|
|
@ -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}
|
||||
>
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue