refactor(v3): remove dead v2 components and empty directories
Delete 7 components no longer used in v3 Mission Control (~1,836 lines): TilingGrid, PaneContainer, PaneHeader, SessionList, SshSessionList, SshDialog, SettingsDialog. Empty directories (Layout/, Sidebar/, Settings/, SSH/) removed.
This commit is contained in:
Hibryda
parent
e0056f811f
commit
160712de50
7 changed files with 0 additions and 1836 deletions
|
|
@ -1,113 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from 'svelte';
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
status?: 'idle' | 'running' | 'error' | 'done';
|
||||
onClose?: () => void;
|
||||
onDetach?: () => void;
|
||||
children: Snippet;
|
||||
}
|
||||
|
||||
let { title, status = 'idle', onClose, onDetach, children }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="pane-container">
|
||||
<div class="pane-header">
|
||||
<span class="pane-title">{title}</span>
|
||||
<div class="pane-controls">
|
||||
{#if status !== 'idle'}
|
||||
<span class="status {status}">{status}</span>
|
||||
{/if}
|
||||
{#if onDetach}
|
||||
<button class="detach-btn" onclick={onDetach} title="Pop out to new window">↗</button>
|
||||
{/if}
|
||||
{#if onClose}
|
||||
<button class="close-btn" onclick={onClose} title="Close pane">×</button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="pane-content">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pane-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.pane-header {
|
||||
height: var(--pane-header-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pane-title {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.pane-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.status {
|
||||
font-size: 10px;
|
||||
padding: 1px 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.status.running { color: var(--ctp-blue); }
|
||||
.status.error { color: var(--ctp-red); }
|
||||
.status.done { color: var(--ctp-green); }
|
||||
|
||||
.detach-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.detach-btn:hover { color: var(--ctp-blue); }
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: var(--ctp-red);
|
||||
}
|
||||
|
||||
.pane-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
min-height: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
title: string;
|
||||
status?: 'idle' | 'running' | 'error' | 'done';
|
||||
}
|
||||
|
||||
let { title, status = 'idle' }: Props = $props();
|
||||
</script>
|
||||
|
||||
<div class="pane-header">
|
||||
<span class="pane-title">{title}</span>
|
||||
{#if status !== 'idle'}
|
||||
<span class="status-indicator {status}">{status}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.pane-header {
|
||||
height: var(--pane-header-height);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
background: var(--bg-tertiary);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.pane-title {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.status-indicator.running { color: var(--ctp-blue); }
|
||||
.status-indicator.error { color: var(--ctp-red); }
|
||||
.status-indicator.done { color: var(--ctp-green); }
|
||||
</style>
|
||||
|
|
@ -1,328 +0,0 @@
|
|||
<script lang="ts">
|
||||
import PaneContainer from './PaneContainer.svelte';
|
||||
import TerminalPane from '../Terminal/TerminalPane.svelte';
|
||||
import AgentPane from '../Agent/AgentPane.svelte';
|
||||
import MarkdownPane from '../Markdown/MarkdownPane.svelte';
|
||||
import ContextPane from '../Context/ContextPane.svelte';
|
||||
import {
|
||||
getPanes,
|
||||
getGridTemplate,
|
||||
getPaneGridArea,
|
||||
getActivePreset,
|
||||
focusPane,
|
||||
removePane,
|
||||
} from '../../stores/layout.svelte';
|
||||
import { detachPane } from '../../utils/detach';
|
||||
import { isDetachedMode } from '../../utils/detach';
|
||||
import { stopAgent } from '../../adapters/agent-bridge';
|
||||
import { getAgentSession } from '../../stores/agents.svelte';
|
||||
|
||||
let gridTemplate = $derived(getGridTemplate());
|
||||
let panes = $derived(getPanes());
|
||||
let detached = isDetachedMode();
|
||||
|
||||
// Custom column/row sizes (overrides preset when user drags)
|
||||
let customColumns = $state<string | null>(null);
|
||||
let customRows = $state<string | null>(null);
|
||||
let gridEl: HTMLDivElement | undefined = $state();
|
||||
|
||||
// Reset custom sizes when preset changes
|
||||
let prevPreset = '';
|
||||
$effect(() => {
|
||||
const p = getActivePreset();
|
||||
if (prevPreset && p !== prevPreset) {
|
||||
customColumns = null;
|
||||
customRows = null;
|
||||
}
|
||||
prevPreset = p;
|
||||
});
|
||||
|
||||
let columns = $derived(customColumns ?? gridTemplate.columns);
|
||||
let rows = $derived(customRows ?? gridTemplate.rows);
|
||||
|
||||
// Determine splitter positions based on preset
|
||||
let colCount = $derived(gridTemplate.columns.split(' ').length);
|
||||
let rowCount = $derived(gridTemplate.rows.split(' ').length);
|
||||
|
||||
function handleDetach(pane: typeof panes[0]) {
|
||||
detachPane(pane);
|
||||
removePane(pane.id);
|
||||
}
|
||||
|
||||
// Drag resize logic
|
||||
let dragging = $state(false);
|
||||
|
||||
function getColSplitterX(ci: number): number {
|
||||
if (!gridEl) return 0;
|
||||
const rect = gridEl.getBoundingClientRect();
|
||||
const cols = columns.split(' ').map(s => parseFloat(s));
|
||||
const total = cols.reduce((a, b) => a + b, 0);
|
||||
let frac = 0;
|
||||
for (let i = 0; i <= ci; i++) frac += cols[i] / total;
|
||||
return rect.left + frac * rect.width;
|
||||
}
|
||||
|
||||
function getRowSplitterY(ri: number): number {
|
||||
if (!gridEl) return 0;
|
||||
const rect = gridEl.getBoundingClientRect();
|
||||
const rws = rows.split(' ').map(s => parseFloat(s));
|
||||
const total = rws.reduce((a, b) => a + b, 0);
|
||||
let frac = 0;
|
||||
for (let i = 0; i <= ri; i++) frac += rws[i] / total;
|
||||
return rect.top + frac * rect.height;
|
||||
}
|
||||
|
||||
function startColDrag(colIndex: number, e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
dragging = true;
|
||||
if (!gridEl) return;
|
||||
|
||||
const rect = gridEl.getBoundingClientRect();
|
||||
const totalWidth = rect.width;
|
||||
|
||||
function onMove(ev: MouseEvent) {
|
||||
const relX = ev.clientX - rect.left;
|
||||
const ratio = Math.max(0.1, Math.min(0.9, relX / totalWidth));
|
||||
if (colCount === 2) {
|
||||
customColumns = `${ratio}fr ${1 - ratio}fr`;
|
||||
} else if (colCount === 3) {
|
||||
if (colIndex === 0) {
|
||||
const remaining = 1 - ratio;
|
||||
customColumns = `${ratio}fr ${remaining / 2}fr ${remaining / 2}fr`;
|
||||
} else {
|
||||
// Get current first column ratio or default
|
||||
const parts = (customColumns ?? gridTemplate.columns).split(' ');
|
||||
const first = parseFloat(parts[0]) / parts.reduce((s, p) => s + parseFloat(p), 0);
|
||||
const relRatio = (relX / totalWidth - first) / (1 - first);
|
||||
const adj = Math.max(0.1, Math.min(0.9, relRatio));
|
||||
customColumns = `${first}fr ${(1 - first) * adj}fr ${(1 - first) * (1 - adj)}fr`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onUp() {
|
||||
dragging = false;
|
||||
window.removeEventListener('mousemove', onMove);
|
||||
window.removeEventListener('mouseup', onUp);
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', onMove);
|
||||
window.addEventListener('mouseup', onUp);
|
||||
}
|
||||
|
||||
function startRowDrag(_rowIndex: number, e: MouseEvent) {
|
||||
e.preventDefault();
|
||||
dragging = true;
|
||||
if (!gridEl) return;
|
||||
|
||||
const rect = gridEl.getBoundingClientRect();
|
||||
const totalHeight = rect.height;
|
||||
|
||||
function onMove(ev: MouseEvent) {
|
||||
const relY = ev.clientY - rect.top;
|
||||
const ratio = Math.max(0.1, Math.min(0.9, relY / totalHeight));
|
||||
if (rowCount === 2) {
|
||||
customRows = `${ratio}fr ${1 - ratio}fr`;
|
||||
}
|
||||
}
|
||||
|
||||
function onUp() {
|
||||
dragging = false;
|
||||
window.removeEventListener('mousemove', onMove);
|
||||
window.removeEventListener('mouseup', onUp);
|
||||
}
|
||||
|
||||
window.addEventListener('mousemove', onMove);
|
||||
window.addEventListener('mouseup', onUp);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="tiling-grid"
|
||||
class:dragging
|
||||
bind:this={gridEl}
|
||||
style:grid-template-columns={columns}
|
||||
style:grid-template-rows={rows}
|
||||
>
|
||||
{#if panes.length === 0}
|
||||
<div class="empty-state">
|
||||
<h1>BTerminal v2</h1>
|
||||
<p>Claude Agent Mission Control</p>
|
||||
<p class="hint">Press <kbd>Ctrl+N</kbd> to open a terminal</p>
|
||||
</div>
|
||||
{:else}
|
||||
{#each panes as pane, i (pane.id)}
|
||||
{@const gridArea = getPaneGridArea(i)}
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="pane-slot"
|
||||
class:focused={pane.focused}
|
||||
style:grid-area={gridArea}
|
||||
onclick={() => focusPane(pane.id)}
|
||||
>
|
||||
<PaneContainer
|
||||
title={pane.title}
|
||||
status={pane.focused ? 'running' : 'idle'}
|
||||
onClose={() => {
|
||||
if (pane.type === 'agent') {
|
||||
const s = getAgentSession(pane.id);
|
||||
if (s?.status === 'running' || s?.status === 'starting') {
|
||||
stopAgent(pane.id).catch(() => {});
|
||||
}
|
||||
}
|
||||
removePane(pane.id);
|
||||
}}
|
||||
onDetach={detached ? undefined : () => handleDetach(pane)}
|
||||
>
|
||||
{#if pane.type === 'terminal'}
|
||||
<TerminalPane
|
||||
shell={pane.shell}
|
||||
cwd={pane.cwd}
|
||||
args={pane.args}
|
||||
onExit={() => removePane(pane.id)}
|
||||
/>
|
||||
{:else if pane.type === 'agent'}
|
||||
<AgentPane
|
||||
sessionId={pane.id}
|
||||
cwd={pane.cwd}
|
||||
onExit={() => removePane(pane.id)}
|
||||
/>
|
||||
{:else if pane.type === 'ssh'}
|
||||
<TerminalPane
|
||||
shell={pane.shell}
|
||||
cwd={pane.cwd}
|
||||
args={pane.args}
|
||||
onExit={() => removePane(pane.id)}
|
||||
/>
|
||||
{:else if pane.type === 'context'}
|
||||
<ContextPane onExit={() => removePane(pane.id)} />
|
||||
{:else if pane.type === 'markdown'}
|
||||
<MarkdownPane
|
||||
paneId={pane.id}
|
||||
filePath={pane.cwd ?? ''}
|
||||
onExit={() => removePane(pane.id)}
|
||||
/>
|
||||
{:else}
|
||||
<div class="placeholder">
|
||||
<p>{pane.type} pane — coming soon</p>
|
||||
</div>
|
||||
{/if}
|
||||
</PaneContainer>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Splitter overlays (outside grid to avoid layout interference) -->
|
||||
{#if panes.length > 1 && gridEl}
|
||||
{#each { length: colCount - 1 } as _, ci}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="splitter splitter-col"
|
||||
style:left="{gridEl ? getColSplitterX(ci) : 0}px"
|
||||
style:top="{gridEl?.getBoundingClientRect().top ?? 0}px"
|
||||
style:height="{gridEl?.getBoundingClientRect().height ?? 0}px"
|
||||
onmousedown={(e) => startColDrag(ci, e)}
|
||||
></div>
|
||||
{/each}
|
||||
{#each { length: rowCount - 1 } as _, ri}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="splitter splitter-row"
|
||||
style:top="{gridEl ? getRowSplitterY(ri) : 0}px"
|
||||
style:left="{gridEl?.getBoundingClientRect().left ?? 0}px"
|
||||
style:width="{gridEl?.getBoundingClientRect().width ?? 0}px"
|
||||
onmousedown={(e) => startRowDrag(ri, e)}
|
||||
></div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.tiling-grid {
|
||||
display: grid;
|
||||
gap: var(--pane-gap);
|
||||
height: 100%;
|
||||
padding: var(--pane-gap);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tiling-grid.dragging {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pane-slot {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pane-slot.focused {
|
||||
outline: 1px solid var(--accent);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
gap: 8px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state h1 {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.empty-state p { font-size: 14px; }
|
||||
|
||||
.hint {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--ctp-overlay0);
|
||||
}
|
||||
|
||||
kbd {
|
||||
background: var(--bg-surface);
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:global(.splitter) {
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
:global(.splitter:hover), :global(.splitter:active) {
|
||||
background: var(--accent);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
:global(.splitter-col) {
|
||||
width: 6px;
|
||||
margin-left: -3px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
:global(.splitter-row) {
|
||||
height: 6px;
|
||||
margin-top: -3px;
|
||||
cursor: row-resize;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,281 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { notify } from '../../stores/notifications.svelte';
|
||||
import { saveSshSession, type SshSession } from '../../adapters/ssh-bridge';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
editSession?: SshSession;
|
||||
onClose: () => void;
|
||||
onSaved: () => void;
|
||||
}
|
||||
|
||||
let { open, editSession, onClose, onSaved }: Props = $props();
|
||||
|
||||
let name = $state('');
|
||||
let host = $state('');
|
||||
let port = $state(22);
|
||||
let username = $state('');
|
||||
let keyFile = $state('');
|
||||
let folder = $state('');
|
||||
|
||||
let validationError = $state('');
|
||||
|
||||
$effect(() => {
|
||||
if (open && editSession) {
|
||||
name = editSession.name;
|
||||
host = editSession.host;
|
||||
port = editSession.port;
|
||||
username = editSession.username;
|
||||
keyFile = editSession.key_file;
|
||||
folder = editSession.folder;
|
||||
} else if (open) {
|
||||
name = '';
|
||||
host = '';
|
||||
port = 22;
|
||||
username = '';
|
||||
keyFile = '';
|
||||
folder = '';
|
||||
}
|
||||
validationError = '';
|
||||
});
|
||||
|
||||
function validate(): boolean {
|
||||
if (!name.trim()) {
|
||||
validationError = 'Name is required';
|
||||
return false;
|
||||
}
|
||||
if (!host.trim()) {
|
||||
validationError = 'Host is required';
|
||||
return false;
|
||||
}
|
||||
if (!username.trim()) {
|
||||
validationError = 'Username is required';
|
||||
return false;
|
||||
}
|
||||
if (port < 1 || port > 65535) {
|
||||
validationError = 'Port must be between 1 and 65535';
|
||||
return false;
|
||||
}
|
||||
validationError = '';
|
||||
return true;
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!validate()) return;
|
||||
|
||||
const now = Math.floor(Date.now() / 1000);
|
||||
const session: SshSession = {
|
||||
id: editSession?.id ?? crypto.randomUUID(),
|
||||
name: name.trim(),
|
||||
host: host.trim(),
|
||||
port,
|
||||
username: username.trim(),
|
||||
key_file: keyFile.trim(),
|
||||
folder: folder.trim(),
|
||||
color: editSession?.color ?? '#89b4fa',
|
||||
created_at: editSession?.created_at ?? now,
|
||||
last_used_at: now,
|
||||
};
|
||||
|
||||
try {
|
||||
await saveSshSession(session);
|
||||
notify('success', `SSH session "${session.name}" saved`);
|
||||
onSaved();
|
||||
onClose();
|
||||
} catch (e) {
|
||||
notify('error', `Failed to save SSH session: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onClose();
|
||||
if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) handleSave();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="overlay" onkeydown={handleKeydown}>
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div class="backdrop" onclick={onClose}></div>
|
||||
<div class="dialog" role="dialog" aria-label="SSH Session">
|
||||
<div class="dialog-header">
|
||||
<h2>{editSession ? 'Edit' : 'New'} SSH Session</h2>
|
||||
<button class="close-btn" onclick={onClose}>×</button>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
{#if validationError}
|
||||
<div class="validation-error">{validationError}</div>
|
||||
{/if}
|
||||
<label class="field">
|
||||
<span class="field-label">Name</span>
|
||||
<input type="text" bind:value={name} placeholder="My Server" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="field-label">Host</span>
|
||||
<input type="text" bind:value={host} placeholder="192.168.1.100 or server.example.com" />
|
||||
</label>
|
||||
<div class="field-row">
|
||||
<label class="field" style="flex: 1;">
|
||||
<span class="field-label">Username</span>
|
||||
<input type="text" bind:value={username} placeholder="root" />
|
||||
</label>
|
||||
<label class="field" style="width: 100px;">
|
||||
<span class="field-label">Port</span>
|
||||
<input type="number" bind:value={port} min="1" max="65535" />
|
||||
</label>
|
||||
</div>
|
||||
<label class="field">
|
||||
<span class="field-label">SSH Key (optional)</span>
|
||||
<input type="text" bind:value={keyFile} placeholder="~/.ssh/id_ed25519" />
|
||||
<span class="field-hint">Leave empty to use default key or password auth</span>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="field-label">Folder (optional)</span>
|
||||
<input type="text" bind:value={folder} placeholder="Group name for organizing" />
|
||||
<span class="field-hint">Sessions with the same folder are grouped together</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button class="btn-cancel" onclick={onClose}>Cancel</button>
|
||||
<button class="btn-save" onclick={handleSave}>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
position: relative;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
width: 420px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dialog-header h2 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-btn:hover { color: var(--text-primary); }
|
||||
|
||||
.dialog-body {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.validation-error {
|
||||
background: rgba(243, 139, 168, 0.1);
|
||||
border: 1px solid var(--ctp-red);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--ctp-red);
|
||||
font-size: 11px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.field input {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.field input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-cancel, .btn-save {
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 6px 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-cancel:hover { color: var(--text-primary); }
|
||||
|
||||
.btn-save {
|
||||
background: var(--accent);
|
||||
color: var(--ctp-crust);
|
||||
}
|
||||
|
||||
.btn-save:hover { opacity: 0.9; }
|
||||
</style>
|
||||
|
|
@ -1,263 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { listSshSessions, deleteSshSession, type SshSession } from '../../adapters/ssh-bridge';
|
||||
import { addPane } from '../../stores/layout.svelte';
|
||||
import { notify } from '../../stores/notifications.svelte';
|
||||
import SshDialog from './SshDialog.svelte';
|
||||
|
||||
let sessions = $state<SshSession[]>([]);
|
||||
let dialogOpen = $state(false);
|
||||
let editingSession = $state<SshSession | undefined>(undefined);
|
||||
|
||||
onMount(() => {
|
||||
loadSessions();
|
||||
});
|
||||
|
||||
async function loadSessions() {
|
||||
try {
|
||||
sessions = await listSshSessions();
|
||||
} catch (e) {
|
||||
console.warn('Failed to load SSH sessions:', e);
|
||||
}
|
||||
}
|
||||
|
||||
function openNewDialog() {
|
||||
editingSession = undefined;
|
||||
dialogOpen = true;
|
||||
}
|
||||
|
||||
function openEditDialog(session: SshSession) {
|
||||
editingSession = session;
|
||||
dialogOpen = true;
|
||||
}
|
||||
|
||||
function connectSsh(session: SshSession) {
|
||||
const id = crypto.randomUUID();
|
||||
const args: string[] = [];
|
||||
|
||||
// Build ssh command arguments
|
||||
args.push('-p', String(session.port));
|
||||
if (session.key_file) {
|
||||
args.push('-i', session.key_file);
|
||||
}
|
||||
args.push(`${session.username}@${session.host}`);
|
||||
|
||||
addPane({
|
||||
id,
|
||||
type: 'ssh',
|
||||
title: `SSH: ${session.name}`,
|
||||
shell: '/usr/bin/ssh',
|
||||
args,
|
||||
});
|
||||
}
|
||||
|
||||
async function handleDelete(session: SshSession, event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
try {
|
||||
await deleteSshSession(session.id);
|
||||
sessions = sessions.filter(s => s.id !== session.id);
|
||||
notify('success', `Deleted SSH session "${session.name}"`);
|
||||
} catch (e) {
|
||||
notify('error', `Failed to delete SSH session: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
// Group sessions by folder
|
||||
let grouped = $derived(() => {
|
||||
const groups = new Map<string, SshSession[]>();
|
||||
for (const s of sessions) {
|
||||
const folder = s.folder || '';
|
||||
if (!groups.has(folder)) groups.set(folder, []);
|
||||
groups.get(folder)!.push(s);
|
||||
}
|
||||
return groups;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="ssh-sessions">
|
||||
<div class="ssh-header">
|
||||
<h3>SSH</h3>
|
||||
<button class="new-btn" onclick={openNewDialog} title="Add SSH session">+</button>
|
||||
</div>
|
||||
|
||||
{#if sessions.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>No SSH sessions.</p>
|
||||
</div>
|
||||
{:else}
|
||||
{@const groups = grouped()}
|
||||
{#each [...groups.entries()] as [folder, folderSessions] (folder)}
|
||||
{#if folder}
|
||||
<div class="folder-label">{folder}</div>
|
||||
{/if}
|
||||
<ul class="ssh-list">
|
||||
{#each folderSessions as session (session.id)}
|
||||
<li class="ssh-item">
|
||||
<button class="ssh-btn" onclick={() => connectSsh(session)} title="Connect to {session.host}">
|
||||
<span class="ssh-color" style:background={session.color}></span>
|
||||
<span class="ssh-info">
|
||||
<span class="ssh-name">{session.name}</span>
|
||||
<span class="ssh-host">{session.username}@{session.host}:{session.port}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button class="edit-btn" onclick={() => openEditDialog(session)} title="Edit">E</button>
|
||||
<button class="remove-btn" onclick={(e) => handleDelete(session, e)} title="Delete">×</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<SshDialog
|
||||
open={dialogOpen}
|
||||
editSession={editingSession}
|
||||
onClose={() => { dialogOpen = false; }}
|
||||
onSaved={loadSessions}
|
||||
/>
|
||||
|
||||
<style>
|
||||
.ssh-sessions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.ssh-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ssh-header h3 {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.new-btn {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-primary);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.new-btn:hover {
|
||||
background: var(--bg-surface-hover);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.folder-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: var(--ctp-overlay0);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
padding: 4px 0 2px;
|
||||
}
|
||||
|
||||
.ssh-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.ssh-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.ssh-item:hover {
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.ssh-btn {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
padding: 4px 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ssh-btn:hover { color: var(--text-primary); }
|
||||
|
||||
.ssh-color {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ssh-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ssh-name {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ssh-host {
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.edit-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 10px;
|
||||
padding: 2px 3px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 2px 4px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.ssh-item:hover .edit-btn { opacity: 1; }
|
||||
.ssh-item:hover .remove-btn { opacity: 1; }
|
||||
.edit-btn:hover { color: var(--ctp-yellow); }
|
||||
.remove-btn:hover { color: var(--ctp-red); }
|
||||
</style>
|
||||
|
|
@ -1,433 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { getSetting, setSetting } from '../../adapters/settings-bridge';
|
||||
import { notify } from '../../stores/notifications.svelte';
|
||||
import { getCurrentFlavor, setFlavor } from '../../stores/theme.svelte';
|
||||
import { ALL_FLAVORS, FLAVOR_LABELS, type CatppuccinFlavor } from '../../styles/themes';
|
||||
import {
|
||||
getMachines,
|
||||
addMachine,
|
||||
removeMachine,
|
||||
connectMachine,
|
||||
disconnectMachine,
|
||||
loadMachines,
|
||||
} from '../../stores/machines.svelte';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let { open, onClose }: Props = $props();
|
||||
|
||||
let defaultShell = $state('');
|
||||
let defaultCwd = $state('');
|
||||
let maxPanes = $state('4');
|
||||
let themeFlavor = $state<CatppuccinFlavor>('mocha');
|
||||
|
||||
// Machine form state
|
||||
let newMachineLabel = $state('');
|
||||
let newMachineUrl = $state('');
|
||||
let newMachineToken = $state('');
|
||||
let newMachineAutoConnect = $state(false);
|
||||
|
||||
let remoteMachines = $derived(getMachines());
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
defaultShell = (await getSetting('default_shell')) ?? '';
|
||||
defaultCwd = (await getSetting('default_cwd')) ?? '';
|
||||
maxPanes = (await getSetting('max_panes')) ?? '4';
|
||||
themeFlavor = getCurrentFlavor();
|
||||
await loadMachines();
|
||||
} catch {
|
||||
// Use defaults
|
||||
}
|
||||
});
|
||||
|
||||
async function handleSave() {
|
||||
try {
|
||||
if (defaultShell) await setSetting('default_shell', defaultShell);
|
||||
if (defaultCwd) await setSetting('default_cwd', defaultCwd);
|
||||
await setSetting('max_panes', maxPanes);
|
||||
await setFlavor(themeFlavor);
|
||||
notify('success', 'Settings saved');
|
||||
onClose();
|
||||
} catch (e) {
|
||||
notify('error', `Failed to save settings: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAddMachine() {
|
||||
if (!newMachineLabel || !newMachineUrl || !newMachineToken) {
|
||||
notify('error', 'Label, URL, and token are required');
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await addMachine({
|
||||
label: newMachineLabel,
|
||||
url: newMachineUrl,
|
||||
token: newMachineToken,
|
||||
auto_connect: newMachineAutoConnect,
|
||||
});
|
||||
newMachineLabel = '';
|
||||
newMachineUrl = '';
|
||||
newMachineToken = '';
|
||||
newMachineAutoConnect = false;
|
||||
notify('success', 'Machine added');
|
||||
} catch (e) {
|
||||
notify('error', `Failed to add machine: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleRemoveMachine(id: string) {
|
||||
try {
|
||||
await removeMachine(id);
|
||||
notify('success', 'Machine removed');
|
||||
} catch (e) {
|
||||
notify('error', `Failed to remove machine: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleToggleConnection(id: string, status: string) {
|
||||
try {
|
||||
if (status === 'connected') {
|
||||
await disconnectMachine(id);
|
||||
} else {
|
||||
await connectMachine(id);
|
||||
}
|
||||
} catch (e) {
|
||||
notify('error', `Connection error: ${e}`);
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === 'Escape') onClose();
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if open}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="overlay" onkeydown={handleKeydown}>
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
||||
<div class="backdrop" onclick={onClose}></div>
|
||||
<div class="dialog" role="dialog" aria-label="Settings">
|
||||
<div class="dialog-header">
|
||||
<h2>Settings</h2>
|
||||
<button class="close-btn" onclick={onClose}>×</button>
|
||||
</div>
|
||||
<div class="dialog-body">
|
||||
<label class="field">
|
||||
<span class="field-label">Default Shell</span>
|
||||
<input type="text" bind:value={defaultShell} placeholder="$SHELL (auto-detect)" />
|
||||
<span class="field-hint">Leave empty to use system default</span>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="field-label">Default Working Directory</span>
|
||||
<input type="text" bind:value={defaultCwd} placeholder="$HOME" />
|
||||
<span class="field-hint">Leave empty for home directory</span>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="field-label">Max Panes</span>
|
||||
<input type="number" bind:value={maxPanes} min="1" max="8" />
|
||||
<span class="field-hint">Maximum simultaneous panes (1-8)</span>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="field-label">Theme</span>
|
||||
<select bind:value={themeFlavor}>
|
||||
{#each ALL_FLAVORS as flavor}
|
||||
<option value={flavor}>{FLAVOR_LABELS[flavor]}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<span class="field-hint">Catppuccin color scheme. New terminals use the updated theme.</span>
|
||||
</label>
|
||||
|
||||
<div class="section-divider"></div>
|
||||
<h3 class="section-title">Remote Machines</h3>
|
||||
|
||||
{#if remoteMachines.length > 0}
|
||||
<div class="machine-list">
|
||||
{#each remoteMachines as machine (machine.id)}
|
||||
<div class="machine-item">
|
||||
<div class="machine-info">
|
||||
<span class="machine-label">{machine.label}</span>
|
||||
<span class="machine-url">{machine.url}</span>
|
||||
<span class="machine-status" class:connected={machine.status === 'connected'} class:error={machine.status === 'error'}>
|
||||
{machine.status}
|
||||
</span>
|
||||
</div>
|
||||
<div class="machine-actions">
|
||||
<button
|
||||
class="machine-btn"
|
||||
onclick={() => handleToggleConnection(machine.id, machine.status)}
|
||||
>
|
||||
{machine.status === 'connected' ? 'Disconnect' : 'Connect'}
|
||||
</button>
|
||||
<button class="machine-btn machine-btn-danger" onclick={() => handleRemoveMachine(machine.id)}>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="field-hint">No remote machines configured.</p>
|
||||
{/if}
|
||||
|
||||
<div class="add-machine-form">
|
||||
<label class="field">
|
||||
<span class="field-label">Label</span>
|
||||
<input type="text" bind:value={newMachineLabel} placeholder="devbox" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="field-label">URL</span>
|
||||
<input type="text" bind:value={newMachineUrl} placeholder="wss://host:9750" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span class="field-label">Token</span>
|
||||
<input type="password" bind:value={newMachineToken} placeholder="auth token" />
|
||||
</label>
|
||||
<label class="field-checkbox">
|
||||
<input type="checkbox" bind:checked={newMachineAutoConnect} />
|
||||
<span>Auto-connect on startup</span>
|
||||
</label>
|
||||
<button class="btn-save" onclick={handleAddMachine}>Add Machine</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button class="btn-cancel" onclick={onClose}>Cancel</button>
|
||||
<button class="btn-save" onclick={handleSave}>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
position: relative;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
width: 400px;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.dialog-header h2 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-btn:hover { color: var(--text-primary); }
|
||||
|
||||
.dialog-body {
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.field input, .field select {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 12px;
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.field input:focus, .field select:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.field-hint {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.btn-cancel, .btn-save {
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 6px 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-cancel:hover { color: var(--text-primary); }
|
||||
|
||||
.btn-save {
|
||||
background: var(--accent);
|
||||
color: var(--ctp-crust);
|
||||
}
|
||||
|
||||
.btn-save:hover { opacity: 0.9; }
|
||||
|
||||
.section-divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.machine-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.machine-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 6px 8px;
|
||||
}
|
||||
|
||||
.machine-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.machine-label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.machine-url {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.machine-status {
|
||||
font-size: 10px;
|
||||
color: var(--ctp-overlay1);
|
||||
}
|
||||
|
||||
.machine-status.connected {
|
||||
color: var(--ctp-green);
|
||||
}
|
||||
|
||||
.machine-status.error {
|
||||
color: var(--ctp-red);
|
||||
}
|
||||
|
||||
.machine-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.machine-btn {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-secondary);
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.machine-btn:hover {
|
||||
color: var(--text-primary);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.machine-btn-danger:hover {
|
||||
color: var(--ctp-red);
|
||||
border-color: var(--ctp-red);
|
||||
}
|
||||
|
||||
.add-machine-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.field-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.field-checkbox input[type="checkbox"] {
|
||||
accent-color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,374 +0,0 @@
|
|||
<script lang="ts">
|
||||
import {
|
||||
getPanes,
|
||||
addPane,
|
||||
focusPane,
|
||||
removePane,
|
||||
getActivePreset,
|
||||
setPreset,
|
||||
setPaneGroup,
|
||||
type LayoutPreset,
|
||||
type Pane,
|
||||
} from '../../stores/layout.svelte';
|
||||
import { getMachines } from '../../stores/machines.svelte';
|
||||
import SshSessionList from '../SSH/SshSessionList.svelte';
|
||||
|
||||
let panes = $derived(getPanes());
|
||||
let preset = $derived(getActivePreset());
|
||||
let machines = $derived(getMachines());
|
||||
|
||||
// Build machine label lookup
|
||||
let machineLabels = $derived.by(() => {
|
||||
const map = new Map<string, string>();
|
||||
for (const m of machines) {
|
||||
map.set(m.id, `${m.label} (${m.status})`);
|
||||
}
|
||||
return map;
|
||||
});
|
||||
|
||||
let grouped = $derived.by(() => {
|
||||
const groups = new Map<string, Pane[]>();
|
||||
for (const pane of panes) {
|
||||
// Remote panes auto-group by machine label; local panes use explicit group
|
||||
const g = pane.remoteMachineId
|
||||
? machineLabels.get(pane.remoteMachineId) ?? `Remote ${pane.remoteMachineId.slice(0, 8)}`
|
||||
: (pane.group || '');
|
||||
if (!groups.has(g)) groups.set(g, []);
|
||||
groups.get(g)!.push(pane);
|
||||
}
|
||||
return groups;
|
||||
});
|
||||
|
||||
let collapsed = $state<Set<string>>(new Set());
|
||||
|
||||
function toggleGroup(name: string) {
|
||||
if (collapsed.has(name)) {
|
||||
collapsed = new Set([...collapsed].filter(g => g !== name));
|
||||
} else {
|
||||
collapsed = new Set([...collapsed, name]);
|
||||
}
|
||||
}
|
||||
|
||||
function setGroup(paneId: string) {
|
||||
const current = panes.find(p => p.id === paneId)?.group || '';
|
||||
const name = prompt('Group name (empty to ungroup):', current);
|
||||
if (name !== null) {
|
||||
setPaneGroup(paneId, name);
|
||||
}
|
||||
}
|
||||
|
||||
function paneIcon(type: string, title: string): string {
|
||||
if (type === 'agent' && title.startsWith('Sub: ')) return '↳';
|
||||
switch (type) {
|
||||
case 'terminal': return '>';
|
||||
case 'agent': return '*';
|
||||
case 'markdown': return 'M';
|
||||
case 'ssh': return '@';
|
||||
case 'context': return 'C';
|
||||
default: return '#';
|
||||
}
|
||||
}
|
||||
|
||||
const presets: LayoutPreset[] = ['1-col', '2-col', '3-col', '2x2', 'master-stack'];
|
||||
|
||||
function newTerminal() {
|
||||
const id = crypto.randomUUID();
|
||||
const num = panes.filter(p => p.type === 'terminal').length + 1;
|
||||
addPane({
|
||||
id,
|
||||
type: 'terminal',
|
||||
title: `Terminal ${num}`,
|
||||
});
|
||||
}
|
||||
|
||||
function newAgent() {
|
||||
const id = crypto.randomUUID();
|
||||
const num = panes.filter(p => p.type === 'agent').length + 1;
|
||||
addPane({
|
||||
id,
|
||||
type: 'agent',
|
||||
title: `Agent ${num}`,
|
||||
});
|
||||
}
|
||||
|
||||
function openContext() {
|
||||
const existing = panes.find(p => p.type === 'context');
|
||||
if (existing) {
|
||||
focusPane(existing.id);
|
||||
return;
|
||||
}
|
||||
const id = crypto.randomUUID();
|
||||
addPane({
|
||||
id,
|
||||
type: 'context',
|
||||
title: 'Context',
|
||||
});
|
||||
}
|
||||
|
||||
let fileInputEl: HTMLInputElement | undefined = $state();
|
||||
|
||||
function openMarkdown() {
|
||||
fileInputEl?.click();
|
||||
}
|
||||
|
||||
function handleFileSelect(e: Event) {
|
||||
const input = e.target as HTMLInputElement;
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
// Tauri file paths from input elements include the full path
|
||||
const path = (file as any).path ?? file.name;
|
||||
const id = crypto.randomUUID();
|
||||
addPane({
|
||||
id,
|
||||
type: 'markdown',
|
||||
title: file.name,
|
||||
cwd: path,
|
||||
});
|
||||
input.value = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="session-list">
|
||||
<div class="header">
|
||||
<h2>Sessions</h2>
|
||||
<div class="header-buttons">
|
||||
<button class="new-btn" onclick={openContext} title="Context manager">C</button>
|
||||
<button class="new-btn" onclick={openMarkdown} title="Open markdown file">M</button>
|
||||
<button class="new-btn" onclick={newAgent} title="New agent (Ctrl+Shift+N)">A</button>
|
||||
<button class="new-btn" onclick={newTerminal} title="New terminal (Ctrl+N)">+</button>
|
||||
</div>
|
||||
<input
|
||||
bind:this={fileInputEl}
|
||||
type="file"
|
||||
accept=".md,.markdown,.txt"
|
||||
onchange={handleFileSelect}
|
||||
style="display: none;"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="layout-presets">
|
||||
{#each presets as p}
|
||||
<button
|
||||
class="preset-btn"
|
||||
class:active={preset === p}
|
||||
onclick={() => setPreset(p)}
|
||||
title={p}
|
||||
>{p}</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
{#if panes.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>No sessions yet.</p>
|
||||
<p class="hint">Ctrl+N terminal / Ctrl+Shift+N agent</p>
|
||||
</div>
|
||||
{:else}
|
||||
<ul class="pane-list">
|
||||
{#snippet paneItem(pane: Pane)}
|
||||
<li class="pane-item" class:focused={pane.focused}>
|
||||
<button class="pane-btn" onclick={() => focusPane(pane.id)} oncontextmenu={(e) => { e.preventDefault(); setGroup(pane.id); }}>
|
||||
<span class="pane-icon">{paneIcon(pane.type, pane.title)}</span>
|
||||
<span class="pane-name">{pane.title}</span>
|
||||
</button>
|
||||
<button class="remove-btn" onclick={() => removePane(pane.id)}>×</button>
|
||||
</li>
|
||||
{/snippet}
|
||||
|
||||
{#if grouped.has('')}
|
||||
{#each grouped.get('')! as pane (pane.id)}
|
||||
{@render paneItem(pane)}
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#each [...grouped.entries()].filter(([k]) => k !== '') as [groupName, groupPanes] (groupName)}
|
||||
<li class="group-header" onclick={() => toggleGroup(groupName)}>
|
||||
<span class="group-arrow">{collapsed.has(groupName) ? '\u25B6' : '\u25BC'}</span>
|
||||
<span>{groupName}</span>
|
||||
<span class="group-count">{groupPanes.length}</span>
|
||||
</li>
|
||||
{#if !collapsed.has(groupName)}
|
||||
{#each groupPanes as pane (pane.id)}
|
||||
{@render paneItem(pane)}
|
||||
{/each}
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
{/if}
|
||||
|
||||
<div class="divider"></div>
|
||||
<SshSessionList />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border);
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.session-list {
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.header h2 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.header-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.new-btn {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-primary);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.new-btn:hover {
|
||||
background: var(--bg-surface-hover);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.layout-presets {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.preset-btn {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
font-size: 9px;
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.preset-btn:hover { color: var(--text-primary); }
|
||||
.preset-btn.active {
|
||||
background: var(--accent);
|
||||
color: var(--ctp-crust);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
color: var(--text-muted);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
padding: 24px 0;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 4px;
|
||||
font-size: 11px;
|
||||
color: var(--ctp-overlay0);
|
||||
}
|
||||
|
||||
.group-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 6px;
|
||||
font-size: 11px;
|
||||
color: var(--ctp-overlay1);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.group-header:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.group-arrow {
|
||||
font-size: 8px;
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
.group-count {
|
||||
margin-left: auto;
|
||||
font-size: 9px;
|
||||
color: var(--ctp-overlay0);
|
||||
}
|
||||
|
||||
.pane-list {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.pane-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.pane-item.focused {
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.pane-btn {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
font-size: 12px;
|
||||
padding: 4px 6px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pane-btn:hover { color: var(--text-primary); }
|
||||
|
||||
.pane-icon {
|
||||
color: var(--ctp-green);
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.pane-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
padding: 2px 4px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pane-item:hover .remove-btn { opacity: 1; }
|
||||
.remove-btn:hover { color: var(--ctp-red); }
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue