de40bcbcac
Bun segfaults (address 0x10) from prior GTK widget tree modifications (wrapWebViewInScrolledWindow corrupted the tree). Disabled all GTK FFI except begin_move_drag (which works). JS handles capture mouse events, compute delta, and call window.setFrame RPC. Clean build required: rm -rf ui-electrobun/build/ Status: resize outward works, resize inward blocked by WebView min-size. Next: need C shared library for proper GTK signal connection.
1031 lines
31 KiB
Svelte
1031 lines
31 KiB
Svelte
<script lang="ts">
|
|
import { onMount, untrack } from "svelte";
|
|
import ProjectCard from "./ProjectCard.svelte";
|
|
import SettingsDrawer from "./SettingsDrawer.svelte";
|
|
import CommandPalette from "./CommandPalette.svelte";
|
|
import ToastContainer from "./ToastContainer.svelte";
|
|
import NotifDrawer from "./NotifDrawer.svelte";
|
|
import StatusBar from "./StatusBar.svelte";
|
|
import SearchOverlay from "./SearchOverlay.svelte";
|
|
import SplashScreen from "./SplashScreen.svelte";
|
|
import ProjectWizard from "./ProjectWizard.svelte";
|
|
import { themeStore } from "./theme-store.svelte.ts";
|
|
import { fontStore } from "./font-store.svelte.ts";
|
|
import { keybindingStore } from "./keybinding-store.svelte.ts";
|
|
import { setAgentToastFn } from "./agent-store.svelte.ts";
|
|
import { appRpc } from "./rpc.ts";
|
|
import { initI18n } from "./i18n.svelte.ts";
|
|
import {
|
|
getProjects,
|
|
getGroups,
|
|
getActiveGroupId,
|
|
getActiveGroup, getFilteredProjects,
|
|
getTotalCostDerived, getTotalTokensDerived,
|
|
setActiveGroup,
|
|
addProjectFromWizard,
|
|
deleteProject,
|
|
cloneCountForProject,
|
|
handleClone,
|
|
addGroup as wsAddGroup,
|
|
loadGroupsFromDb,
|
|
loadProjectsFromDb,
|
|
trackAllProjects,
|
|
type WizardResult,
|
|
} from "./workspace-store.svelte.ts";
|
|
import {
|
|
getNotifications,
|
|
clearAll as clearNotifications,
|
|
getNotifCount,
|
|
} from "./notifications-store.svelte.ts";
|
|
import {
|
|
getSettingsOpen,
|
|
setSettingsOpen,
|
|
toggleSettings,
|
|
getPaletteOpen,
|
|
setPaletteOpen,
|
|
togglePalette,
|
|
getSearchOpen,
|
|
toggleSearch,
|
|
getNotifDrawerOpen,
|
|
setNotifDrawerOpen,
|
|
toggleNotifDrawer,
|
|
getShowWizard,
|
|
setShowWizard,
|
|
getProjectToDelete,
|
|
setProjectToDelete,
|
|
getShowAddGroup,
|
|
setShowAddGroup,
|
|
toggleAddGroup,
|
|
getNewGroupName,
|
|
setNewGroupName,
|
|
resetAddGroupForm,
|
|
toggleWizard,
|
|
} from "./ui-store.svelte.ts";
|
|
|
|
// ── Local view-only state (not shared across components) ────
|
|
let appReady = $state(false);
|
|
let sessionStart = $state(Date.now());
|
|
|
|
// ── Stable derived values ──
|
|
// NOTE: ALL derived values use plain function calls — NO $derived()
|
|
// to prevent Svelte 5 reactive loops when store getters create new refs.
|
|
function isProjectMounted(groupId: string): boolean {
|
|
return groupId === getActiveGroupId();
|
|
}
|
|
// These are called directly in template — Svelte tracks the inner $state reads
|
|
// but doesn't create intermediate $derived objects that could loop.
|
|
|
|
// Blink is now in blink-store.svelte.ts — no prop passing needed
|
|
|
|
// ── Session duration (plain JS, no reactive system) ──
|
|
let sessionDuration = $state("0m");
|
|
|
|
// ── Window controls ─────────────────────────────────────────
|
|
function handleClose() {
|
|
appRpc.request["window.close"]({}).catch(console.error);
|
|
}
|
|
function handleMaximize() {
|
|
appRpc.request["window.maximize"]({}).catch(console.error);
|
|
}
|
|
function handleMinimize() {
|
|
appRpc.request["window.minimize"]({}).catch(console.error);
|
|
}
|
|
|
|
// ── Window drag — delegates to GTK window manager ───────────
|
|
function onDragStart(e: MouseEvent) {
|
|
const target = e.target as HTMLElement;
|
|
if (target.tagName === 'BUTTON' || target.tagName === 'INPUT' || target.closest('button') || target.closest('.rz')) return;
|
|
// Delegate to GTK — the WM handles everything (smooth, zero CPU)
|
|
appRpc.request['window.beginMove']({
|
|
button: e.button + 1, // DOM: 0=left, GTK: 1=left
|
|
rootX: e.screenX,
|
|
rootY: e.screenY,
|
|
}).catch(() => {});
|
|
e.preventDefault();
|
|
}
|
|
|
|
// ── Window resize — CSS handles capture mouse, X11 FFI resizes ──
|
|
let resizeEdge: string | null = null;
|
|
let resizeStartX = 0;
|
|
let resizeStartY = 0;
|
|
let resizeFrame = { x: 0, y: 0, width: 0, height: 0 };
|
|
const CURSOR_MAP: Record<string, string> = {
|
|
n: 'n-resize', s: 's-resize', e: 'e-resize', w: 'w-resize',
|
|
ne: 'ne-resize', nw: 'nw-resize', se: 'se-resize', sw: 'sw-resize',
|
|
};
|
|
|
|
function onResizeStart(e: MouseEvent, edge: string) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
resizeEdge = edge;
|
|
resizeStartX = e.screenX;
|
|
resizeStartY = e.screenY;
|
|
// Capture frame synchronously
|
|
resizeFrame = {
|
|
x: window.screenX, y: window.screenY,
|
|
width: window.outerWidth, height: window.outerHeight,
|
|
};
|
|
document.body.style.cursor = CURSOR_MAP[edge] || 'default';
|
|
document.body.style.userSelect = 'none';
|
|
}
|
|
|
|
function onResizeMove(e: MouseEvent) {
|
|
if (!resizeEdge) return;
|
|
e.preventDefault();
|
|
const dx = e.screenX - resizeStartX;
|
|
const dy = e.screenY - resizeStartY;
|
|
let { x, y, width, height } = resizeFrame;
|
|
const MIN_W = 400, MIN_H = 300;
|
|
if (resizeEdge.includes('e')) width = Math.max(MIN_W, width + dx);
|
|
if (resizeEdge.includes('w')) { const nw = Math.max(MIN_W, width - dx); x += width - nw; width = nw; }
|
|
if (resizeEdge.includes('s')) height = Math.max(MIN_H, height + dy);
|
|
if (resizeEdge.includes('n')) { const nh = Math.max(MIN_H, height - dy); y += height - nh; height = nh; }
|
|
// Use Electrobun's setPosition + setSize (simpler than X11 FFI)
|
|
appRpc.request['window.setFrame']({
|
|
x: Math.round(x), y: Math.round(y),
|
|
width: Math.round(width), height: Math.round(height),
|
|
}).catch(() => {});
|
|
}
|
|
|
|
function onResizeEnd() {
|
|
if (!resizeEdge) return;
|
|
resizeEdge = null;
|
|
document.body.style.cursor = '';
|
|
document.body.style.userSelect = '';
|
|
saveWindowFrame();
|
|
}
|
|
|
|
// ── Window frame persistence (debounced 500ms) ──────────────
|
|
let frameSaveTimer: ReturnType<typeof setTimeout> | null = null;
|
|
function saveWindowFrame() {
|
|
if (frameSaveTimer) clearTimeout(frameSaveTimer);
|
|
frameSaveTimer = setTimeout(() => {
|
|
appRpc.request["window.getFrame"]({})
|
|
.then((frame) => {
|
|
appRpc.request["settings.set"]({
|
|
key: "win_x",
|
|
value: String(frame.x),
|
|
}).catch(console.error);
|
|
appRpc.request["settings.set"]({
|
|
key: "win_y",
|
|
value: String(frame.y),
|
|
}).catch(console.error);
|
|
appRpc.request["settings.set"]({
|
|
key: "win_width",
|
|
value: String(frame.width),
|
|
}).catch(console.error);
|
|
appRpc.request["settings.set"]({
|
|
key: "win_height",
|
|
value: String(frame.height),
|
|
}).catch(console.error);
|
|
})
|
|
.catch(console.error);
|
|
}, 500);
|
|
}
|
|
|
|
// ── Wizard handler ──────────────────────────────────────────
|
|
function handleWizardCreated(result: WizardResult) {
|
|
addProjectFromWizard(result);
|
|
setShowWizard(false);
|
|
}
|
|
|
|
async function confirmDeleteProject() {
|
|
const toDelete = getProjectToDelete();
|
|
if (!toDelete) return;
|
|
await deleteProject(toDelete);
|
|
setProjectToDelete(null);
|
|
}
|
|
|
|
// ── Group add (local UI + store) ────────────────────────────
|
|
async function handleAddGroup() {
|
|
const name = getNewGroupName().trim();
|
|
if (!name) return;
|
|
await wsAddGroup(name);
|
|
resetAddGroupForm();
|
|
}
|
|
|
|
// ── Notification drawer ─────────────────────────────────────
|
|
function handleClearNotifications() {
|
|
clearNotifications();
|
|
setNotifDrawerOpen(false);
|
|
}
|
|
|
|
// ── Toast ref for agent notifications ───────────────────────
|
|
let toastRef: ToastContainer | undefined;
|
|
|
|
function showToast(
|
|
message: string,
|
|
variant: "success" | "warning" | "error" | "info",
|
|
) {
|
|
toastRef?.addToast(message, variant);
|
|
}
|
|
|
|
// ── Global error boundary ───────────────────────────────────
|
|
function setupErrorBoundary() {
|
|
window.addEventListener(
|
|
"unhandledrejection",
|
|
(e: PromiseRejectionEvent) => {
|
|
const msg =
|
|
e.reason instanceof Error ? e.reason.message : String(e.reason);
|
|
console.error("[unhandled rejection]", e.reason);
|
|
showToast(`Unhandled error: ${msg.slice(0, 100)}`, "error");
|
|
e.preventDefault();
|
|
},
|
|
);
|
|
window.addEventListener("error", (e: ErrorEvent) => {
|
|
console.error("[uncaught error]", e.error);
|
|
showToast(`Error: ${e.message.slice(0, 100)}`, "error");
|
|
});
|
|
}
|
|
|
|
// ── DEBUG overlay ───────────────────────────────────────────
|
|
const DEBUG_ENABLED =
|
|
typeof window !== "undefined" &&
|
|
new URLSearchParams(window.location.search).has("debug");
|
|
let debugLog = $state<string[]>([]);
|
|
|
|
// Debug overlay listeners are set up in onMount, not $effect
|
|
|
|
// ── i18n: lang/dir sync is handled inside setLocale() — no $effect needed ──
|
|
|
|
// ── Init ────────────────────────────────────────────────────
|
|
onMount(() => {
|
|
setAgentToastFn(showToast);
|
|
setupErrorBoundary();
|
|
|
|
// JS resize needs document-level listeners
|
|
document.addEventListener('mousemove', onResizeMove);
|
|
document.addEventListener('mouseup', onResizeEnd);
|
|
|
|
// Blink + session timers — MUST be in onMount, NOT $effect
|
|
// $effect interacts with reactive graph and causes cycles
|
|
// Blink timer is in blink-store — start it here
|
|
import('./blink-store.svelte.ts').then(m => m.startBlink());
|
|
const sessionId = setInterval(() => {
|
|
const mins = Math.floor((Date.now() - sessionStart) / 60000);
|
|
sessionDuration = mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`;
|
|
}, 10000);
|
|
|
|
const initTasks = [
|
|
initI18n().catch(console.error),
|
|
themeStore.initTheme(appRpc).catch(console.error),
|
|
fontStore.initFonts(appRpc).catch(console.error),
|
|
keybindingStore.init(appRpc).catch(console.error),
|
|
loadGroupsFromDb().catch(console.error),
|
|
loadProjectsFromDb().catch(console.error),
|
|
];
|
|
|
|
const timeout = new Promise((r) => setTimeout(r, 10000));
|
|
Promise.race([Promise.allSettled(initTasks), timeout]).then(() => {
|
|
appReady = true;
|
|
trackAllProjects();
|
|
});
|
|
|
|
keybindingStore.on("palette", () => {
|
|
togglePalette();
|
|
});
|
|
keybindingStore.on("settings", () => {
|
|
toggleSettings();
|
|
});
|
|
keybindingStore.on("group1", () => setActiveGroup(getGroups()[0]?.id));
|
|
keybindingStore.on("group2", () => setActiveGroup(getGroups()[1]?.id));
|
|
keybindingStore.on("group3", () => setActiveGroup(getGroups()[2]?.id));
|
|
keybindingStore.on("group4", () => setActiveGroup(getGroups()[3]?.id));
|
|
keybindingStore.on("minimize", () => handleMinimize());
|
|
|
|
function handleSearchShortcut(e: KeyboardEvent) {
|
|
if (e.ctrlKey && e.shiftKey && e.key === "F") {
|
|
e.preventDefault();
|
|
toggleSearch();
|
|
}
|
|
}
|
|
document.addEventListener("keydown", handleSearchShortcut);
|
|
|
|
function handlePaletteCommand(e: Event) {
|
|
const detail = (e as CustomEvent).detail;
|
|
switch (detail) {
|
|
case "settings":
|
|
toggleSettings();
|
|
break;
|
|
case "search":
|
|
toggleSearch();
|
|
break;
|
|
case "new-project":
|
|
setShowWizard(true);
|
|
break;
|
|
case "toggle-sidebar":
|
|
toggleSettings();
|
|
break;
|
|
default:
|
|
console.log(`[palette] unhandled command: ${detail}`);
|
|
}
|
|
}
|
|
window.addEventListener("palette-command", handlePaletteCommand);
|
|
|
|
// Debug overlay (plain listeners, no $effect)
|
|
let debugCleanup = () => {};
|
|
if (DEBUG_ENABLED) {
|
|
function debugClick(e: MouseEvent) {
|
|
const el = e.target as HTMLElement;
|
|
const tag = el?.tagName;
|
|
const cls = (el?.className?.toString?.() ?? '').slice(0, 40);
|
|
debugLog = [...debugLog.slice(-8), `CLICK ${tag}.${cls} @(${e.clientX},${e.clientY})`];
|
|
}
|
|
function debugDown(e: MouseEvent) {
|
|
const el = e.target as HTMLElement;
|
|
debugLog = [...debugLog.slice(-8), `DOWN ${el?.tagName}.${(el?.className?.toString?.() ?? '').slice(0, 40)}`];
|
|
}
|
|
document.addEventListener('click', debugClick, true);
|
|
document.addEventListener('mousedown', debugDown, true);
|
|
debugCleanup = () => {
|
|
document.removeEventListener('click', debugClick, true);
|
|
document.removeEventListener('mousedown', debugDown, true);
|
|
};
|
|
}
|
|
|
|
const cleanup = keybindingStore.installListener();
|
|
return () => {
|
|
cleanup();
|
|
debugCleanup();
|
|
import('./blink-store.svelte.ts').then(m => m.stopBlink());
|
|
clearInterval(sessionId);
|
|
document.removeEventListener("keydown", handleSearchShortcut);
|
|
window.removeEventListener("palette-command", handlePaletteCommand);
|
|
document.removeEventListener('mousemove', onResizeMove);
|
|
document.removeEventListener('mouseup', onResizeEnd);
|
|
};
|
|
});
|
|
</script>
|
|
|
|
<SplashScreen ready={appReady} />
|
|
<SettingsDrawer
|
|
open={getSettingsOpen()}
|
|
onClose={() => setSettingsOpen(false)}
|
|
/>
|
|
<CommandPalette open={getPaletteOpen()} onClose={() => setPaletteOpen(false)} />
|
|
<SearchOverlay open={getSearchOpen()} onClose={() => setSearchOpen(false)} />
|
|
<ToastContainer bind:this={toastRef} />
|
|
<NotifDrawer
|
|
open={getNotifDrawerOpen()}
|
|
notifications={getNotifications()}
|
|
onClear={handleClearNotifications}
|
|
onClose={() => setNotifDrawerOpen(false)}
|
|
/>
|
|
|
|
<!-- Resize handles — capture mouse + X11 FFI resize -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="rz rz-n" onmousedown={(e) => onResizeStart(e, 'n')}></div>
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="rz rz-s" onmousedown={(e) => onResizeStart(e, 's')}></div>
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="rz rz-e" onmousedown={(e) => onResizeStart(e, 'e')}></div>
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="rz rz-w" onmousedown={(e) => onResizeStart(e, 'w')}></div>
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="rz rz-ne" onmousedown={(e) => onResizeStart(e, 'ne')}></div>
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="rz rz-nw" onmousedown={(e) => onResizeStart(e, 'nw')}></div>
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="rz rz-se" onmousedown={(e) => onResizeStart(e, 'se')}></div>
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="rz rz-sw" onmousedown={(e) => onResizeStart(e, 'sw')}></div>
|
|
|
|
<div class="app-shell" role="presentation">
|
|
<!-- Left sidebar icon rail — draggable for window move -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<aside class="sidebar" role="navigation" aria-label="Primary navigation" onmousedown={onDragStart}>
|
|
<!-- AGOR vertical title -->
|
|
<div class="agor-title" aria-hidden="true">AGOR</div>
|
|
|
|
<!-- Group icons — numbered circles -->
|
|
<div class="sidebar-groups" role="list" aria-label="Project groups">
|
|
{#each getGroups() as group, i}
|
|
<button
|
|
class="group-btn"
|
|
class:active={getActiveGroupId() === group.id}
|
|
onclick={() => setActiveGroup(group.id)}
|
|
aria-label="{group.name} (Ctrl+{i + 1})"
|
|
title="{group.name} (Ctrl+{i + 1})"
|
|
>
|
|
<span class="group-circle" aria-hidden="true">{i + 1}</span>
|
|
{#if group.hasNew}
|
|
<span class="group-badge" aria-label="New activity"></span>
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
|
|
<!-- Add group button -->
|
|
<button
|
|
class="group-btn add-group-btn"
|
|
onclick={() => toggleAddGroup()}
|
|
aria-label="Add group"
|
|
title="Add group"
|
|
>
|
|
<span class="group-circle" aria-hidden="true">+</span>
|
|
</button>
|
|
</div>
|
|
|
|
{#if getShowAddGroup()}
|
|
<div class="add-group-form">
|
|
<input
|
|
class="add-group-input"
|
|
type="text"
|
|
placeholder="Group name"
|
|
value={getNewGroupName()}
|
|
oninput={(e) => setNewGroupName((e.target as HTMLInputElement).value)}
|
|
onkeydown={(e) => {
|
|
if (e.key === "Enter") handleAddGroup();
|
|
if (e.key === "Escape") setShowAddGroup(false);
|
|
}}
|
|
autofocus
|
|
/>
|
|
</div>
|
|
{/if}
|
|
|
|
<!-- Add project button -->
|
|
<button
|
|
class="sidebar-icon"
|
|
onclick={() => toggleWizard()}
|
|
aria-label="Add project"
|
|
title="Add project"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<line x1="12" y1="5" x2="12" y2="19" /><line
|
|
x1="5"
|
|
y1="12"
|
|
x2="19"
|
|
y2="12"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="sidebar-spacer"></div>
|
|
|
|
<!-- Settings gear -->
|
|
<button
|
|
class="sidebar-icon"
|
|
class:active={getSettingsOpen()}
|
|
onclick={() => toggleSettings()}
|
|
aria-label="Settings (Ctrl+,)"
|
|
title="Settings (Ctrl+,)"
|
|
data-testid="settings-btn"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<circle cx="12" cy="12" r="3" />
|
|
<path
|
|
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</aside>
|
|
|
|
<!-- Main workspace -->
|
|
<main class="workspace">
|
|
<!-- Project grid -->
|
|
<div
|
|
class="project-grid"
|
|
role="list"
|
|
aria-label="{getActiveGroup()?.name ?? 'Projects'} projects"
|
|
>
|
|
{#each getProjects() as project (project.id)}
|
|
{#if isProjectMounted(project.groupId ?? "dev")}
|
|
<div
|
|
role="listitem"
|
|
style:display={(project.groupId ?? "dev") === getActiveGroupId()
|
|
? "flex"
|
|
: "none"}
|
|
>
|
|
<ProjectCard
|
|
id={project.id}
|
|
name={project.name}
|
|
cwd={project.cwd}
|
|
accent={project.accent}
|
|
provider={project.provider}
|
|
profile={project.profile}
|
|
model={project.model}
|
|
contextPct={project.contextPct}
|
|
burnRate={project.burnRate}
|
|
clonesAtMax={cloneCountForProject(project.id) >= 3}
|
|
onClone={handleClone}
|
|
worktreeBranch={project.worktreeBranch}
|
|
cloneOf={project.cloneOf}
|
|
/>
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
|
|
<!-- Empty group -->
|
|
<div
|
|
class="empty-group"
|
|
role="listitem"
|
|
style:display={getFilteredProjects().length === 0 ? "flex" : "none"}
|
|
>
|
|
<p class="empty-group-text">
|
|
No projects in {getActiveGroup()?.name ?? "this group"}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Project wizard overlay (display toggle) -->
|
|
<div style:display={getShowWizard() ? "contents" : "none"}>
|
|
<ProjectWizard
|
|
onClose={() => setShowWizard(false)}
|
|
onCreated={handleWizardCreated}
|
|
groupId={getActiveGroupId()}
|
|
groups={getGroups().map(g => ({ id: g.id, name: g.name }))}
|
|
existingNames={getProjects().map(p => p.name)}
|
|
/>
|
|
</div>
|
|
|
|
<!-- Delete project confirmation -->
|
|
{#if getProjectToDelete()}
|
|
<div class="delete-overlay" role="listitem">
|
|
<p class="delete-text">
|
|
Delete project "{getProjects().find(
|
|
(p) => p.id === getProjectToDelete(),
|
|
)?.name}"?
|
|
</p>
|
|
<div class="add-card-actions">
|
|
<button class="add-cancel" onclick={() => setProjectToDelete(null)}
|
|
>Cancel</button
|
|
>
|
|
<button class="delete-confirm" onclick={confirmDeleteProject}
|
|
>Delete</button
|
|
>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Right sidebar: window controls + notification bell -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<aside class="right-bar" aria-label="Window controls and notifications" onmousedown={onDragStart}>
|
|
<div
|
|
class="window-controls-vertical"
|
|
role="toolbar"
|
|
aria-label="Window controls"
|
|
>
|
|
<button
|
|
class="wc-btn close-btn"
|
|
onclick={handleClose}
|
|
aria-label="Close window"
|
|
title="Close">✕</button
|
|
>
|
|
<button
|
|
class="wc-btn"
|
|
onclick={handleMaximize}
|
|
aria-label="Maximize window"
|
|
title="Maximize">□</button
|
|
>
|
|
<button
|
|
class="wc-btn"
|
|
onclick={handleMinimize}
|
|
aria-label="Minimize window"
|
|
title="Minimize">─</button
|
|
>
|
|
</div>
|
|
|
|
<div class="right-spacer"></div>
|
|
|
|
<button
|
|
class="right-icon notif-btn"
|
|
class:active={getNotifDrawerOpen()}
|
|
onclick={() => toggleNotifDrawer()}
|
|
aria-label={getNotifCount() > 0
|
|
? `${getNotifCount()} notifications`
|
|
: "Notifications"}
|
|
title="Notifications"
|
|
>
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" /><path
|
|
d="M13.73 21a2 2 0 0 1-3.46 0"
|
|
/>
|
|
</svg>
|
|
{#if getNotifCount() > 0}
|
|
<span class="right-badge" aria-hidden="true">{getNotifCount()}</span>
|
|
{/if}
|
|
</button>
|
|
</aside>
|
|
</div>
|
|
|
|
<!-- Status bar (health-backed) -->
|
|
<StatusBar
|
|
projectCount={getFilteredProjects().length}
|
|
totalTokens={getTotalTokensDerived()}
|
|
totalCost={getTotalCostDerived()}
|
|
{sessionDuration}
|
|
groupName={getActiveGroup()?.name ?? ""}
|
|
/>
|
|
|
|
{#if DEBUG_ENABLED && debugLog.length > 0}
|
|
<div
|
|
style="position:fixed;bottom:0;left:0;right:0;background:#000;color:#0f0;font-family:monospace;font-size:10px;padding:4px 8px;z-index:9999;max-height:100px;overflow-y:auto;pointer-events:none;"
|
|
>
|
|
{#each debugLog as line}
|
|
<div>{line}</div>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
:global(body) {
|
|
overflow: hidden;
|
|
}
|
|
:global(#app) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
/* ── Resize handles — 6px edges, 12px corners, fixed on viewport ── */
|
|
.rz { position: fixed; z-index: 9999; }
|
|
.rz-n { top: 0; left: 12px; right: 12px; height: 6px; cursor: n-resize; }
|
|
.rz-s { bottom: 0; left: 12px; right: 12px; height: 6px; cursor: s-resize; }
|
|
.rz-e { right: 0; top: 12px; bottom: 12px; width: 6px; cursor: e-resize; }
|
|
.rz-w { left: 0; top: 12px; bottom: 12px; width: 6px; cursor: w-resize; }
|
|
.rz-ne { top: 0; right: 0; width: 12px; height: 12px; cursor: ne-resize; }
|
|
.rz-nw { top: 0; left: 0; width: 12px; height: 12px; cursor: nw-resize; }
|
|
.rz-se { bottom: 0; right: 0; width: 12px; height: 12px; cursor: se-resize; }
|
|
.rz-sw { bottom: 0; left: 0; width: 12px; height: 12px; cursor: sw-resize; }
|
|
|
|
.app-shell {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Left sidebar ─────────────────────────────────────────── */
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
flex-shrink: 0;
|
|
background: var(--ctp-mantle);
|
|
border-right: 1px solid var(--ctp-surface0);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.375rem 0 0.5rem;
|
|
gap: 0.125rem;
|
|
cursor: grab;
|
|
}
|
|
.sidebar:active { cursor: grabbing; }
|
|
|
|
.agor-title {
|
|
writing-mode: vertical-rl;
|
|
transform: rotate(180deg);
|
|
font-family: "Inter", system-ui, sans-serif;
|
|
font-weight: 900;
|
|
font-size: 1.25rem;
|
|
letter-spacing: 0.2em;
|
|
color: var(--ctp-overlay0);
|
|
padding: 1rem 0;
|
|
user-select: none;
|
|
flex-shrink: 0;
|
|
cursor: grab;
|
|
}
|
|
|
|
.sidebar-groups {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
width: 100%;
|
|
padding: 0.25rem 0;
|
|
border-bottom: 1px solid var(--ctp-surface0);
|
|
margin-bottom: 0.125rem;
|
|
}
|
|
|
|
.sidebar-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.group-btn {
|
|
position: relative;
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.group-circle {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
border-radius: 50%;
|
|
border: 1.5px solid var(--ctp-surface1);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--ctp-subtext0);
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.group-btn:hover .group-circle {
|
|
border-color: var(--ctp-overlay1);
|
|
color: var(--ctp-text);
|
|
background: var(--ctp-surface0);
|
|
}
|
|
|
|
.group-btn.active .group-circle {
|
|
border-color: var(--accent, var(--ctp-mauve));
|
|
color: var(--accent, var(--ctp-mauve));
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--accent, var(--ctp-mauve)) 10%,
|
|
transparent
|
|
);
|
|
}
|
|
|
|
.group-badge {
|
|
position: absolute;
|
|
top: 0.125rem;
|
|
right: 0.125rem;
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
border-radius: 50%;
|
|
background: var(--ctp-red);
|
|
}
|
|
|
|
.sidebar-icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 0.375rem;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--ctp-overlay1);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
background 0.15s,
|
|
color 0.15s;
|
|
padding: 0;
|
|
}
|
|
|
|
.sidebar-icon:hover {
|
|
background: var(--ctp-surface0);
|
|
color: var(--ctp-text);
|
|
}
|
|
.sidebar-icon.active {
|
|
background: var(--ctp-surface1);
|
|
color: var(--ctp-text);
|
|
}
|
|
.sidebar-icon svg {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
|
|
/* ── Main workspace ───────────────────────────────────────── */
|
|
.workspace {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-grid {
|
|
flex: 1;
|
|
min-height: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-auto-rows: 1fr;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: var(--ctp-crust);
|
|
overflow-y: auto;
|
|
align-content: start;
|
|
}
|
|
|
|
.project-grid::-webkit-scrollbar {
|
|
width: 0.375rem;
|
|
}
|
|
.project-grid::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.project-grid::-webkit-scrollbar-thumb {
|
|
background: var(--ctp-surface1);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.empty-group {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 3rem 0;
|
|
color: var(--ctp-overlay0);
|
|
}
|
|
|
|
.empty-group-text {
|
|
font-size: 0.875rem;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* ── Right sidebar ────────────────────────────────────────── */
|
|
.right-bar {
|
|
width: 2.25rem;
|
|
flex-shrink: 0;
|
|
background: var(--ctp-mantle);
|
|
border-left: 1px solid var(--ctp-surface0);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 0.375rem 0;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.window-controls-vertical {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.125rem;
|
|
}
|
|
|
|
.wc-btn {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: 50%;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--ctp-overlay1);
|
|
font-size: 0.625rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition:
|
|
background 0.12s,
|
|
color 0.12s;
|
|
padding: 0;
|
|
font-family: var(--ui-font-family);
|
|
}
|
|
|
|
.wc-btn:hover {
|
|
background: var(--ctp-surface0);
|
|
color: var(--ctp-text);
|
|
}
|
|
.close-btn:hover {
|
|
background: var(--ctp-red);
|
|
color: var(--ctp-base);
|
|
}
|
|
|
|
.right-spacer {
|
|
flex: 1;
|
|
}
|
|
|
|
.right-icon {
|
|
width: 1.75rem;
|
|
height: 1.75rem;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--ctp-overlay1);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 0.375rem;
|
|
position: relative;
|
|
transition:
|
|
color 0.12s,
|
|
background 0.12s;
|
|
padding: 0;
|
|
}
|
|
|
|
.right-icon:hover {
|
|
background: var(--ctp-surface0);
|
|
color: var(--ctp-text);
|
|
}
|
|
.right-icon.active {
|
|
background: var(--ctp-surface1);
|
|
color: var(--ctp-text);
|
|
}
|
|
.right-icon svg {
|
|
width: 0.875rem;
|
|
height: 0.875rem;
|
|
}
|
|
|
|
.right-badge {
|
|
position: absolute;
|
|
top: 0.125rem;
|
|
right: 0.125rem;
|
|
min-width: 0.875rem;
|
|
height: 0.875rem;
|
|
background: var(--ctp-red);
|
|
color: var(--ctp-base);
|
|
border-radius: 0.4375rem;
|
|
font-size: 0.5rem;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 0.125rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* ── Add group form ─────────────────────────────────────────── */
|
|
.add-group-form {
|
|
padding: 0.25rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.add-group-input {
|
|
width: 100%;
|
|
padding: 0.25rem;
|
|
background: var(--ctp-surface0);
|
|
border: 1px solid var(--ctp-surface1);
|
|
border-radius: 0.25rem;
|
|
color: var(--ctp-text);
|
|
font-size: 0.625rem;
|
|
font-family: var(--ui-font-family);
|
|
text-align: center;
|
|
}
|
|
.add-group-input:focus {
|
|
outline: none;
|
|
border-color: var(--ctp-blue);
|
|
}
|
|
|
|
/* ── Delete project overlay ──────────────────────────────────── */
|
|
.add-card-actions {
|
|
display: flex;
|
|
gap: 0.375rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.add-cancel,
|
|
.delete-confirm {
|
|
padding: 0.25rem 0.625rem;
|
|
border-radius: 0.25rem;
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
font-family: var(--ui-font-family);
|
|
}
|
|
|
|
.add-cancel {
|
|
background: transparent;
|
|
border: 1px solid var(--ctp-surface1);
|
|
color: var(--ctp-subtext0);
|
|
}
|
|
.add-cancel:hover {
|
|
background: var(--ctp-surface0);
|
|
color: var(--ctp-text);
|
|
}
|
|
|
|
.delete-overlay {
|
|
grid-column: 1 / -1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 1rem;
|
|
background: var(--ctp-base);
|
|
border: 1px solid var(--ctp-red);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.delete-text {
|
|
font-size: 0.875rem;
|
|
color: var(--ctp-text);
|
|
margin: 0;
|
|
}
|
|
.delete-confirm {
|
|
background: color-mix(in srgb, var(--ctp-red) 20%, transparent);
|
|
border: 1px solid var(--ctp-red);
|
|
color: var(--ctp-red);
|
|
}
|
|
.delete-confirm:hover {
|
|
background: color-mix(in srgb, var(--ctp-red) 35%, transparent);
|
|
}
|
|
</style>
|