web: integrate QoL slices 1-5 (model switch/rename, history deletes, usage stats, repo prepare+badges+imageUsed, markdown/search/FAB/timestamps) — 263 tests, ≥95% all metrics
This commit is contained in:
Raphael Westphal
@@ -396,6 +396,16 @@ a:hover {
|
||||
color: var(--text-dim);
|
||||
background: transparent;
|
||||
}
|
||||
.badge.ok {
|
||||
border-color: rgba(52, 211, 153, 0.4);
|
||||
color: var(--ok);
|
||||
background: rgba(52, 211, 153, 0.12);
|
||||
}
|
||||
.badge.warn {
|
||||
border-color: rgba(251, 191, 36, 0.4);
|
||||
color: var(--warn);
|
||||
background: rgba(251, 191, 36, 0.12);
|
||||
}
|
||||
|
||||
.skeleton {
|
||||
border-radius: var(--radius-lg);
|
||||
@@ -465,6 +475,111 @@ a:hover {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* model picker (header chip + popover) */
|
||||
.model-picker {
|
||||
position: relative;
|
||||
}
|
||||
.model-chip {
|
||||
font-size: 12px;
|
||||
font-family: var(--mono);
|
||||
color: var(--text-faint);
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
padding: 2.5px 8px;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
}
|
||||
.model-chip:hover {
|
||||
color: var(--accent-strong);
|
||||
border-color: var(--accent-line);
|
||||
}
|
||||
.model-popover {
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
left: 0;
|
||||
z-index: 40;
|
||||
min-width: 220px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
background: var(--bg-veil);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.model-group {
|
||||
font-size: 10.5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--text-faint);
|
||||
padding: 6px 6px 3px;
|
||||
}
|
||||
.model-option {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
color: inherit;
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.model-option:hover:not(:disabled) {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent-strong);
|
||||
}
|
||||
.model-option:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: default;
|
||||
}
|
||||
.model-loading {
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
/* inline session rename */
|
||||
.rename-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
.rename-input {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: inherit;
|
||||
background: var(--bg-veil);
|
||||
border: 1px solid var(--accent-line);
|
||||
border-radius: 7px;
|
||||
padding: 3px 8px;
|
||||
min-width: 0;
|
||||
max-width: 260px;
|
||||
}
|
||||
|
||||
/* daemon/plugin error notices in the stream */
|
||||
.notice-line {
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
background: rgba(255, 120, 120, 0.08);
|
||||
border: 1px solid rgba(255, 120, 120, 0.25);
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
margin: 4px 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.chat-stream {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
}
|
||||
.chat-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
@@ -625,6 +740,149 @@ details.thinking .thinking-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ---------- mini-markdown + search highlights ---------- */
|
||||
|
||||
.bubble .md-code {
|
||||
white-space: pre;
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 10px 12px;
|
||||
margin: 8px 0;
|
||||
font-family: var(--mono);
|
||||
font-size: 12.5px;
|
||||
overflow-x: auto;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
.bubble code {
|
||||
font-family: var(--mono);
|
||||
font-size: 0.92em;
|
||||
background: var(--bg-active);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 5px;
|
||||
padding: 1px 5px;
|
||||
}
|
||||
mark.hit {
|
||||
background: rgba(251, 191, 36, 0.35);
|
||||
color: var(--text);
|
||||
border-radius: 3px;
|
||||
padding: 0 1px;
|
||||
}
|
||||
.msg-current mark.hit {
|
||||
background: var(--warn);
|
||||
color: #221a05;
|
||||
}
|
||||
|
||||
/* ---------- search overlay ---------- */
|
||||
|
||||
.search-bar {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 15;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 999px;
|
||||
padding: 5px 7px 5px 14px;
|
||||
box-shadow: var(--shadow-2);
|
||||
}
|
||||
.search-bar input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 2px 4px;
|
||||
width: 240px;
|
||||
max-width: 46vw;
|
||||
}
|
||||
.search-bar input:focus {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.search-count {
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
font-family: var(--mono);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ---------- scroll-to-bottom FAB ---------- */
|
||||
|
||||
.scroll-fab {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 18px;
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-2);
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
.scroll-fab:hover {
|
||||
background: var(--accent-strong);
|
||||
}
|
||||
|
||||
/* ---------- timestamps ---------- */
|
||||
|
||||
.ts {
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
font-size: 10.5px;
|
||||
color: var(--text-faint);
|
||||
font-family: var(--mono);
|
||||
}
|
||||
.bubble-row.user .ts {
|
||||
right: 0;
|
||||
}
|
||||
.bubble-row:not(.user) .ts {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* ---------- header ⋯ menu ---------- */
|
||||
|
||||
.menu-anchor {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
.chat-menu {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 6px);
|
||||
z-index: 30;
|
||||
min-width: 190px;
|
||||
background: var(--bg-raised);
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-2);
|
||||
padding: 6px;
|
||||
}
|
||||
.chat-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
}
|
||||
.chat-menu-item:hover {
|
||||
background: var(--bg-hover);
|
||||
color: var(--text);
|
||||
}
|
||||
.chat-menu-item.danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
.chat-menu-item.danger:hover {
|
||||
background: var(--danger-soft);
|
||||
}
|
||||
|
||||
.typing {
|
||||
display: inline-flex;
|
||||
gap: 4px;
|
||||
@@ -984,6 +1242,21 @@ details.thinking .thinking-body {
|
||||
color: var(--text-faint);
|
||||
margin-top: 1px;
|
||||
}
|
||||
.repo-item .prepare-btn {
|
||||
flex-shrink: 0;
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
padding: 4px 10px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg-raised);
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
}
|
||||
.repo-item .prepare-btn:hover {
|
||||
border-color: var(--accent-line);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.spawn-job-line {
|
||||
font-size: 13px;
|
||||
|
||||
Reference in New Issue
Block a user