<script lang="ts">
import SettingsSection from "./SettingsSection.svelte";
import { settings } from "../../stores/settings.svelte.js";
const AGENT_LABELS: Record<string, string> = {
claude: "Claude Code",
codex: "Codex",
copilot: "Copilot",
gemini: "Gemini",
opencode: "OpenCode",
cursor: "Cursor",
amp: "Amp",
iflow: "iFlow",
"vscode-copilot": "VSCode Copilot",
pi: "Pi",
openclaw: "OpenClaw",
kimi: "Kimi",
};
</script>
<SettingsSection
title="Agent Directories"
description="Directories scanned for session data. Configured via environment variables or config file."
>
<div class="dir-list">
{#each Object.entries(settings.agentDirs) as [agent, dirs]}
<div class="dir-row">
<span class="dir-agent">{AGENT_LABELS[agent] ?? agent}</span>
<div class="dir-paths">
{#if dirs.length === 0}
<span class="dir-none">Not configured</span>
{:else}
{#each dirs as dir}
<code class="dir-path">{dir}</code>
{/each}
{/if}
</div>
</div>
{/each}
</div>
</SettingsSection>
<style>
.dir-list {
display: flex;
flex-direction: column;
gap: var(--wb-spacing-10);
}
.dir-row {
display: flex;
align-items: baseline;
gap: var(--wb-spacing-12);
}
.dir-agent {
font-size: var(--wb-font-size-12);
font-weight: 500;
color: var(--vscode-foreground);
min-width: var(--wb-control-size-110);
flex-shrink: 0;
}
.dir-paths {
display: flex;
flex-direction: column;
gap: var(--wb-spacing-2);
min-width: 0;
}
.dir-path {
font-size: var(--wb-font-size-11);
color: var(--vscode-disabledForeground);
word-break: break-all;
}
.dir-none {
font-size: var(--wb-font-size-11);
color: var(--vscode-disabledForeground);
font-style: italic;
}
</style>