engineering/lumbda
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

repl: terminal-style transcript — drop card chrome

Browse source 
Reads as one continuous stream now. Each entry is just:
  λ> <input>
  <output>   ; tier · NNms

No left border, no boxed cards, no side-column tier label. Output
indents under the prompt (3ch) using monospace ch units. Tier+time
render as a Lisp-comment-style suffix in muted color.

Prompt bar: borderless textarea on the code-bg surface so the input
visually joins the transcript above. Placeholder cut to "(+ 1 2)" —
the surrounding text already explains the semantics.

Multi-line inputs keep prompt continuation marks ("..").
This commit is contained in:
russell@unturf.com 2026-06-14 13:17:17 -04:00
parent b3bcff5f08
commit eb58cdc33c
No known key found for this signature in database
6 changed files with 132 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

74
www/repl/repl.css
View file

@ -168,81 +168,85 @@ body.repl {
/* ─── Transcript ───────────────────────────────────────────────── */
/* Transcript reads as one continuous terminal stream — no card chrome.
* Prompt + output stack with minimal vertical space, tier+time annotate
* as a subtle comment-style suffix. */
.transcript-wrap {
overflow: auto;
padding: 1rem;
padding: 0.5rem 1rem 0;
background: var(--code-bg);
}
.transcript {
display: grid;
gap: 0.6rem;
font-family: var(--mono);
font-size: 0.9em;
line-height: 1.5;
font-size: 0.92em;
line-height: 1.45;
max-width: 90rem;
margin: 0 auto;
padding-bottom: 0.4rem;
}
.transcript .entry {
display: grid;
gap: 0.25rem;
padding: 0.4rem 0.6rem;
border-left: 2px solid var(--rule);
margin: 0;
padding: 0;
}
.transcript .entry .prompt-line {
color: var(--green);
white-space: pre-wrap;
word-break: break-word;
}
.transcript .entry .prompt-line .sigil {
display: inline-block;
width: 3ch;
opacity: 0.7;
}
.transcript .entry .tier-output {
display: grid;
grid-template-columns: 7rem 1fr;
gap: 0.6rem;
padding: 0.25rem 0;
border-top: 1px dashed var(--rule);
}
.transcript .entry .tier-output:first-of-type { border-top: none; }
.transcript .entry .tier-label {
color: var(--muted);
font-size: 0.7em;
text-transform: uppercase;
letter-spacing: 0.08em;
padding-top: 0.15rem;
display: block;
padding: 0;
color: var(--fg);
}
.transcript .entry .tier-result {
white-space: pre-wrap;
word-break: break-word;
padding-left: 3ch; /* line up under "λ> " */
}
.transcript .entry .tier-time {
.transcript .entry .tier-meta {
color: var(--muted);
font-size: 0.8em;
margin-left: 0.4rem;
font-size: 0.78em;
margin-left: 0.6em;
user-select: none;
}
.transcript .entry .tier-meta::before {
content: "; "; /* render as a lisp comment */
color: var(--muted);
opacity: 0.6;
}
.transcript .entry.error .tier-result { color: var(--err); }
.transcript .entry + .entry { margin-top: 0.4rem; }
/* ─── Prompt bar ───────────────────────────────────────────────── */
.prompt-bar {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 0.5rem;
align-items: end;
padding: 0.5rem 1rem 0.8rem;
gap: 0.4rem;
align-items: center;
padding: 0.3rem 1rem;
border-top: 1px solid var(--rule);
background: var(--bg);
background: var(--code-bg);
}
.prompt-bar .prompt-sigil {
color: var(--green);
font-weight: 600;
padding: 0.4rem 0 0;
font-size: 0.95em;
}
.prompt-bar textarea {
resize: none;
background: var(--code-bg);
border: 1px solid var(--rule);
border: none;
color: var(--fg);
padding: 0.45rem 0.7rem;
padding: 0.25rem 0;
font-family: var(--mono);
font-size: 0.9em;
border-radius: 3px;
min-height: 1.6em;
font-size: 0.92em;
min-height: 1.5em;
max-height: 30vh;
min-width: 0;
}