feat(electrobun): port all Tauri features — full settings, popup menus, provider capabilities
New components (8): - provider-capabilities.ts: per-provider feature flags (claude/codex/ollama) - settings/AppearanceSettings.svelte: theme, fonts, cursor, scrollback - settings/AgentSettings.svelte: shell, CWD, permissions, providers - settings/SecuritySettings.svelte: keyring, secrets, branch policies - settings/ProjectSettings.svelte: per-project provider/model/worktree/sandbox - settings/OrchestrationSettings.svelte: wake strategy, notifications, anchors - settings/AdvancedSettings.svelte: logging, OTLP, plugins, import/export Updated: - ChatInput: radial context indicator (78% demo, color-coded arc), 4 popup menus (upload/context/web/slash), provider-gated icons - SettingsDrawer: 6-category sidebar shell - AgentPane: passes provider + contextPct to ChatInput
This commit is contained in:
Hibryda
parent
54d6f0b94a
commit
0b9e8b305a
15 changed files with 1510 additions and 441 deletions
190
ui-electrobun/src/mainview/settings/SecuritySettings.svelte
Normal file
190
ui-electrobun/src/mainview/settings/SecuritySettings.svelte
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
<script lang="ts">
|
||||
const KNOWN_KEYS: Record<string, string> = {
|
||||
ANTHROPIC_API_KEY: 'Anthropic API Key',
|
||||
OPENAI_API_KEY: 'OpenAI API Key',
|
||||
GITHUB_TOKEN: 'GitHub Token',
|
||||
OLLAMA_API_KEY: 'Ollama API Key',
|
||||
};
|
||||
|
||||
// Demo state — no real keyring in prototype
|
||||
let keyringAvailable = $state(true);
|
||||
let storedKeys = $state<string[]>(['ANTHROPIC_API_KEY']);
|
||||
let revealedKey = $state<string | null>(null);
|
||||
|
||||
let newKey = $state('');
|
||||
let newValue = $state('');
|
||||
let keyDropOpen = $state(false);
|
||||
let saving = $state(false);
|
||||
|
||||
interface BranchPolicy {
|
||||
pattern: string;
|
||||
action: 'block' | 'warn';
|
||||
}
|
||||
let branchPolicies = $state<BranchPolicy[]>([
|
||||
{ pattern: 'main', action: 'block' },
|
||||
{ pattern: 'prod*', action: 'warn' },
|
||||
]);
|
||||
let newPattern = $state('');
|
||||
let newAction = $state<'block' | 'warn'>('warn');
|
||||
|
||||
let availableKeys = $derived(Object.keys(KNOWN_KEYS).filter(k => !storedKeys.includes(k)));
|
||||
let newKeyLabel = $derived(newKey ? (KNOWN_KEYS[newKey] ?? newKey) : 'Select key...');
|
||||
|
||||
function handleSaveSecret() {
|
||||
if (!newKey || !newValue) return;
|
||||
saving = true;
|
||||
setTimeout(() => {
|
||||
storedKeys = [...storedKeys, newKey];
|
||||
newKey = ''; newValue = '';
|
||||
saving = false;
|
||||
}, 400);
|
||||
}
|
||||
|
||||
function deleteSecret(key: string) {
|
||||
storedKeys = storedKeys.filter(k => k !== key);
|
||||
if (revealedKey === key) revealedKey = null;
|
||||
}
|
||||
|
||||
function addBranchPolicy() {
|
||||
if (!newPattern.trim()) return;
|
||||
branchPolicies = [...branchPolicies, { pattern: newPattern.trim(), action: newAction }];
|
||||
newPattern = ''; newAction = 'warn';
|
||||
}
|
||||
|
||||
function removeBranchPolicy(idx: number) {
|
||||
branchPolicies = branchPolicies.filter((_, i) => i !== idx);
|
||||
}
|
||||
|
||||
function handleOutsideClick(e: MouseEvent) {
|
||||
if (!(e.target as HTMLElement).closest('.dd-wrap')) keyDropOpen = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="section" onclick={handleOutsideClick} onkeydown={e => e.key === 'Escape' && (keyDropOpen = false)}>
|
||||
|
||||
<h3 class="sh">Keyring Status</h3>
|
||||
<div class="keyring-status" class:ok={keyringAvailable} class:unavail={!keyringAvailable}>
|
||||
<span class="ks-dot"></span>
|
||||
<span>{keyringAvailable ? 'System keyring available' : 'System keyring unavailable — secrets stored in plain config'}</span>
|
||||
</div>
|
||||
|
||||
<h3 class="sh">Stored Secrets</h3>
|
||||
{#if storedKeys.length === 0}
|
||||
<p class="empty-hint">No secrets stored.</p>
|
||||
{:else}
|
||||
<div class="secret-list">
|
||||
{#each storedKeys as key}
|
||||
<div class="secret-row">
|
||||
<span class="secret-key">{KNOWN_KEYS[key] ?? key}</span>
|
||||
<span class="secret-val">{revealedKey === key ? '••••••• (revealed)' : '•••••••'}</span>
|
||||
<button class="icon-btn" onclick={() => revealedKey = revealedKey === key ? null : key} title="Toggle reveal">
|
||||
{revealedKey === key ? '🙈' : '👁'}
|
||||
</button>
|
||||
<button class="icon-btn danger" onclick={() => deleteSecret(key)} title="Delete">✕</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="add-secret">
|
||||
<div class="dd-wrap">
|
||||
<button class="dd-btn small" onclick={() => keyDropOpen = !keyDropOpen}>
|
||||
{newKeyLabel}
|
||||
<svg class="chev" class:open={keyDropOpen} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
|
||||
</button>
|
||||
{#if keyDropOpen}
|
||||
<ul class="dd-list" role="listbox">
|
||||
{#each availableKeys as k}
|
||||
<li class="dd-item" role="option" aria-selected={newKey === k} tabindex="0"
|
||||
onclick={() => { newKey = k; keyDropOpen = false; }}
|
||||
onkeydown={e => (e.key === 'Enter' || e.key === ' ') && (newKey = k, keyDropOpen = false)}
|
||||
>{KNOWN_KEYS[k]}</li>
|
||||
{/each}
|
||||
{#if availableKeys.length === 0}
|
||||
<li class="dd-item disabled-item">All known keys stored</li>
|
||||
{/if}
|
||||
</ul>
|
||||
{/if}
|
||||
</div>
|
||||
<input class="text-in flex1" type="password" bind:value={newValue} placeholder="Value" aria-label="Secret value" />
|
||||
<button class="save-btn" onclick={handleSaveSecret} disabled={!newKey || !newValue || saving}>
|
||||
{saving ? '…' : 'Save'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h3 class="sh" style="margin-top: 0.875rem;">Branch Policies</h3>
|
||||
<div class="policy-list">
|
||||
{#each branchPolicies as pol, i}
|
||||
<div class="policy-row">
|
||||
<code class="pol-pattern">{pol.pattern}</code>
|
||||
<span class="pol-action" class:block={pol.action === 'block'} class:warn={pol.action === 'warn'}>{pol.action}</span>
|
||||
<button class="icon-btn danger" onclick={() => removeBranchPolicy(i)} title="Remove">✕</button>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="add-policy">
|
||||
<input class="text-in flex1" bind:value={newPattern} placeholder="e.g. main, prod*" aria-label="Branch pattern" />
|
||||
<div class="seg">
|
||||
<button class:active={newAction === 'warn'} onclick={() => newAction = 'warn'}>Warn</button>
|
||||
<button class:active={newAction === 'block'} onclick={() => newAction = 'block'}>Block</button>
|
||||
</div>
|
||||
<button class="save-btn" onclick={addBranchPolicy} disabled={!newPattern.trim()}>Add</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.section { display: flex; flex-direction: column; gap: 0.5rem; }
|
||||
.sh { margin: 0.375rem 0 0.125rem; font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ctp-overlay0); }
|
||||
|
||||
.keyring-status { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; padding: 0.375rem 0.5rem; border-radius: 0.25rem; background: var(--ctp-surface0); }
|
||||
.ks-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; flex-shrink: 0; background: var(--ctp-overlay0); }
|
||||
.keyring-status.ok .ks-dot { background: var(--ctp-green); }
|
||||
.keyring-status.unavail .ks-dot { background: var(--ctp-peach); }
|
||||
.keyring-status.ok { color: var(--ctp-subtext1); }
|
||||
.keyring-status.unavail { color: var(--ctp-peach); }
|
||||
|
||||
.empty-hint { font-size: 0.8rem; color: var(--ctp-overlay0); margin: 0; font-style: italic; }
|
||||
|
||||
.secret-list { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.secret-row { display: flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.5rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; }
|
||||
.secret-key { font-size: 0.8rem; color: var(--ctp-text); font-weight: 500; flex: 1; }
|
||||
.secret-val { font-family: var(--term-font-family, monospace); font-size: 0.75rem; color: var(--ctp-overlay1); min-width: 7rem; }
|
||||
|
||||
.add-secret { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem; }
|
||||
.add-policy { display: flex; align-items: center; gap: 0.375rem; margin-top: 0.25rem; }
|
||||
.flex1 { flex: 1; min-width: 0; }
|
||||
|
||||
.dd-wrap { position: relative; flex-shrink: 0; }
|
||||
.dd-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; color: var(--ctp-subtext1); font-family: var(--ui-font-family); cursor: pointer; white-space: nowrap; }
|
||||
.dd-btn.small { padding: 0.275rem 0.5rem; font-size: 0.75rem; min-width: 8rem; }
|
||||
.chev { width: 0.625rem; height: 0.625rem; color: var(--ctp-overlay1); transition: transform 0.15s; }
|
||||
.chev.open { transform: rotate(180deg); }
|
||||
.dd-list { position: absolute; top: calc(100% + 0.125rem); left: 0; z-index: 50; list-style: none; margin: 0; padding: 0.2rem; background: var(--ctp-mantle); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; min-width: 10rem; box-shadow: 0 0.5rem 1rem color-mix(in srgb, var(--ctp-crust) 60%, transparent); }
|
||||
.dd-item { padding: 0.3rem 0.5rem; border-radius: 0.2rem; font-size: 0.8rem; color: var(--ctp-subtext1); cursor: pointer; outline: none; }
|
||||
.dd-item:hover, .dd-item:focus { background: var(--ctp-surface0); color: var(--ctp-text); }
|
||||
.disabled-item { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
.text-in { padding: 0.275rem 0.5rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; color: var(--ctp-text); font-size: 0.8rem; font-family: var(--ui-font-family); }
|
||||
.text-in:focus { outline: none; border-color: var(--ctp-blue); }
|
||||
|
||||
.save-btn { padding: 0.275rem 0.625rem; background: var(--ctp-blue); border: none; border-radius: 0.25rem; color: var(--ctp-base); font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: var(--ui-font-family); flex-shrink: 0; }
|
||||
.save-btn:hover:not(:disabled) { filter: brightness(1.1); }
|
||||
.save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
|
||||
|
||||
.policy-list { display: flex; flex-direction: column; gap: 0.25rem; }
|
||||
.policy-row { display: flex; align-items: center; gap: 0.375rem; padding: 0.3rem 0.5rem; background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1); border-radius: 0.25rem; }
|
||||
.pol-pattern { font-family: var(--term-font-family, monospace); font-size: 0.8rem; color: var(--ctp-text); flex: 1; }
|
||||
.pol-action { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.375rem; border-radius: 0.2rem; }
|
||||
.pol-action.block { background: color-mix(in srgb, var(--ctp-red) 15%, transparent); color: var(--ctp-red); }
|
||||
.pol-action.warn { background: color-mix(in srgb, var(--ctp-yellow) 15%, transparent); color: var(--ctp-yellow); }
|
||||
|
||||
.icon-btn { background: none; border: none; color: var(--ctp-overlay0); cursor: pointer; font-size: 0.85rem; padding: 0.2rem; border-radius: 0.15rem; }
|
||||
.icon-btn:hover { color: var(--ctp-text); background: var(--ctp-surface1); }
|
||||
.icon-btn.danger:hover { color: var(--ctp-red); }
|
||||
|
||||
.seg { display: flex; border-radius: 0.25rem; overflow: hidden; border: 1px solid var(--ctp-surface1); flex-shrink: 0; }
|
||||
.seg button { padding: 0.25rem 0.5rem; background: var(--ctp-surface0); border: none; color: var(--ctp-overlay1); font-size: 0.75rem; cursor: pointer; font-family: var(--ui-font-family); }
|
||||
.seg button:not(:last-child) { border-right: 1px solid var(--ctp-surface1); }
|
||||
.seg button.active { background: color-mix(in srgb, var(--ctp-blue) 20%, var(--ctp-surface0)); color: var(--ctp-blue); font-weight: 600; }
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue