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

Changeset 0.9.3 (#53)

Browse Source
This commit is contained in:
xcaliber
2026-02-23 23:55:22 +00:00
parent ac7c7c7d59
commit 90021157e6
20 changed files with 897 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
src/css/styles.css
View File

@@ -536,15 +536,35 @@ a:hover { text-decoration: underline; }
.msg-text pre code { background: none; padding: 0; font-size: inherit; }
/* Code block toolbar */
.copy-code-btn {
position: absolute; top: 6px; right: 6px; background: var(--bg-raised);
border: 1px solid var(--border); color: var(--text-3); border-radius: 4px;
padding: 2px 10px; font-size: 11px; cursor: pointer;
.code-toolbar {
position: absolute; top: 6px; right: 6px;
display: flex; gap: 4px; align-items: center;
opacity: 0; transition: opacity var(--transition);
}
.preview-code-btn { right: 56px; }
.msg-text pre:hover .copy-code-btn { opacity: 1; }
.msg-text pre:hover .code-toolbar { opacity: 1; }
.code-block.code-collapsed .code-toolbar { opacity: 1; }
.copy-code-btn {
background: var(--bg-raised); border: 1px solid var(--border);
color: var(--text-3); border-radius: 4px;
padding: 2px 10px; font-size: 11px; cursor: pointer;
transition: color var(--transition), border-color var(--transition);
}
.copy-code-btn:hover { color: var(--text); border-color: var(--border-light); }
.code-collapse-btn {
background: var(--bg-raised); border: 1px solid var(--border);
color: var(--text-3); border-radius: 4px;
padding: 2px 10px; font-size: 11px; cursor: pointer;
font-family: var(--mono); white-space: nowrap;
transition: color var(--transition), border-color var(--transition);
}
.code-collapse-btn:hover { color: var(--text); border-color: var(--border-light); }
/* Collapsed code block */
.code-block.code-collapsed code {
max-height: 3.6em; overflow: hidden; display: block;
mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
}
/* Language label */
.code-lang {
@@ -553,44 +573,83 @@ a:hover { text-decoration: underline; }
text-transform: uppercase; letter-spacing: 0.5px; user-select: none;
}
/* Collapsible code blocks */
.code-collapsible {
border: 1px solid var(--border); border-radius: var(--radius);
margin: 0.75rem 0; background: var(--bg-surface);
/* HTML preview */
/* ── Side Panel (Preview + Notes) ──────── */
.side-panel {
width: 0; min-width: 0; overflow: hidden;
background: var(--bg); border-left: 1px solid var(--border);
display: flex; flex-direction: column;
transition: width 0.25s ease, min-width 0.25s ease;
}
.code-collapsible pre {
margin: 0; border: none; border-radius: 0 0 var(--radius) var(--radius);
.side-panel.open {
width: 480px; min-width: 480px;
}
.code-collapse-summary {
padding: 0.5rem 0.75rem; cursor: pointer; font-size: 12px;
color: var(--text-3); user-select: none;
transition: color var(--transition);
font-family: var(--mono);
.side-panel-header {
display: flex; align-items: center; justify-content: space-between;
padding: 8px 12px; border-bottom: 1px solid var(--border);
background: var(--bg-raised); flex-shrink: 0;
}
.code-collapse-summary:hover { color: var(--text-2); }
.code-collapsible[open] .code-collapse-summary {
border-bottom: 1px solid var(--border);
.side-panel-tabs {
display: flex; gap: 2px; background: var(--bg-surface);
border-radius: var(--radius); padding: 2px;
}
.side-panel-tab {
padding: 4px 14px; border-radius: calc(var(--radius) - 2px);
font-size: 12px; font-family: var(--font); font-weight: 500;
background: none; border: none; color: var(--text-3);
cursor: pointer; transition: all var(--transition);
}
.side-panel-tab:hover { color: var(--text); }
.side-panel-tab.active {
background: var(--bg-raised); color: var(--text);
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.side-panel-close {
background: none; border: none; color: var(--text-3);
cursor: pointer; font-size: 16px; padding: 2px 6px;
border-radius: var(--radius); transition: all var(--transition);
}
.side-panel-close:hover { background: var(--bg-hover); color: var(--text); }
.side-panel-body {
flex: 1; overflow-y: auto; min-height: 0;
}
.side-panel-page { 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;
padding: 2rem; text-align: center;
}
.preview-frame {
flex: 1; width: 100%; border: none; background: #fff;
}
/* HTML preview */
.html-preview-wrap {
border: 1px solid var(--accent); border-radius: var(--radius);
margin: 0.5rem 0; overflow: hidden;
animation: fadeIn 0.15s ease;
/* Notes inside side panel */
.notes-actions-bar {
display: flex; align-items: center; gap: 8px;
padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.html-preview-header {
display: flex; justify-content: space-between; align-items: center;
padding: 4px 10px; background: var(--accent-dim);
font-size: 11px; color: var(--accent);
.side-panel .notes-list { padding: 4px 8px; }
.side-panel .notes-editor { padding: 8px 12px; }
.side-panel .note-read-content {
max-height: none; flex: 1; overflow-y: auto;
}
.html-preview-close {
background: none; border: none; color: var(--text-3);
cursor: pointer; padding: 0 4px; font-size: 14px;
.side-panel .notes-content-input {
min-height: 150px;
}
.html-preview-close:hover { color: var(--text); }
.html-preview-frame {
width: 100%; height: 300px; border: none;
background: #fff; display: block;
.side-panel #notesListView {
flex: 1; overflow-y: auto; min-height: 0;
}
.side-panel #notesEditorView {
flex: 1; overflow-y: auto; min-height: 0;
}
/* Mobile: full-width overlay */
@media (max-width: 768px) {
.side-panel.open {
position: fixed; top: 0; right: 0; bottom: 0;
width: 100vw; min-width: 100vw; z-index: 200;
}
}
.msg-text ul, .msg-text ol { margin: 0.4em 0; padding-left: 1.5em; }
@@ -662,6 +721,46 @@ a:hover { text-decoration: underline; }
font-size: 11px; color: var(--text-3); margin-left: 6px;
max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-note-link {
background: none; border: none; color: var(--accent); cursor: pointer;
font-size: 11px; margin-left: 6px; padding: 0;
text-decoration: none;
transition: color var(--transition);
}
.tool-note-link:hover { color: var(--text); text-decoration: underline; }
/* Tool calls in message history (collapsed) */
.tool-call-block {
border: 1px solid var(--border); border-radius: var(--radius);
background: var(--bg-raised); font-size: 12px;
}
.tool-call-summary {
display: flex; align-items: center; gap: 6px;
padding: 4px 10px; cursor: pointer; user-select: none;
color: var(--text-3); list-style: none;
transition: color var(--transition);
}
.tool-call-summary::-webkit-details-marker { display: none; }
.tool-call-summary::before {
content: '▸'; font-size: 10px; color: var(--text-3);
transition: transform 0.15s ease;
}
.tool-call-block[open] .tool-call-summary::before { transform: rotate(90deg); }
.tool-call-summary:hover { color: var(--text-2); }
.tool-detail {
border-top: 1px solid var(--border); padding: 6px 10px;
display: flex; flex-direction: column; gap: 6px;
}
.tool-detail-label {
font-size: 10px; color: var(--text-3); text-transform: uppercase;
letter-spacing: 0.5px; font-weight: 600;
}
.tool-detail-pre {
margin: 2px 0 0; padding: 6px 8px;
background: var(--bg-surface); border-radius: 4px;
font-size: 11px; color: var(--text-2); white-space: pre-wrap;
word-break: break-all; max-height: 200px; overflow-y: auto;
}
/* Empty state */
.empty-state {
@@ -1242,12 +1341,12 @@ button { font-family: var(--font); cursor: pointer; }
.sidebar.collapsed .sidebar-notes-btn .sb-label { display: none; }
.sidebar.collapsed .sb-notes { justify-content: center; padding: 8px; }
/* ── Notes Modal ────────────────────────── */
/* ── Notes (inside side panel) ──────────── */
.notes-header-actions { display: flex; align-items: center; gap: 8px; }
/* Notes toolbar and selection bar now live inside the side panel */
.notes-toolbar {
display: flex; gap: 8px; padding: 10px 20px;
display: flex; gap: 8px; padding: 8px 12px;
border-bottom: 1px solid var(--border);
background: var(--bg-raised);
}
@@ -1269,12 +1368,12 @@ button { font-family: var(--font); cursor: pointer; }
max-width: 160px;
}
.notes-body { padding: 0 !important; }
/* Notes toolbar and selection bar now live inside the side panel */
/* Selection bar */
.notes-selection-bar {
display: flex; align-items: center; gap: 10px;
padding: 6px 20px;
padding: 6px 12px;
background: var(--accent-dim); border-bottom: 1px solid var(--border);
font-size: 12px;
}