Houmeres/LLeMbas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 19 Wiki Activity

A phone, and how much of this could not be used on one

Browse Source 
The sidebar was a 280px panel laid over the page below the phone breakpoint,
opened from first paint, with the only control that closed it underneath it --
and that control existed on /chat and on none of the seven other pages carrying
a sidebar, Settings included. It starts closed at that width now, slides, dims
the page behind it, and closes by tapping beside it, by Escape, or by its own
button, which is inside the drawer where it can be reached.

Everything a finger has to hit was 36px, or 28 for renaming a chat, every action
on a message and every panel's close button. Raising --control-h under a coarse
pointer is the only fix that reaches all forty of them, which is what that token
is for. The row and message actions were also hover-only, so on a phone they did
not exist at all.

Installing: the splash and the browser chrome follow the instance's theme rather
than always being Moria's near-black; there are screenshots, so the install
offer is a dialog rather than a one-line bar; a new release no longer takes over
a page somebody is reading; the notification badge is a silhouette rather than a
grey square; and a browser rotating its own subscription no longer ends
notifications for good.

Every request now says it is happening -- nothing did before, so anything slower
than a few milliseconds looked like a click that had not registered.

A chat can be archived. The column has been filtered on in four places since
folders arrived and written by nothing, which is what made it look built.

chat.css may contain media queries. The ban protected the composer toolbar from
being "fixed" with a breakpoint; that guarantee is asserted directly now, and
the old test would have passed a version of the file that wrapped the toolbar
without one.

scripts/shoot.py is the instrument all of this was found with: it renders a page
through TestClient into a real headless browser at a real size and refuses to
run if an asset URL was left pointing at testserver.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Homer
2026-09-25 13:39:35 +00:00
co-authored by Claude Opus 5
parent 92070d7879
commit 28390095a9
44 changed files with 2290 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lembas/web/static/css/chat.css
+107 -32
View File
@@ -22,11 +22,22 @@
gap: var(--sp-6);
}
/*
The new-chat screen.
Deliberately the only thing in the transcript that animates on arrival.
A message bubble must not: the steps container is replaced with `innerHTML`
up to twelve times a second while a reply streams, and the `done` frame
replaces the whole article -- so an entry animation on a bubble re-triggers
on every swap and what it produces is not an arrival, it is a flicker at
twelve hertz. This element renders once and is never swapped.
*/
.thread__intro {
display: grid;
place-items: center;
gap: var(--sp-3);
text-align: center;
animation: intro-rise var(--dur-3) var(--ease-out) both;
padding: var(--sp-12) 0 var(--sp-6);
}
@@ -153,7 +164,7 @@
/* --- Reasoning ------------------------------------------------------------ */
.reasoning {
margin: 0 0 var(--sp-3);
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--surface) 70%, transparent);
font-size: var(--text-sm);
@@ -268,7 +279,7 @@
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface);
color: var(--ink);
@@ -277,7 +288,7 @@
transition: background var(--transition-fast), border-color var(--transition-fast);
}
.suggestion:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.suggestion:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.suggestion:focus-visible { outline: var(--outline-w) solid var(--accent); outline-offset: 2px; }
.suggestion__name { font-weight: 600; font-size: var(--text-sm); }
.suggestion__note {
@@ -347,7 +358,7 @@
.reasoning__body {
padding: 0 var(--sp-3) var(--sp-3);
margin-left: var(--sp-2);
border-left: 2px solid var(--border-strong);
border-left: var(--border-w-thick) solid var(--border-strong);
padding-left: var(--sp-3);
white-space: pre-wrap;
color: var(--ink-muted);
@@ -358,8 +369,48 @@
scrollbar-width: thin;
}
/* Gentle pulse on the icon while thinking is still streaming. */
.reasoning--live .reasoning__icon { animation: think-pulse 1.6s ease-in-out infinite; }
/*
While a model is thinking.
This was an opacity fade on the icon, which at a glance is indistinguishable
from an icon that is simply a bit faint -- and "is it working or has it
stopped?" is the one question this element exists to answer. So it now turns
as well as breathes, and carries a ring that sweeps: rotation is the thing the
eye reads as *ongoing* rather than as decoration, and it is the difference
between a reply that is being written and one that has quietly died.
Two animations on two elements rather than one compound transform, because the
icon is a `<use>` of a shared sprite and the ring is a pseudo-element -- and
because `prefers-reduced-motion` should be able to stop the spin while leaving
the colour, which two separate declarations allow and one does not.
No timer, no class to add or remove, nothing to clean up: it stops existing
when the element does, which is the same reason the animated ellipsis is a
`content` keyframe.
*/
.reasoning--live .reasoning__icon {
animation: think-pulse var(--dur-slow) var(--ease-in-out) infinite,
think-turn calc(var(--dur-slow) * 2.5) linear infinite;
transform-origin: 50% 50%;
}
.reasoning--live .reasoning__label { position: relative; }
.reasoning--live .reasoning__label::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: var(--border-w);
background: linear-gradient(90deg, transparent, var(--leaf), transparent);
background-size: 50% 100%;
background-repeat: no-repeat;
animation: think-sweep calc(var(--dur-slow) * 1.5) var(--ease-in-out) infinite;
}
@keyframes think-turn { to { transform: rotate(360deg); } }
@keyframes think-sweep {
0% { background-position: -60% 0; }
100% { background-position: 160% 0; }
}
@keyframes think-pulse {
0%, 100% { opacity: 0.45; }
50% { opacity: 1; }
@@ -373,7 +424,7 @@
.tool-activity {
margin: 0 0 var(--sp-3);
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
background: color-mix(in srgb, var(--surface) 70%, transparent);
font-size: var(--text-sm);
@@ -419,7 +470,7 @@
flex-direction: column;
gap: 2px;
padding-left: var(--sp-3);
border-left: 2px solid var(--border-strong);
border-left: var(--border-w-thick) solid var(--border-strong);
min-width: 0;
}
.tool-result__title {
@@ -511,7 +562,7 @@
gap: var(--sp-3);
margin: var(--sp-3) 0;
padding: var(--sp-4);
border: 1px solid var(--accent);
border: var(--border-w) solid var(--accent);
border-radius: var(--radius-md);
background: var(--surface);
}
@@ -538,7 +589,7 @@
}
.interaction__question + .interaction__question {
padding-top: var(--sp-4);
border-top: 1px solid var(--border);
border-top: var(--border-w) solid var(--border);
}
.interaction__title { margin: 0; padding: 0; color: var(--ink); font-weight: 500; }
/* Stacked, one per line. A row of chips was fine while an option was two words
@@ -556,7 +607,7 @@
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border-strong);
border: var(--border-w) solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface-raised);
cursor: pointer;
@@ -577,7 +628,7 @@
background: var(--surface-active);
}
.interaction__option:has(input:focus-visible) {
outline: 2px solid var(--accent);
outline: var(--outline-w) solid var(--accent);
outline-offset: 2px;
}
@@ -618,7 +669,7 @@
align-items: center;
min-height: var(--control-h);
padding: 0 var(--sp-3);
border: 1px solid var(--border-strong);
border: var(--border-w) solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface-raised);
color: var(--ink-muted);
@@ -630,7 +681,7 @@
background: var(--surface-active);
color: var(--ink);
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip input:focus-visible + span { outline: var(--outline-w) solid var(--accent); outline-offset: 2px; }
.interaction__detail {
margin: 0;
padding: var(--sp-3);
@@ -773,6 +824,11 @@
}
.msg:hover .msg__actions,
.msg:focus-within .msg__actions { opacity: 1; }
/* Copy, regenerate, edit and read-aloud were hover-only, which on a phone means
they did not exist. See the same rule on `.nav-item__actions` in app.css. */
@media (hover: none) {
.msg__actions { opacity: 1; }
}
.msg__actions .is-copied { color: var(--success); }
/* --- A turn nobody typed ---------------------------------------------------
@@ -792,7 +848,7 @@
.msg--machine .msg__author { color: var(--ink-muted); font-weight: 500; }
.msg--user.msg--machine .msg__body--plain {
background: var(--bg-sunken);
border-inline-start: 2px solid var(--border-strong);
border-inline-start: var(--border-w-thick) solid var(--border-strong);
border-start-start-radius: var(--radius-sm);
border-end-start-radius: var(--radius-sm);
color: var(--ink-muted);
@@ -835,12 +891,12 @@
.msg__body blockquote {
margin: 0 0 var(--sp-4);
padding: var(--sp-1) var(--sp-4);
border-left: 3px solid var(--border-strong);
border-left: var(--border-w-accent) solid var(--border-strong);
color: var(--ink-muted);
font-style: italic;
}
.msg__body hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-5) 0; }
.msg__body hr { border: 0; border-top: var(--border-w) solid var(--border); margin: var(--sp-5) 0; }
.msg__body :not(pre) > code {
font-family: var(--font-mono);
@@ -848,7 +904,7 @@
padding: 0.13em 0.36em;
border-radius: var(--radius-sm);
background: var(--code-bg);
border: 1px solid var(--code-border);
border: var(--border-w) solid var(--code-border);
}
.msg__body table {
@@ -860,7 +916,7 @@
overflow-x: auto;
}
.msg__body th, .msg__body td {
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
padding: var(--sp-2) var(--sp-3);
text-align: left;
}
@@ -871,7 +927,7 @@
/* --- Code blocks ---------------------------------------------------------- */
.code-block {
margin: 0 0 var(--sp-4);
border: 1px solid var(--code-border);
border: var(--border-w) solid var(--code-border);
border-radius: var(--radius);
background: var(--code-bg);
overflow: hidden;
@@ -881,7 +937,7 @@
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--ink-faint);
border-bottom: 1px solid var(--code-border);
border-bottom: var(--border-w) solid var(--code-border);
background: color-mix(in srgb, var(--code-bg) 60%, var(--surface));
}
.code-block__pre {
@@ -947,7 +1003,7 @@
flex-direction: column;
gap: var(--sp-1);
padding: var(--sp-2);
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-xl);
background: var(--surface);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
@@ -1157,7 +1213,7 @@
while the header over it sat --sp-3 in. The padding goes inside the row and
the border stays on it, so the divider is still full-bleed -- which is what
makes a stack of rows read as a list rather than as paragraphs. */
.jobs__row { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.jobs__row { padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border); }
.jobs__row:last-child { border-bottom: 0; }
/* Which row's log is on screen. An inset shadow rather than a
@@ -1275,7 +1331,7 @@
max-height: min(20rem, 45vh);
overflow-y: auto;
scrollbar-width: thin;
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-lg);
background: var(--surface-raised);
box-shadow: var(--shadow-lg);
@@ -1286,7 +1342,7 @@
position: sticky;
bottom: 0;
padding: var(--sp-1) var(--sp-3);
border-top: 1px solid var(--border);
border-top: var(--border-w) solid var(--border);
background: var(--surface-raised);
color: var(--ink-faint);
font-size: var(--text-xs);
@@ -1321,7 +1377,7 @@
.sheet { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sheet td { padding: var(--sp-1) var(--sp-2); vertical-align: top; }
.sheet td:first-child { white-space: nowrap; color: var(--ink-muted); width: 1%; }
.sheet tr + tr td { border-top: 1px solid var(--border); }
.sheet tr + tr td { border-top: var(--border-w) solid var(--border); }
/* --- Folders -------------------------------------------------------------- */
.folder__row { padding-right: var(--sp-1); }
@@ -1377,7 +1433,7 @@
align-items: center;
gap: var(--sp-2);
padding: var(--sp-2);
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
background: var(--surface);
max-width: 20rem;
@@ -1452,7 +1508,7 @@
align-items: flex-start;
gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius);
background: var(--surface);
font-size: var(--text-sm);
@@ -1531,7 +1587,7 @@
display: inline-flex;
flex: none;
padding: 2px;
border: 1px solid var(--border);
border: var(--border-w) solid var(--border);
border-radius: var(--radius-full);
background: var(--bg-sunken);
}
@@ -1563,7 +1619,7 @@
box-shadow: var(--shadow-sm);
}
.segmented__option input:focus-visible + span {
outline: 2px solid var(--accent);
outline: var(--outline-w) solid var(--accent);
outline-offset: 1px;
}
/* The sidebar's copy fills its column rather than sitting at its content
@@ -1576,8 +1632,8 @@
.plan {
margin: var(--sp-3) 0;
padding: var(--sp-4);
border: 1px solid var(--border-strong);
border-left: 3px solid var(--accent);
border: var(--border-w) solid var(--border-strong);
border-left: var(--border-w-accent) solid var(--accent);
border-radius: var(--radius-md);
background: var(--surface);
}
@@ -1651,3 +1707,22 @@
padding: var(--sp-4) 0;
min-height: 2.5rem;
}
/* The shape of the turns being fetched, at the width they will arrive in. */
.history-sentinel__shape {
width: 100%;
max-width: var(--thread-max-width);
margin: 0 auto;
padding: 0 var(--sp-5);
}
/* The mark first, then the question, then the line under it -- a tenth of a
second apart, which is enough to read as one movement rather than three
things appearing at once. */
@keyframes intro-rise {
from { opacity: 0; transform: translateY(var(--sp-2)); }
to { opacity: 1; transform: none; }
}
.thread__intro > * { animation: intro-rise var(--dur-3) var(--ease-out) both; }
.thread__intro > *:nth-child(2) { animation-delay: 60ms; }
.thread__intro > *:nth-child(3) { animation-delay: 120ms; }