ad9833fcb8
Some checks failed
Build AppImage / build (push) Has been cancelled
Phase 8 (VS-Code-Look Chatbereich): - Linksbuendige Messages mit Avatar-Spalte, Hover-Actions - Inline Tool-Karten (Read/Edit/Bash/Generic) in Assistant-Messages - Edit-Karten zeigen Diff direkt mit Accept/Reject - Tool-Calls werden via events.ts an letzte Assistant-Message gebunden - Smart-Sticky-Scroll (Auto-Scroll stoppt wenn User selbst scrollt) - OOM-Bug durch MutationObserver mit subtree:true behoben Phase 9 (Komplettes UI-Redesign): - Design-System in app.css: 4 Graustufen, 1 Akzent (#007acc), 4 Status-Farben, 5 Schriftgroessen (11/12/13/14/16), 4-Punkt-Spacing, 2 Radius-Werte - vscode.css als Aliase auf das neue System - UI-Library src/lib/ui/: Button, Card, Icon, Badge, StatusDot, Tooltip, Drawer, Tabs - Lucide-svelte fuer SVG-Icons (ersetzt Emojis im Chrome) - StatusBar (22px) ersetzt ueberfuellten Footer mit 6+ Stats - Titlebar entruempelt: ✱-Logo + Stop + Schulungsmodus + Version - 2-spaltiges Layout (Sidebar 240px + Hauptbereich) statt 4-Pane-Zerstueckelung - ToolDrawer: 13 Panels in 4 Gruppen (Aktivitaet/Speicher/Werkzeuge/Einstellungen), jede Gruppe mit internen Tabs, Esc schliesst - Cmd+K global oeffnet QuickActions als zentrale Navigation - StatusDot-Komponente ersetzt Emoji-Status (🟢🟡⚪🔴) in AgentView - Hardgecodete Farben (#ef4444, #22c55e, #eab308 ...) in 9 Komponenten durch CSS-Variablen ersetzt Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
130 lines
4.1 KiB
CSS
130 lines
4.1 KiB
CSS
/* VS-Code-kompatible Variablen-Aliase (Phase 9)
|
|
*
|
|
* Phase 8 hatte hier eigene `--vscode-*` Werte — die Single Source of
|
|
* Truth liegt jetzt in app.css (Phase 9). Diese Datei mappt die
|
|
* `--vscode-*` Namen weiterhin auf die neuen Variablen, damit Phase-8-
|
|
* Komponenten (DiffView, ToolCallCard, Message, ToolCardRead/Edit/...)
|
|
* unveraendert weiterlaufen.
|
|
*/
|
|
|
|
:root {
|
|
/* Backgrounds */
|
|
--vscode-editor-background: var(--bg-primary);
|
|
--vscode-editor-foreground: var(--text-primary);
|
|
--vscode-sideBar-background: var(--bg-secondary);
|
|
--vscode-sideBarSectionHeader-background:var(--bg-tertiary);
|
|
--vscode-titleBar-activeBackground: var(--bg-secondary);
|
|
--vscode-titleBar-activeForeground: var(--text-primary);
|
|
|
|
/* Inputs */
|
|
--vscode-input-background: var(--bg-input);
|
|
--vscode-input-foreground: var(--text-primary);
|
|
--vscode-input-border: var(--border);
|
|
|
|
/* Buttons */
|
|
--vscode-button-background: var(--accent);
|
|
--vscode-button-foreground: var(--accent-fg);
|
|
--vscode-button-hoverBackground: var(--accent-hover);
|
|
--vscode-button-secondaryBackground: var(--bg-tertiary);
|
|
--vscode-button-secondaryHoverBackground: var(--bg-hover);
|
|
|
|
/* Text */
|
|
--vscode-foreground: var(--text-primary);
|
|
--vscode-descriptionForeground: var(--text-secondary);
|
|
--vscode-disabledForeground: var(--text-disabled);
|
|
--vscode-focusBorder: var(--focus);
|
|
|
|
/* Status */
|
|
--vscode-errorForeground: var(--status-error);
|
|
--vscode-warningForeground: var(--status-warning);
|
|
--vscode-successForeground: var(--status-success);
|
|
|
|
/* Badges */
|
|
--vscode-badge-background: var(--bg-tertiary);
|
|
--vscode-badge-foreground: var(--text-primary);
|
|
--vscode-progressBar-background: var(--accent);
|
|
--vscode-widget-shadow: rgba(0, 0, 0, 0.4);
|
|
|
|
/* Diff */
|
|
--vscode-diffEditor-insertedTextBackground: var(--diff-added-bg);
|
|
--vscode-diffEditor-removedTextBackground: var(--diff-removed-bg);
|
|
--vscode-diffEditor-insertedLineBackground: rgba(106, 153, 85, 0.10);
|
|
--vscode-diffEditor-removedLineBackground: rgba(244, 135, 113, 0.10);
|
|
|
|
/* Editor highlights */
|
|
--vscode-editor-lineHighlightBackground: var(--bg-hover);
|
|
--vscode-editorLineNumber-foreground: var(--text-disabled);
|
|
--vscode-editorLineNumber-activeForeground: var(--text-secondary);
|
|
--vscode-editorIndentGuide-background: var(--border);
|
|
|
|
/* Terminal */
|
|
--vscode-terminal-background: var(--bg-primary);
|
|
--vscode-terminal-foreground: var(--text-primary);
|
|
|
|
/* Listen */
|
|
--vscode-list-hoverBackground: var(--bg-hover);
|
|
--vscode-list-activeSelectionBackground: var(--bg-selected);
|
|
--vscode-list-inactiveSelectionBackground: var(--bg-tertiary);
|
|
|
|
/* Scrollbar */
|
|
--vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
|
|
--vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
|
|
--vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
|
|
}
|
|
|
|
/* Utility-Klassen aus Phase 8 — bleiben kompatibel */
|
|
|
|
.vscode-card {
|
|
background: var(--bg-tertiary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--r-md);
|
|
}
|
|
|
|
.vscode-card-accent {
|
|
border-left: 3px solid var(--accent);
|
|
}
|
|
|
|
.vscode-card-accent.running {
|
|
border-left-color: var(--accent);
|
|
animation: pulse 1.6s ease-in-out infinite;
|
|
}
|
|
|
|
.vscode-card-accent.error {
|
|
border-left-color: var(--status-error);
|
|
}
|
|
|
|
.vscode-card-accent.success {
|
|
border-left-color: var(--status-success);
|
|
}
|
|
|
|
.vscode-mono {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--fs-md);
|
|
line-height: var(--lh-code);
|
|
}
|
|
|
|
.vscode-hint {
|
|
color: var(--text-secondary);
|
|
font-size: var(--fs-xs);
|
|
}
|
|
|
|
.vscode-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--sp-1);
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-primary);
|
|
padding: 1px var(--sp-2);
|
|
border-radius: 2px;
|
|
font-size: var(--fs-xs);
|
|
line-height: var(--lh-tight);
|
|
}
|
|
|
|
.vscode-badge.clickable {
|
|
cursor: pointer;
|
|
transition: background var(--dur-fast) var(--ease);
|
|
}
|
|
|
|
.vscode-badge.clickable:hover {
|
|
background: var(--bg-hover);
|
|
}
|