fix(electrobun): replace object-creating store calls in template with $derived locals
getMountedGroupIds()/getFilteredProjects()/getActiveGroup()/getTotalCost/Tokens all created new objects per render → Svelte 5 saw 'changed' → re-render → new objects → infinite effect_update_depth_exceeded loop. Fix: compute once in $derived variables, reference stable locals in template.
This commit is contained in:
Hibryda
parent
de59f0e4d0
commit
085b88107f
1 changed files with 414 additions and 168 deletions
|
|
@ -1,62 +1,101 @@
|
|||
<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, getDir, getLocale } from './i18n.svelte.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, getDir, getLocale } from "./i18n.svelte.ts";
|
||||
import {
|
||||
getProjects, getGroups, getActiveGroupId,
|
||||
getMountedGroupIds, getActiveGroup, getFilteredProjects,
|
||||
getProjects,
|
||||
getGroups,
|
||||
getActiveGroupId,
|
||||
getActiveGroup, getFilteredProjects,
|
||||
getTotalCostDerived, getTotalTokensDerived,
|
||||
setActiveGroup, addProjectFromWizard, deleteProject,
|
||||
cloneCountForProject, handleClone, addGroup as wsAddGroup,
|
||||
loadGroupsFromDb, loadProjectsFromDb, trackAllProjects,
|
||||
setActiveGroup,
|
||||
addProjectFromWizard,
|
||||
deleteProject,
|
||||
cloneCountForProject,
|
||||
handleClone,
|
||||
addGroup as wsAddGroup,
|
||||
loadGroupsFromDb,
|
||||
loadProjectsFromDb,
|
||||
trackAllProjects,
|
||||
type WizardResult,
|
||||
} from './workspace-store.svelte.ts';
|
||||
} from "./workspace-store.svelte.ts";
|
||||
import {
|
||||
getNotifications, clearAll as clearNotifications, getNotifCount,
|
||||
} from './notifications-store.svelte.ts';
|
||||
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,
|
||||
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';
|
||||
} 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 (avoid creating new objects in template → prevents infinite loops) ──
|
||||
function isProjectMounted(groupId: string): boolean {
|
||||
return groupId === getActiveGroupId();
|
||||
}
|
||||
let filteredProjects = $derived(getFilteredProjects());
|
||||
let activeGroup = $derived(getActiveGroup());
|
||||
let totalTokens = $derived(getTotalTokensDerived());
|
||||
let totalCost = $derived(getTotalCostDerived());
|
||||
|
||||
// ── Blink timer (untracked — must not create reactive dependency) ────
|
||||
let blinkVisible = $state(true);
|
||||
let _blinkId: ReturnType<typeof setInterval>;
|
||||
$effect(() => {
|
||||
_blinkId = setInterval(() => { untrack(() => { blinkVisible = !blinkVisible; }); }, 500);
|
||||
_blinkId = setInterval(() => {
|
||||
untrack(() => {
|
||||
blinkVisible = !blinkVisible;
|
||||
});
|
||||
}, 500);
|
||||
return () => clearInterval(_blinkId);
|
||||
});
|
||||
|
||||
// ── Session duration (untracked) ──────────────────────────────
|
||||
let sessionDuration = $state('0m');
|
||||
let sessionDuration = $state("0m");
|
||||
$effect(() => {
|
||||
function update() {
|
||||
const mins = Math.floor((Date.now() - sessionStart) / 60000);
|
||||
untrack(() => { sessionDuration = mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`; });
|
||||
untrack(() => {
|
||||
sessionDuration =
|
||||
mins < 60 ? `${mins}m` : `${Math.floor(mins / 60)}h ${mins % 60}m`;
|
||||
});
|
||||
}
|
||||
update();
|
||||
const id = setInterval(update, 10000);
|
||||
|
|
@ -64,21 +103,41 @@
|
|||
});
|
||||
|
||||
// ── 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); }
|
||||
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 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);
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
@ -112,26 +171,35 @@
|
|||
// ── Toast ref for agent notifications ───────────────────────
|
||||
let toastRef: ToastContainer | undefined;
|
||||
|
||||
function showToast(message: string, variant: 'success' | 'warning' | 'error' | 'info') {
|
||||
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');
|
||||
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');
|
||||
},
|
||||
);
|
||||
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');
|
||||
const DEBUG_ENABLED =
|
||||
typeof window !== "undefined" &&
|
||||
new URLSearchParams(window.location.search).has("debug");
|
||||
let debugLog = $state<string[]>([]);
|
||||
|
||||
$effect(() => {
|
||||
|
|
@ -139,25 +207,30 @@
|
|||
function debugClick(e: MouseEvent) {
|
||||
const el = e.target as HTMLElement;
|
||||
const tag = el?.tagName;
|
||||
const cls = (el?.className?.toString?.() ?? '').slice(0, 40);
|
||||
const cls = (el?.className?.toString?.() ?? "").slice(0, 40);
|
||||
const elAtPoint = document.elementFromPoint(e.clientX, e.clientY);
|
||||
let line = `CLICK ${tag}.${cls} @(${e.clientX},${e.clientY})`;
|
||||
if (elAtPoint && elAtPoint !== el) {
|
||||
const overTag = (elAtPoint as HTMLElement).tagName;
|
||||
const overCls = ((elAtPoint as HTMLElement).className?.toString?.() ?? '').slice(0, 40);
|
||||
const overCls = (
|
||||
(elAtPoint as HTMLElement).className?.toString?.() ?? ""
|
||||
).slice(0, 40);
|
||||
line += ` OVERLAY: ${overTag}.${overCls}`;
|
||||
}
|
||||
debugLog = [...debugLog.slice(-8), line];
|
||||
}
|
||||
function debugDown(e: MouseEvent) {
|
||||
const el = e.target as HTMLElement;
|
||||
debugLog = [...debugLog.slice(-8), `DOWN ${el?.tagName}.${(el?.className?.toString?.() ?? '').slice(0, 40)}`];
|
||||
debugLog = [
|
||||
...debugLog.slice(-8),
|
||||
`DOWN ${el?.tagName}.${(el?.className?.toString?.() ?? "").slice(0, 40)}`,
|
||||
];
|
||||
}
|
||||
document.addEventListener('click', debugClick, true);
|
||||
document.addEventListener('mousedown', debugDown, true);
|
||||
document.addEventListener("click", debugClick, true);
|
||||
document.addEventListener("mousedown", debugDown, true);
|
||||
return () => {
|
||||
document.removeEventListener('click', debugClick, true);
|
||||
document.removeEventListener('mousedown', debugDown, true);
|
||||
document.removeEventListener("click", debugClick, true);
|
||||
document.removeEventListener("mousedown", debugDown, true);
|
||||
};
|
||||
});
|
||||
|
||||
|
|
@ -177,51 +250,67 @@
|
|||
loadProjectsFromDb().catch(console.error),
|
||||
];
|
||||
|
||||
const timeout = new Promise(r => setTimeout(r, 10000));
|
||||
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());
|
||||
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') {
|
||||
if (e.ctrlKey && e.shiftKey && e.key === "F") {
|
||||
e.preventDefault();
|
||||
toggleSearch();
|
||||
}
|
||||
}
|
||||
document.addEventListener('keydown', handleSearchShortcut);
|
||||
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}`);
|
||||
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);
|
||||
window.addEventListener("palette-command", handlePaletteCommand);
|
||||
|
||||
const cleanup = keybindingStore.installListener();
|
||||
return () => {
|
||||
cleanup();
|
||||
document.removeEventListener('keydown', handleSearchShortcut);
|
||||
window.removeEventListener('palette-command', handlePaletteCommand);
|
||||
document.removeEventListener("keydown", handleSearchShortcut);
|
||||
window.removeEventListener("palette-command", handlePaletteCommand);
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<SplashScreen ready={appReady} />
|
||||
<SettingsDrawer open={getSettingsOpen()} onClose={() => setSettingsOpen(false)} />
|
||||
<SettingsDrawer
|
||||
open={getSettingsOpen()}
|
||||
onClose={() => setSettingsOpen(false)}
|
||||
/>
|
||||
<CommandPalette open={getPaletteOpen()} onClose={() => setPaletteOpen(false)} />
|
||||
<SearchOverlay open={getSearchOpen()} onClose={() => setSearchOpen(false)} />
|
||||
<ToastContainer bind:this={toastRef} />
|
||||
|
|
@ -232,10 +321,7 @@
|
|||
onClose={() => setNotifDrawerOpen(false)}
|
||||
/>
|
||||
|
||||
<div
|
||||
class="app-shell"
|
||||
role="presentation"
|
||||
>
|
||||
<div class="app-shell" role="presentation">
|
||||
<!-- Left sidebar icon rail -->
|
||||
<aside class="sidebar" role="navigation" aria-label="Primary navigation">
|
||||
<!-- AGOR vertical title -->
|
||||
|
|
@ -278,7 +364,10 @@
|
|||
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); }}
|
||||
onkeydown={(e) => {
|
||||
if (e.key === "Enter") handleAddGroup();
|
||||
if (e.key === "Escape") setShowAddGroup(false);
|
||||
}}
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -291,8 +380,21 @@
|
|||
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
|
||||
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>
|
||||
|
||||
|
|
@ -307,9 +409,19 @@
|
|||
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
|
||||
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>
|
||||
|
|
@ -317,10 +429,19 @@
|
|||
<!-- Main workspace -->
|
||||
<main class="workspace">
|
||||
<!-- Project grid -->
|
||||
<div class="project-grid" role="list" aria-label="{getActiveGroup()?.name ?? 'Projects'} projects">
|
||||
<div
|
||||
class="project-grid"
|
||||
role="list"
|
||||
aria-label="{activeGroup?.name ?? 'Projects'} projects"
|
||||
>
|
||||
{#each getProjects() as project (project.id)}
|
||||
{#if getMountedGroupIds().has(project.groupId ?? 'dev')}
|
||||
<div role="listitem" style:display={(project.groupId ?? 'dev') === getActiveGroupId() ? 'flex' : 'none'}>
|
||||
{#if isProjectMounted(project.groupId ?? "dev")}
|
||||
<div
|
||||
role="listitem"
|
||||
style:display={(project.groupId ?? "dev") === getActiveGroupId()
|
||||
? "flex"
|
||||
: "none"}
|
||||
>
|
||||
<ProjectCard
|
||||
id={project.id}
|
||||
name={project.name}
|
||||
|
|
@ -342,29 +463,42 @@
|
|||
{/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
|
||||
class="empty-group"
|
||||
role="listitem"
|
||||
style:display={filteredProjects.length === 0 ? "flex" : "none"}
|
||||
>
|
||||
<p class="empty-group-text">
|
||||
No projects in {activeGroup?.name ?? "this group"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Project wizard overlay (display toggle) -->
|
||||
<div style:display={getShowWizard() ? 'contents' : 'none'}>
|
||||
<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)}
|
||||
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>
|
||||
<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>
|
||||
<button class="add-cancel" onclick={() => setProjectToDelete(null)}
|
||||
>Cancel</button
|
||||
>
|
||||
<button class="delete-confirm" onclick={confirmDeleteProject}
|
||||
>Delete</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -373,10 +507,29 @@
|
|||
|
||||
<!-- Right sidebar: window controls + notification bell -->
|
||||
<aside class="right-bar" aria-label="Window controls and notifications">
|
||||
<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
|
||||
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>
|
||||
|
|
@ -385,11 +538,23 @@
|
|||
class="right-icon notif-btn"
|
||||
class:active={getNotifDrawerOpen()}
|
||||
onclick={() => toggleNotifDrawer()}
|
||||
aria-label="{getNotifCount() > 0 ? `${getNotifCount()} notifications` : 'Notifications'}"
|
||||
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
|
||||
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>
|
||||
|
|
@ -400,24 +565,32 @@
|
|||
|
||||
<!-- Status bar (health-backed) -->
|
||||
<StatusBar
|
||||
projectCount={getFilteredProjects().length}
|
||||
totalTokens={getTotalTokensDerived()}
|
||||
totalCost={getTotalCostDerived()}
|
||||
projectCount={filteredProjects.length}
|
||||
{totalTokens}
|
||||
{totalCost}
|
||||
{sessionDuration}
|
||||
groupName={getActiveGroup()?.name ?? ''}
|
||||
groupName={activeGroup?.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;">
|
||||
<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>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
:global(body) { overflow: hidden; }
|
||||
:global(#app) { display: flex; flex-direction: column; height: 100vh; }
|
||||
:global(body) {
|
||||
overflow: hidden;
|
||||
}
|
||||
:global(#app) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
flex: 1;
|
||||
|
|
@ -442,7 +615,7 @@
|
|||
.agor-title {
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(180deg);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.2em;
|
||||
|
|
@ -464,7 +637,9 @@
|
|||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.sidebar-spacer { flex: 1; }
|
||||
.sidebar-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.group-btn {
|
||||
position: relative;
|
||||
|
|
@ -502,7 +677,11 @@
|
|||
.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);
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--accent, var(--ctp-mauve)) 10%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.group-badge {
|
||||
|
|
@ -526,13 +705,24 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
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; }
|
||||
.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 {
|
||||
|
|
@ -556,9 +746,16 @@
|
|||
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; }
|
||||
.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;
|
||||
|
|
@ -571,7 +768,10 @@
|
|||
color: var(--ctp-overlay0);
|
||||
}
|
||||
|
||||
.empty-group-text { font-size: 0.875rem; font-style: italic; }
|
||||
.empty-group-text {
|
||||
font-size: 0.875rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Right sidebar ────────────────────────────────────────── */
|
||||
.right-bar {
|
||||
|
|
@ -604,15 +804,25 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.12s, color 0.12s;
|
||||
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); }
|
||||
.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-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
width: 1.75rem;
|
||||
|
|
@ -626,13 +836,24 @@
|
|||
justify-content: center;
|
||||
border-radius: 0.375rem;
|
||||
position: relative;
|
||||
transition: color 0.12s, background 0.12s;
|
||||
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-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;
|
||||
|
|
@ -669,12 +890,20 @@
|
|||
font-family: var(--ui-font-family);
|
||||
text-align: center;
|
||||
}
|
||||
.add-group-input:focus { outline: none; border-color: var(--ctp-blue); }
|
||||
.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-card-actions {
|
||||
display: flex;
|
||||
gap: 0.375rem;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.add-cancel, .delete-confirm {
|
||||
.add-cancel,
|
||||
.delete-confirm {
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 0.25rem;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -682,8 +911,15 @@
|
|||
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); }
|
||||
.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;
|
||||
|
|
@ -697,7 +933,17 @@
|
|||
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); }
|
||||
.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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue