switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Changeset 0.31.0 (#203)

Browse Source 
Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>
This commit is contained in:
Jeffrey Smith
2026-03-19 00:06:16 +00:00
committed by xcaliber
parent 5883cb50e2
commit 071dea8904
33 changed files with 1693 additions and 1562 deletions
Download Patch File Download Diff File Expand all files Collapse all files

535
src/css/editor-surface.css
View File

@@ -1,535 +0,0 @@
/* ==========================================
Chat Switchboard — Editor Surface (v0.25.0)
==========================================
Replaces editor-mode.css for the pane-based editor.
Covers: topbar, bootstrap, and component-specific
overrides within the editor context.
========================================== */
/* ── Surface Shell ─────────────────────────── */
.surface-editor {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
background: var(--bg, #0e0e10);
}
/* ── Topbar ────────────────────────────────── */
.editor-topbar {
display: flex;
align-items: center;
gap: 8px;
padding: 0 12px;
height: 40px;
flex-shrink: 0;
background: var(--bg-secondary, #151517);
border-bottom: 1px solid var(--border, #2a2a2e);
font-size: 13px;
position: relative;
z-index: 20;
}
.editor-topbar-back {
display: flex;
align-items: center;
gap: 4px;
color: var(--text-3, #777);
text-decoration: none;
font-size: 12px;
font-weight: 500;
padding: 4px 8px;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
}
.editor-topbar-back:hover {
color: var(--text, #eee);
background: var(--bg-hover);
}
.editor-topbar-sep {
width: 1px;
height: 18px;
background: var(--border, #2a2a2e);
}
.editor-topbar-name {
font-size: 13px;
font-weight: 600;
color: var(--text, #eee);
}
/* ── Workspace Selector ────────────────────── */
.editor-ws-selector {
position: relative;
}
.editor-ws-selector-btn {
display: flex;
align-items: center;
gap: 6px;
background: none;
border: 1px solid transparent;
color: var(--text, #eee);
font-size: 13px;
font-weight: 600;
font-family: inherit;
padding: 4px 8px;
border-radius: 4px;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.editor-ws-selector-btn:hover {
border-color: var(--border, #2a2a2e);
background: var(--bg-hover);
}
.editor-ws-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
margin-top: 4px;
background: var(--bg-secondary, #1a1a1e);
border: 1px solid var(--border, #2a2a2e);
border-radius: 8px;
min-width: 220px;
max-height: 320px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
padding: 4px 0;
}
.editor-ws-dropdown.open { display: block; }
.editor-ws-list {
max-height: 240px;
overflow-y: auto;
}
.editor-ws-dropdown-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--text, #eee);
font-size: 12px;
font-family: inherit;
padding: 8px 12px;
cursor: pointer;
transition: background 0.1s;
}
.editor-ws-dropdown-item:hover {
background: var(--bg-hover);
}
.editor-ws-dropdown-item.active {
color: var(--accent, #b38a4e);
font-weight: 600;
}
.editor-ws-dropdown-divider {
height: 1px;
background: var(--border, #2a2a2e);
margin: 4px 0;
}
.editor-ws-new {
display: flex;
align-items: center;
gap: 6px;
color: var(--accent, #b38a4e);
}
.editor-topbar-branch {
display: flex;
align-items: center;
gap: 4px;
background: var(--purple-dim, rgba(160, 120, 255, 0.1));
padding: 2px 8px;
border-radius: 4px;
}
.editor-topbar-branch-text {
font-size: 11px;
font-weight: 600;
color: var(--purple, #a078ff);
font-family: var(--mono, 'SF Mono', monospace);
}
/* ── Body ──────────────────────────────────── */
.editor-body {
flex: 1;
min-height: 0;
overflow: hidden;
}
/* ── Bootstrap (no workspace) ──────────────── */
.editor-bootstrap {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.editor-bootstrap-card {
text-align: center;
padding: 40px;
background: var(--bg-secondary, #151517);
border: 1px solid var(--border, #2a2a2e);
border-radius: 12px;
max-width: 360px;
}
.editor-bootstrap-input {
width: 100%;
padding: 8px 12px;
background: var(--bg, #0e0e10);
border: 1px solid var(--border, #2a2a2e);
border-radius: 6px;
color: var(--text, #eee);
font-size: 13px;
font-family: inherit;
outline: none;
margin-bottom: 12px;
box-sizing: border-box;
}
.editor-bootstrap-input:focus {
border-color: var(--accent, #b38a4e);
}
.editor-bootstrap-btn {
width: 100%;
padding: 10px 16px;
background: var(--accent, #b38a4e);
color: #fff;
border: none;
border-radius: 6px;
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: opacity 0.15s;
}
.editor-bootstrap-btn:hover { opacity: 0.9; }
.editor-bootstrap-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Workspace list in bootstrap */
.editor-bootstrap-ws-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 12px;
background: var(--bg, #0e0e10);
border: 1px solid var(--border, #2a2a2e);
border-radius: 6px;
color: var(--text, #eee);
font-size: 13px;
font-family: inherit;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
margin-bottom: 6px;
text-align: left;
}
.editor-bootstrap-ws-item:hover {
border-color: var(--accent, #b38a4e);
background: var(--bg-hover);
}
.editor-bootstrap-ws-name {
font-weight: 600;
}
.editor-bootstrap-ws-date {
font-size: 11px;
color: var(--text-3, #777);
}
/* User menu in editor topbar — uses user-menu.css base styles.
No overrides needed: user-menu.css defaults to drop-down (topbar) mode.
Sidebar context flipped via .sidebar parent selector in user-menu.css. */
/* ── FileTree overrides (in editor context) ── */
.surface-editor .file-tree {
height: 100%;
display: flex;
flex-direction: column;
border-right: 1px solid var(--border, #2a2a2e);
}
.surface-editor .file-tree-header {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 12px;
border-bottom: 1px solid var(--border, #2a2a2e);
}
.surface-editor .file-tree-title {
font-size: 11px;
font-weight: 600;
color: var(--text-2, #999);
text-transform: uppercase;
letter-spacing: 0.4px;
flex: 1;
}
.surface-editor .file-tree-items {
flex: 1;
overflow-y: auto;
padding: 4px 0;
}
.surface-editor .file-tree-row {
display: flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
cursor: pointer;
font-size: 12px;
color: var(--text-2, #999);
transition: background 0.1s;
}
.surface-editor .file-tree-row:hover {
background: var(--bg-hover);
}
.surface-editor .file-tree-row.active {
background: var(--accent-dim, rgba(179, 138, 78, 0.15));
color: var(--text, #eee);
}
.surface-editor .file-tree-arrow {
width: 12px;
font-size: 10px;
color: var(--text-3, #555);
text-align: center;
}
.surface-editor .file-tree-icon {
font-size: 13px;
width: 18px;
text-align: center;
}
.surface-editor .file-tree-name {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Git status indicators */
.surface-editor .file-tree-row.git-modified .file-tree-name { color: var(--warning, #e5a842); }
.surface-editor .file-tree-row.git-added .file-tree-name { color: var(--success, #4caf50); }
.surface-editor .file-tree-row.git-untracked .file-tree-name { color: var(--text-3, #555); font-style: italic; }
.surface-editor .file-tree-row.git-deleted .file-tree-name { color: var(--danger, #f44336); text-decoration: line-through; }
/* Context menu */
.file-tree-ctx-menu {
position: fixed;
background: var(--bg-secondary, #1a1a1e);
border: 1px solid var(--border, #2a2a2e);
border-radius: 6px;
padding: 4px 0;
min-width: 120px;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.file-tree-ctx-item {
padding: 6px 12px;
font-size: 12px;
color: var(--text, #eee);
cursor: pointer;
}
.file-tree-ctx-item:hover {
background: var(--bg-hover);
}
/* ── CodeEditor overrides ──────────────────── */
.surface-editor .code-editor {
height: 100%;
display: flex;
flex-direction: column;
}
.surface-editor .code-editor-tabs {
display: flex;
align-items: center;
gap: 0;
background: var(--bg-secondary, #151517);
border-bottom: 1px solid var(--border, #2a2a2e);
height: 32px;
overflow-x: auto;
flex-shrink: 0;
}
.surface-editor .code-editor-tabs::-webkit-scrollbar { height: 0; }
.surface-editor .code-editor-tab {
display: flex;
align-items: center;
gap: 4px;
padding: 0 12px;
height: 100%;
font-size: 12px;
color: var(--text-3, #777);
cursor: pointer;
border-right: 1px solid var(--border, #2a2a2e);
transition: background 0.1s;
white-space: nowrap;
}
.surface-editor .code-editor-tab:hover { background: var(--bg-hover); }
.surface-editor .code-editor-tab.active { color: var(--text, #eee); background: var(--bg, #0e0e10); }
.surface-editor .code-editor-tab.modified .code-editor-tab-modified { color: var(--warning, #e5a842); }
.surface-editor .code-editor-tab-icon { font-size: 12px; }
.surface-editor .code-editor-tab-modified { font-size: 10px; color: var(--text-3); }
.surface-editor .code-editor-tab-close {
background: none;
border: none;
color: var(--text-3, #555);
font-size: 12px;
cursor: pointer;
padding: 0 2px;
margin-left: 4px;
border-radius: 2px;
line-height: 1;
}
.surface-editor .code-editor-tab-close:hover {
background: var(--danger-dim, rgba(244, 67, 54, 0.15));
color: var(--danger, #f44336);
}
.surface-editor .code-editor-content {
flex: 1;
min-height: 0;
overflow: hidden;
position: relative;
}
.surface-editor .code-editor-welcome {
height: 100%;
}
.surface-editor .code-editor-cm-wrap {
height: 100%;
overflow: auto;
}
.surface-editor .code-editor-cm-wrap .cm-editor {
height: 100%;
}
.surface-editor .code-editor-statusbar {
display: flex;
align-items: center;
gap: 16px;
padding: 0 12px;
height: 24px;
flex-shrink: 0;
background: var(--bg-secondary, #151517);
border-top: 1px solid var(--border, #2a2a2e);
font-size: 11px;
color: var(--text-3, #777);
font-family: var(--mono, 'SF Mono', monospace);
}
.surface-editor .code-editor-textarea-fallback {
width: 100%;
height: 100%;
background: var(--bg, #0e0e10);
color: var(--text, #eee);
border: none;
padding: 12px;
font-family: var(--mono, 'SF Mono', monospace);
font-size: 13px;
resize: none;
outline: none;
box-sizing: border-box;
}
/* ── Tabbed assist pane overrides ──────────── */
.surface-editor .pane-tabbed {
border-left: 1px solid var(--border, #2a2a2e);
}
/* ChatPane in editor tabbed pane */
.surface-editor .chat-pane {
position: absolute;
inset: 0;
}
/* Notes in editor pane */
.surface-editor .note-editor {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.surface-editor .note-editor-list-view {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.surface-editor .notes-list {
flex: 1;
overflow-y: auto;
}
/* Compact notes toolbar for narrow pane */
.surface-editor .notes-toolbar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 6px 8px;
border-bottom: 1px solid var(--border, #2a2a2e);
}
.surface-editor .notes-toolbar .btn-small {
font-size: 11px;
padding: 3px 6px;
}
.surface-editor .notes-search-row {
padding: 4px 8px;
}
.surface-editor .notes-filter-row {
padding: 2px 8px 4px;
display: flex;
gap: 4px;
}
.surface-editor .notes-filter-select {
font-size: 11px;
flex: 1;
min-width: 0;
}

9
src/css/panels.css
View File

@@ -41,6 +41,7 @@
flex: 1; overflow-y: auto; min-height: 0;
}
.side-panel-page { height: 100%; display: flex; flex-direction: column; }
.note-panel-root { height: 100%; display: flex; flex-direction: column; }
.side-panel-empty {
display: flex; align-items: center; justify-content: center;
height: 100%; color: var(--text-3); font-size: 13px;
@@ -68,10 +69,10 @@
.workspace-secondary .notes-content-input, .side-panel .notes-content-input {
min-height: 150px;
}
.workspace-secondary #notesListView, .side-panel #notesListView {
#notesListView {
flex: 1; overflow-y: auto; min-height: 0;
}
.workspace-secondary #notesEditorView, .side-panel #notesEditorView {
#notesEditorView {
flex: 1; overflow-y: auto; min-height: 0;
}
@@ -304,8 +305,10 @@
.notes-selection-bar {
display: flex; align-items: center; gap: 10px;
padding: 6px 12px;
background: var(--accent-dim); border-bottom: 1px solid var(--border);
background: var(--accent-dim); border-top: 1px solid var(--border);
font-size: 12px;
position: sticky; bottom: 0;
z-index: 5;
}
.notes-select-all {
display: flex; align-items: center; gap: 6px;

50
src/css/primitives.css
View File

@@ -404,3 +404,53 @@ select option { background: var(--bg-surface); color: var(--text); }
.error-hint { color: var(--danger); font-size: 13px; padding: 0.5rem; }
.empty-hint { color: var(--text-3); font-size: 13px; text-align: center; padding: 1rem; }
/* ── SDK Primitives (sw.menu, sw.dropdown, sw.toolbar, sw.tabs) ── */
/* Menu flyout — reusable dropdown attached to any anchor */
.sw-menu-wrap { position: relative; display: inline-flex; }
.sw-menu-flyout {
display: none; position: absolute; right: 0; left: auto; z-index: 200;
background: var(--bg-elevated, #42424e); border: 1px solid var(--border-elevated, #555);
border-radius: var(--radius-lg, 8px); padding: 4px; min-width: 170px;
box-shadow: 0 8px 40px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.08);
}
.sw-menu-flyout[data-position="down"] { top: 100%; margin-top: 4px; }
.sw-menu-flyout[data-position="up"] { bottom: 100%; margin-bottom: 4px; top: auto; }
.sw-menu-flyout.open { display: block; }
.sw-menu-flyout .flyout-item,
.sw-menu-flyout .flyout-divider,
.sw-menu-flyout .flyout-danger { /* inherits from user-menu.css flyout-item styles */ }
/* Dropdown — styled native select */
.sw-dropdown {
background: var(--bg-raised, #222); color: var(--text, #eee);
border: 1px solid var(--border, #2e2e35); border-radius: var(--radius, 6px);
padding: 6px 10px; font-size: 13px; font-family: inherit;
cursor: pointer; min-width: 100px;
}
.sw-dropdown:hover { border-color: var(--border-light, #444); }
.sw-dropdown:focus { outline: none; border-color: var(--accent, #b38a4e); }
/* Toolbar — horizontal button row */
.sw-toolbar {
display: flex; align-items: center; gap: 4px;
padding: 4px 0;
}
/* Tabs — tabbed content container */
.sw-tabs { display: flex; flex-direction: column; height: 100%; }
.sw-tabs-bar {
display: flex; gap: 0; border-bottom: 1px solid var(--border, #2e2e35);
flex-shrink: 0;
}
.sw-tab-btn {
padding: 8px 16px; background: none; border: none; border-bottom: 2px solid transparent;
color: var(--text-2, #999); cursor: pointer; font-size: 12px; font-weight: 600;
font-family: inherit; text-transform: uppercase; letter-spacing: 0.5px;
transition: color 0.15s, border-color 0.15s;
}
.sw-tab-btn:hover { color: var(--text, #eee); }
.sw-tab-btn--active { color: var(--accent, #b38a4e); border-bottom-color: var(--accent, #b38a4e); }
.sw-tabs-content { flex: 1; min-height: 0; overflow: hidden; }
.sw-tab-panel { height: 100%; overflow-y: auto; }

14
src/css/user-menu.css
View File

@@ -76,14 +76,15 @@
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
background: var(--bg-raised, #1a1a1e);
border: 1px solid var(--border-light, #333);
left: auto;
margin-top: 2px;
background: var(--bg-elevated, #42424e);
border: 1px solid var(--border-elevated, #555);
border-radius: var(--radius-lg, 8px);
padding: 4px;
min-width: 170px;
z-index: 200;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255,255,255,0.08);
}
.user-menu-wrap .user-flyout.open {
@@ -134,9 +135,10 @@
margin: 4px 0;
}
/* ── Sidebar Context (flyout pops UP) ──────── */
/* When user-menu is inside .sidebar, flip the flyout direction */
/* ── Flyout Direction: UP ──────────────────── */
/* data-flyout="up" on .user-menu-wrap (or legacy .sidebar parent) */
.user-menu-wrap[data-flyout="up"] .user-flyout,
.sidebar .user-menu-wrap .user-flyout {
top: auto;
bottom: 100%;

4
src/css/variables.css
View File

@@ -15,7 +15,9 @@
--bg-surface: #18181b;
--bg-raised: #222227;
--bg-hover: #2a2a30;
--bg-elevated: #42424e;
--border: #2e2e35;
--border-elevated: #555560;
--border-light: #3a3a42;
--text: #e8e8ed;
--text-2: #9898a8;
@@ -75,7 +77,9 @@
--bg-surface: #ffffff;
--bg-raised: #eff0f3;
--bg-hover: #e5e6eb;
--bg-elevated: #ffffff;
--border: #d5d6dc;
--border-elevated: #c0c0c8;
--border-light: #c2c3cb;
--text: #1a1a2e;
--text-2: #555770;