Files, open beside the conversation
A third side panel, built the way the terminal is and filled the way the inspector is: tabs holding open files. Project files over SFTP in an agent chat; notes, skills, knowledge documents, this chat's text attachments and its own scratch document everywhere. Read with pygments, edited in a plain textarea, saved with a conflict check. A bug found on the way in, and the reason this needed its own read path. `ssh.read_file` ends in `clean_output`, which strips ANSI escapes and decodes with errors="replace" -- right for the output of a command, and fatal for an editor: open a file containing an escape byte, press Save, and you have silently rewritten it with the escapes gone and every undecodable byte replaced by U+FFFD. `read_text`/`write_text` decode strictly, report binary rather than mangling it, carry an mtime:size token for a file that moved underneath, and refuse an oversize write rather than truncating -- `write_file` truncates because a model is told how many bytes it wrote, and somebody pressing Save is not. The model-facing pair is untouched: what it returns is a contract a model has been shown. A truncated read opens read-only for the mirror-image reason. Six sources go through one dispatch table, for the reason tool_labels.py is a table: six independently written permission checks is how one ends up written slightly differently, and that failure looks like editing somebody else's note. A save on a project file bypasses agent/policy.py, which makes it the fourth documented exception to "the modes do not govern the keyboard" and the first that writes. Same argument as the terminal panel -- whoever owns the credential could write the file with scp -- but the consequence is larger and is now said out loud rather than left to be inferred. The model opens tabs from the file tools it was already calling, so no new schema and no tokens. It never brings one to the front: an agent reads forty files in a long reply, and taking the screen each time would drag somebody through all of them and lose any edit in progress. Only the strip is streamed, guarded on truthiness so the frame can never blank itself -- an empty one would close every open tab, the approval card you could press twice with the sign reversed. Both halves are settled on the server, which is why canvas.js needs no guard against a swap at all. No vendored editor. CodeMirror 6 needs a bundler, which is hard rule 1; CodeMirror 5 would be a larger payload than xterm on every page, and xterm is the one heavy dependency precisely because it loads only where it can be used. So: server-rendered highlighting for reading, a textarea for writing, and the panel says there is no colour while you type rather than pretending. Also here: a scratch document per chat, with `scratch_write` at RISK_READ on plan_update's argument, and a test pinning the three numbers that decide a panel's width -- LAYOUT_BOUNDS drops an unknown variable silently, so a panel missing from it has a drag handle that works and forgets. Driven under a DOM stub and against the running application. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jaroslav Beneš
@@ -588,7 +588,8 @@ body.is-resizing {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
}
|
||||
body.is-resizing .terminal__screen { pointer-events: none; }
|
||||
body.is-resizing .terminal__screen,
|
||||
body.is-resizing .canvas__body { pointer-events: none; }
|
||||
|
||||
@media (max-width: 64rem) {
|
||||
/* A full-height overlay has no edge to drag, and no room to spare. */
|
||||
@@ -644,14 +645,179 @@ body.is-resizing .terminal__screen { pointer-events: none; }
|
||||
.terminal__last:empty { display: none; }
|
||||
.terminal__message--error { color: var(--danger); }
|
||||
|
||||
/* --- The canvas panel ------------------------------------------------------
|
||||
The same shape as the terminal beside it: a fixed-width column that hides
|
||||
with the `hidden` attribute, and shares .panel-head and .panel-resize. It
|
||||
sits nearest the conversation, being the widest and the one most likely to
|
||||
be read alongside it. */
|
||||
.canvas {
|
||||
width: var(--canvas-width);
|
||||
min-width: var(--canvas-width-min);
|
||||
max-width: 80vw;
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
background: var(--bg-sunken);
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
.canvas__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
flex: 1;
|
||||
}
|
||||
/* Where the file came from, beside its name. Shrinks and truncates rather than
|
||||
pushing the close button off the end. */
|
||||
.canvas__where {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: var(--ink-faint);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* One row, always. It scrolls sideways rather than wrapping -- the same rule
|
||||
the composer's toolbar is built around, and for the same reason: a strip
|
||||
that wraps to three lines takes the file with it. */
|
||||
.canvas__tabs {
|
||||
display: flex;
|
||||
flex: none;
|
||||
gap: var(--sp-1);
|
||||
padding: var(--sp-1) var(--sp-2);
|
||||
overflow-x: auto;
|
||||
scrollbar-width: thin;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.canvas__tab {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex: none;
|
||||
max-width: 14rem;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
.canvas__tab:hover { background: var(--surface); }
|
||||
.canvas__tab.is-active { background: var(--surface-raised); }
|
||||
.canvas__tab-open {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-1);
|
||||
min-width: 0;
|
||||
height: var(--control-h-sm);
|
||||
padding: 0 var(--sp-1) 0 var(--sp-2);
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--ink-muted);
|
||||
font-size: var(--text-xs);
|
||||
cursor: pointer;
|
||||
}
|
||||
.canvas__tab.is-active .canvas__tab-open { color: var(--ink); }
|
||||
.canvas__tab-label {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* Unsaved. A dot rather than a colour alone, which nobody can see in a theme
|
||||
they did not choose. */
|
||||
.canvas__tab-dot {
|
||||
flex: none;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: var(--radius-full);
|
||||
background: var(--accent);
|
||||
}
|
||||
.canvas__tab-close {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0 var(--sp-1);
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--ink-faint);
|
||||
cursor: pointer;
|
||||
}
|
||||
.canvas__tab-close:hover { color: var(--ink); }
|
||||
|
||||
/* One row, and the path box is the only thing allowed to shrink -- the same
|
||||
arrangement the composer's toolbar is built around. */
|
||||
.canvas__open {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
flex: none;
|
||||
padding: var(--sp-2) var(--sp-3);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.canvas__open-form { display: flex; gap: var(--sp-2); min-width: 0; flex: 1; }
|
||||
.canvas__path {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
height: var(--control-h-sm);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.canvas__body {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
padding: var(--sp-3);
|
||||
}
|
||||
.canvas__doc { display: flex; flex-direction: column; gap: var(--sp-2); }
|
||||
.canvas__actions { display: flex; align-items: center; gap: var(--sp-2); }
|
||||
.canvas__hint, .canvas__empty, .canvas__note {
|
||||
color: var(--ink-faint);
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
.canvas__note { display: flex; align-items: center; gap: var(--sp-2); }
|
||||
.canvas__code {
|
||||
margin: 0;
|
||||
padding: var(--sp-3);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--code-bg);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.6;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
.canvas__form { display: flex; flex-direction: column; gap: var(--sp-2); }
|
||||
/* No highlighting while typing, and the panel says so rather than pretending.
|
||||
A mirror behind this would be the composer's trick at two thousand lines,
|
||||
laying the buffer out twice on every keystroke. */
|
||||
.canvas__editor {
|
||||
width: 100%;
|
||||
min-height: 24rem;
|
||||
padding: var(--sp-3);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--code-bg);
|
||||
color: var(--ink);
|
||||
font-family: var(--font-mono);
|
||||
font-size: var(--text-xs);
|
||||
line-height: 1.6;
|
||||
white-space: pre;
|
||||
overflow-wrap: normal;
|
||||
resize: vertical;
|
||||
}
|
||||
.canvas__conflict { display: flex; flex-direction: column; gap: var(--sp-3); }
|
||||
.canvas__theirs summary { cursor: pointer; font-size: var(--text-xs); }
|
||||
|
||||
@media (max-width: 64rem) {
|
||||
.terminal {
|
||||
.terminal,
|
||||
.canvas {
|
||||
position: fixed;
|
||||
inset: 0 0 0 auto;
|
||||
width: min(var(--terminal-width), 100vw);
|
||||
z-index: var(--z-panel);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.terminal { width: min(var(--terminal-width), 100vw); }
|
||||
.canvas { width: min(var(--canvas-width), 100vw); }
|
||||
}
|
||||
|
||||
.topbar {
|
||||
|
||||
@@ -72,6 +72,13 @@
|
||||
re-wraps everything a program prints. */
|
||||
--terminal-width: 34rem;
|
||||
--terminal-width-min: 24rem;
|
||||
/* Wider again: a source line is longer than eighty columns once nothing is
|
||||
re-wrapping it, and this one holds prose as well. The minimum is 24rem =
|
||||
384px and must equal both `data-resize-min` in chat/_canvas.html and the
|
||||
lower bound in api/preferences.py:LAYOUT_BOUNDS -- a width outside those
|
||||
bounds is silently dropped, so the three are pinned equal by a test. */
|
||||
--canvas-width: 40rem;
|
||||
--canvas-width-min: 24rem;
|
||||
--thread-max-width: 48rem;
|
||||
--header-height: 3.5rem;
|
||||
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
/*
|
||||
The canvas panel's small amount of behaviour.
|
||||
|
||||
Almost all of it is htmx: the tabs post, the save posts, the panel swaps.
|
||||
Three things need JavaScript, and only three.
|
||||
|
||||
1. Tab inserts a tab character instead of leaving the field. Without it the
|
||||
one editor affordance whose absence is genuinely maddening is missing.
|
||||
2. The editor tracks whether it has been changed, so the tab shows a dot and
|
||||
so leaving the page with unsaved work warns.
|
||||
3. Opening the panel scrolls the active tab into view, since the strip
|
||||
scrolls sideways and the tab in front may be off the end of it.
|
||||
|
||||
What is *not* here is any guard against a swap taking the editor away. A
|
||||
model opening a file sends the tab strip and nothing else, and does not move
|
||||
the active tab -- both settled on the server, where they cannot be lost to a
|
||||
race.
|
||||
|
||||
Nothing here ever assigns innerHTML from a fetch: every swap is htmx's, and
|
||||
the content is a file off somebody else's disk.
|
||||
*/
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var panel = null;
|
||||
/* Whether the editor has been changed since it was last rendered. Module
|
||||
state rather than a data attribute, because the element it describes is
|
||||
replaced by every swap and an attribute would go with it. */
|
||||
var dirty = false;
|
||||
|
||||
function markDirty(on) {
|
||||
dirty = !!on;
|
||||
var dot = panel && panel.querySelector(".canvas__tab.is-active [data-canvas-dirty]");
|
||||
if (dot) dot.hidden = !dirty;
|
||||
}
|
||||
|
||||
/* --- Typing ------------------------------------------------------------- */
|
||||
function onInput(event) {
|
||||
if (event.target && event.target.matches("[data-canvas-editor]")) markDirty(true);
|
||||
}
|
||||
|
||||
function onKeydown(event) {
|
||||
var box = event.target;
|
||||
if (!box || !box.matches || !box.matches("[data-canvas-editor]")) return;
|
||||
if (event.key !== "Tab" || event.ctrlKey || event.altKey || event.metaKey) return;
|
||||
/* Shift+Tab still leaves the field, which is the only way out of it for
|
||||
somebody using the keyboard. */
|
||||
if (event.shiftKey) return;
|
||||
|
||||
event.preventDefault();
|
||||
var start = box.selectionStart;
|
||||
var end = box.selectionEnd;
|
||||
box.value = box.value.slice(0, start) + "\t" + box.value.slice(end);
|
||||
box.selectionStart = box.selectionEnd = start + 1;
|
||||
markDirty(true);
|
||||
}
|
||||
|
||||
/* --- Swaps -------------------------------------------------------------- */
|
||||
/* There is deliberately nothing here guarding the editor against a swap.
|
||||
A model opening a file sends the tab *strip* and nothing else -- the body
|
||||
is never pushed -- and `canvas.open_tab` does not move the active tab for
|
||||
a model, so the file in front and the field being typed in both stay put.
|
||||
That is settled on the server, where it cannot be lost to a race. */
|
||||
function onAfterSwap(event) {
|
||||
if (!panel || !event.target || !panel.contains(event.target)) return;
|
||||
/* The server has just rendered what is stored, so nothing is unsaved until
|
||||
somebody types again. */
|
||||
markDirty(false);
|
||||
showActiveTab();
|
||||
}
|
||||
|
||||
function showActiveTab() {
|
||||
var active = panel && panel.querySelector(".canvas__tab.is-active");
|
||||
if (active && active.scrollIntoView) {
|
||||
active.scrollIntoView({ block: "nearest", inline: "nearest" });
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Leaving with unsaved work ------------------------------------------ */
|
||||
function onBeforeUnload(event) {
|
||||
if (!dirty) return;
|
||||
event.preventDefault();
|
||||
/* The browser shows its own wording; returning a string is what makes older
|
||||
ones show anything at all. */
|
||||
event.returnValue = "";
|
||||
return "";
|
||||
}
|
||||
|
||||
/* --- Wiring ------------------------------------------------------------- */
|
||||
function start() {
|
||||
panel = document.querySelector("[data-canvas]");
|
||||
if (!panel) return;
|
||||
|
||||
panel.addEventListener("input", onInput);
|
||||
panel.addEventListener("keydown", onKeydown);
|
||||
panel.addEventListener("lembas:toggle", function (event) {
|
||||
if (event.detail && event.detail.open) showActiveTab();
|
||||
});
|
||||
|
||||
/* On document, not on the panel: htmx fires these on the element being
|
||||
swapped, and by the time afterSwap runs the old node is gone. */
|
||||
document.body.addEventListener("htmx:afterSwap", onAfterSwap);
|
||||
window.addEventListener("beforeunload", onBeforeUnload);
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", start);
|
||||
} else {
|
||||
start();
|
||||
}
|
||||
})();
|
||||
@@ -41,6 +41,7 @@
|
||||
{ keys: "Alt + M", what: "Dictate" },
|
||||
{ keys: "Alt + R", what: "Read the last reply aloud" },
|
||||
{ keys: "Alt + 1 … 4", what: "Manual, Edit, Auto, Plan" },
|
||||
{ keys: "Alt + E", what: "Canvas" },
|
||||
{ keys: "Alt + T", what: "Terminal" },
|
||||
{ keys: "Alt + I", what: "Inspector" },
|
||||
{ keys: "Alt + B", what: "Sidebar" },
|
||||
@@ -135,6 +136,15 @@
|
||||
when: function () { return !!chat() && isAgent(); },
|
||||
run: function () { reindex(); }
|
||||
},
|
||||
{
|
||||
name: "canvas",
|
||||
summary: "Show or hide the canvas",
|
||||
/* Gated, like the other two panels. An ungated command on a page with no
|
||||
panel does not merely fail -- it stops being a command, and the message
|
||||
is sent as written. */
|
||||
when: function () { return !!el("#canvas"); },
|
||||
run: function () { toggle("#canvas", "side"); }
|
||||
},
|
||||
{
|
||||
name: "terminal",
|
||||
summary: "Show or hide the terminal",
|
||||
@@ -526,6 +536,13 @@
|
||||
return;
|
||||
}
|
||||
|
||||
/* E for editor, not C: Ctrl/Cmd+C is too near for comfort, and Alt+D is
|
||||
the address bar in two browsers -- a shortcut the browser wins looks
|
||||
broken. */
|
||||
if (event.code === "KeyE" && el("#canvas")) {
|
||||
event.preventDefault();
|
||||
return toggle("#canvas", "side");
|
||||
}
|
||||
if (event.code === "KeyT" && el("#terminal")) {
|
||||
event.preventDefault();
|
||||
return toggle("#terminal", "side");
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
{% from "_macros.html" import icon %}
|
||||
{#
|
||||
The canvas panel: files, open beside the conversation.
|
||||
|
||||
Built the way the terminal panel is -- a child of .shell, `hidden` until a
|
||||
toggle removes it, its own drag handle, the shared panel head. Filled the way
|
||||
the *inspector* is, though: `hx-trigger="intersect once"`, because a hidden
|
||||
element never intersects, so a panel nobody opens costs one element and no
|
||||
round trip to somebody's machine. There is nothing heavy to construct here,
|
||||
which is the whole reason it does not need the terminal's lazy-build dance.
|
||||
|
||||
Everything shown inside came off somebody else's disk, or out of a model. It
|
||||
is rendered through pygments (which escapes), through render_markdown (the one
|
||||
path allowed to emit HTML), or into a <textarea>, whose contents Jinja escapes
|
||||
and which cannot contain markup by construction.
|
||||
#}
|
||||
<aside class="canvas" id="canvas" hidden aria-label="Canvas"
|
||||
data-canvas
|
||||
data-chat="{{ chat.id }}"
|
||||
data-resize-target>
|
||||
{# The left edge, dragged. A separator rather than a decoration: it takes
|
||||
focus and answers the arrow keys, or the panel is only resizable with a
|
||||
mouse and the grip is a focus trap that does nothing. #}
|
||||
<div class="panel-resize" data-resize="--canvas-width" data-resize-min="384"
|
||||
role="separator" aria-orientation="vertical" tabindex="0"
|
||||
aria-label="Resize the canvas">
|
||||
{{ icon("grip", "icon--sm") }}
|
||||
</div>
|
||||
|
||||
<div class="canvas__inner" id="canvas-inner"
|
||||
hx-get="/api/chats/{{ chat.id }}/canvas"
|
||||
hx-trigger="intersect once"
|
||||
hx-target="this" hx-swap="innerHTML">
|
||||
<div class="panel-head">
|
||||
<h2 class="panel-head__title">
|
||||
{{ icon("file-text", "icon--sm") }}
|
||||
<span>Canvas</span>
|
||||
</h2>
|
||||
<button class="btn btn--icon btn--sm" type="button" data-toggle="#canvas"
|
||||
aria-label="Close canvas">
|
||||
{{ icon("x", "icon--sm") }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="canvas__body">
|
||||
<p class="canvas__empty">Opening…</p>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -0,0 +1,52 @@
|
||||
{% from "_macros.html" import icon %}
|
||||
{#
|
||||
The file moved between being opened and being saved -- another editor, a
|
||||
build, a checkout.
|
||||
|
||||
Three answers, and none of them is silent. Never save over somebody else's
|
||||
change without saying so; never throw away what was typed here without saying
|
||||
so either. What you wrote is held in the form below, so Overwrite is one
|
||||
click and not a retype.
|
||||
|
||||
Sent at 200 rather than 409 on purpose: htmx does not swap an error status,
|
||||
and a card offering three buttons cannot be offered from a response the panel
|
||||
will not render.
|
||||
#}
|
||||
<div class="canvas__conflict">
|
||||
<div class="alert alert--warning" role="alert">
|
||||
{{ icon("warning", "alert__icon") }}
|
||||
<span>
|
||||
<strong>{{ conflict.title }}</strong> changed after you opened it, so
|
||||
nothing was written. Your version is below.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<details class="canvas__theirs">
|
||||
<summary>What is there now</summary>
|
||||
<pre class="canvas__code"><code>{{ conflict.text }}</code></pre>
|
||||
</details>
|
||||
|
||||
<form class="canvas__form"
|
||||
hx-post="/api/chats/{{ chat.id }}/canvas/save"
|
||||
hx-target="#canvas-inner" hx-swap="innerHTML">
|
||||
<input type="hidden" name="key" value="{{ conflict.key }}">
|
||||
{# Deliberately empty. An empty token is what tells `_check_stamp` to write
|
||||
regardless, which is exactly what Overwrite means -- somebody has now
|
||||
been shown both versions and chosen. #}
|
||||
<input type="hidden" name="revision" value="">
|
||||
<label class="visually-hidden" for="canvas-mine">Your version</label>
|
||||
<textarea class="canvas__editor" id="canvas-mine" name="text"
|
||||
spellcheck="false" data-canvas-editor>{{ mine }}</textarea>
|
||||
<div class="canvas__actions">
|
||||
<button class="btn btn--danger btn--sm" type="submit">
|
||||
{{ icon("check", "icon--sm") }} Overwrite with mine
|
||||
</button>
|
||||
<button class="btn btn--sm" type="button"
|
||||
hx-post="/api/chats/{{ chat.id }}/canvas/tabs"
|
||||
hx-vals='{"key": {{ conflict.key | tojson }}}'
|
||||
hx-target="#canvas-inner" hx-swap="innerHTML">
|
||||
Discard mine and reload
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -0,0 +1,74 @@
|
||||
{% from "_macros.html" import icon %}
|
||||
{#
|
||||
One file, read or edited.
|
||||
|
||||
A read/edit split rather than a highlighting editor, because there is no
|
||||
vendored code editor and adding one would be a build step (hard rule 1) or a
|
||||
payload larger than xterm's on every page in the application -- and xterm is
|
||||
called out as the one heavy dependency precisely because it loads only on a
|
||||
chat that can open a terminal.
|
||||
|
||||
So: pygments server-side for reading, and a plain <textarea> for writing. A
|
||||
textarea's value is text by construction, which is the same argument as
|
||||
"attachments are served, never linked" -- pick the shape where the failure
|
||||
cannot happen rather than the shape where it has to be prevented.
|
||||
|
||||
`rendered` is the ONE `|safe` here. It is either pygments output, which
|
||||
escapes what it is given, or render_markdown, which is the single path in this
|
||||
application allowed to emit HTML.
|
||||
#}
|
||||
<div class="canvas__doc" x-data="{ editing: false }" data-canvas-doc="{{ doc.key }}">
|
||||
|
||||
{% if doc.binary %}
|
||||
<p class="canvas__note">
|
||||
{{ icon("warning", "icon--sm") }}
|
||||
This does not look like text, so there is nothing to show and nothing that
|
||||
could safely be saved back.
|
||||
</p>
|
||||
{% elif doc.truncated %}
|
||||
<p class="canvas__note">
|
||||
{{ icon("warning", "icon--sm") }}
|
||||
Showing the beginning only. Saving from here would delete the rest, so this
|
||||
one is read-only.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if doc.editable %}
|
||||
<div class="canvas__actions" x-show="!editing">
|
||||
<button class="btn btn--sm" type="button"
|
||||
@click="editing = true; $nextTick(() => $refs.editor.focus())">
|
||||
{{ icon("pencil", "icon--sm") }} Edit
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="canvas__view" {% if doc.editable %}x-show="!editing"{% endif %}>
|
||||
{% if rendered %}
|
||||
{{ rendered | safe }}
|
||||
{% else %}
|
||||
<p class="canvas__empty">This file is empty.</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if doc.editable %}
|
||||
<form class="canvas__form" x-show="editing" x-cloak
|
||||
hx-post="/api/chats/{{ chat.id }}/canvas/save"
|
||||
hx-target="#canvas-inner" hx-swap="innerHTML">
|
||||
<input type="hidden" name="key" value="{{ doc.key }}">
|
||||
{# What version this was opened at. The save compares it and refuses a file
|
||||
that moved underneath, rather than overwriting somebody else's work. #}
|
||||
<input type="hidden" name="revision" value="{{ doc.revision }}">
|
||||
<label class="visually-hidden" for="canvas-editor">{{ doc.title }}</label>
|
||||
<textarea class="canvas__editor" id="canvas-editor" name="text"
|
||||
spellcheck="false" x-ref="editor"
|
||||
data-canvas-editor>{{ doc.text }}</textarea>
|
||||
<div class="canvas__actions">
|
||||
<button class="btn btn--primary btn--sm" type="submit">
|
||||
{{ icon("check", "icon--sm") }} Save
|
||||
</button>
|
||||
<button class="btn btn--sm" type="button" @click="editing = false">Cancel</button>
|
||||
<span class="canvas__hint">No colour while you type. Tab inserts a tab.</span>
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,87 @@
|
||||
{% from "_macros.html" import icon %}
|
||||
{#
|
||||
The head, the tab strip and whichever file is in front. Everything the panel
|
||||
swaps, in one fragment.
|
||||
|
||||
Both together, always: rendering only the body would leave the strip showing a
|
||||
tab that is no longer there after a close, and rendering only the strip would
|
||||
leave the previous file on screen after a switch.
|
||||
#}
|
||||
<div class="panel-head">
|
||||
<h2 class="panel-head__title">
|
||||
{{ icon("file-text", "icon--sm") }}
|
||||
<span>{{ doc.title if doc else "Canvas" }}</span>
|
||||
{% if doc and doc.subtitle %}
|
||||
<span class="canvas__where" title="{{ doc.subtitle }}">{{ doc.subtitle }}</span>
|
||||
{% endif %}
|
||||
</h2>
|
||||
|
||||
{% if doc and doc.key.startswith("scratch:") %}
|
||||
{# A copy, like every other attach path -- a transcript must not change
|
||||
because the pad was edited afterwards. #}
|
||||
<button class="btn btn--sm" type="button"
|
||||
hx-post="/api/files/from-scratch"
|
||||
hx-vals='{"chat_id": "{{ chat.id }}"}'
|
||||
hx-target="#attachments" hx-swap="beforeend"
|
||||
title="Put this in the message box as an attachment">
|
||||
{{ icon("attach", "icon--sm") }} Attach
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
<button class="btn btn--icon btn--sm" type="button" data-toggle="#canvas"
|
||||
aria-label="Close canvas">
|
||||
{{ icon("x", "icon--sm") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% include "chat/_canvas_tabs.html" %}
|
||||
|
||||
{#
|
||||
Opening one by hand. A path box rather than a file browser: the model opens
|
||||
what it touches, which is the path this feature is really for, and a second
|
||||
directory browser beside the one the composer already has would be a lot of
|
||||
interface for the rarer case. A relative path resolves against the project
|
||||
directory, exactly as it does for the model.
|
||||
#}
|
||||
<div class="canvas__open">
|
||||
{% if canvas_agent %}
|
||||
{# Its own form. A second control named `key` in the same one -- the Scratch
|
||||
button below -- would send two values for one field, and which of them the
|
||||
server took would be an accident. #}
|
||||
<form class="canvas__open-form"
|
||||
hx-post="/api/chats/{{ chat.id }}/canvas/tabs"
|
||||
hx-target="#canvas-inner" hx-swap="innerHTML">
|
||||
<input class="input input--mono canvas__path" type="text" name="key"
|
||||
placeholder="agent:path/to/file" aria-label="Open a file"
|
||||
autocomplete="off" spellcheck="false">
|
||||
<button class="btn btn--sm" type="submit">Open</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<button class="btn btn--sm" type="button"
|
||||
hx-post="/api/chats/{{ chat.id }}/canvas/tabs"
|
||||
hx-vals='{"key": "scratch:{{ chat.id }}"}'
|
||||
hx-target="#canvas-inner" hx-swap="innerHTML"
|
||||
title="This chat's own working document">
|
||||
{{ icon("file-text", "icon--sm") }} Scratch
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="canvas__body">
|
||||
{% if error %}
|
||||
<div class="alert alert--error" role="alert">
|
||||
{{ icon("warning", "alert__icon") }} <span>{{ error }}</span>
|
||||
</div>
|
||||
{% elif conflict %}
|
||||
{% include "chat/_canvas_conflict.html" %}
|
||||
{% elif doc %}
|
||||
{% include "chat/_canvas_doc.html" %}
|
||||
{% else %}
|
||||
<p class="canvas__empty">
|
||||
Nothing open. A file the model reads or writes appears here, and
|
||||
{% if canvas_agent %}the @ menu can put one here too.{% else %}notes,
|
||||
skills and this chat's own scratch document can be opened from the @ menu.
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -0,0 +1,38 @@
|
||||
{% from "_macros.html" import icon %}
|
||||
{#
|
||||
One row, always, and it scrolls sideways rather than wrapping -- the same rule
|
||||
the composer's toolbar is built around. A strip that wraps to three lines on a
|
||||
narrow panel takes the file with it.
|
||||
|
||||
A tab is a button posting to a route that serves POST. Not a link: `GET` never
|
||||
moves the active tab, because there is no CSRF token here and the cookie is
|
||||
SameSite Lax, so a state-changing GET is a link somebody can be made to follow.
|
||||
#}
|
||||
{# `oob` is set only when this arrives on the reply's SSE stream, where it has
|
||||
to find its own way to the panel rather than being swapped into the bubble
|
||||
the stream is writing. Out of band, exactly as the `done` frame's title is. #}
|
||||
<div class="canvas__tabs" role="tablist" data-canvas-tabs id="canvas-tabs"
|
||||
{% if oob %}hx-swap-oob="true"{% endif %}>
|
||||
{% for tab in tabs %}
|
||||
<div class="canvas__tab {{ 'is-active' if tab.key == active }}"
|
||||
data-canvas-tab="{{ tab.key }}">
|
||||
<button class="canvas__tab-open" type="button" role="tab"
|
||||
aria-selected="{{ 'true' if tab.key == active else 'false' }}"
|
||||
hx-post="/api/chats/{{ chat.id }}/canvas/tabs"
|
||||
hx-vals='{"key": {{ tab.key | tojson }}}'
|
||||
hx-target="#canvas-inner" hx-swap="innerHTML"
|
||||
title="{{ tab.key }}">
|
||||
{{ icon("file-text", "icon--sm") }}
|
||||
<span class="canvas__tab-label">{{ tab.title }}</span>
|
||||
<span class="canvas__tab-dot" data-canvas-dirty hidden aria-hidden="true"></span>
|
||||
</button>
|
||||
<button class="canvas__tab-close" type="button"
|
||||
hx-post="/api/chats/{{ chat.id }}/canvas/tabs/close"
|
||||
hx-vals='{"key": {{ tab.key | tojson }}}'
|
||||
hx-target="#canvas-inner" hx-swap="innerHTML"
|
||||
aria-label="Close {{ tab.title }}">
|
||||
{{ icon("x", "icon--sm") }}
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
@@ -284,5 +284,17 @@
|
||||
{% if streaming %}
|
||||
{# Receives the finished bubble and replaces this whole article with it. #}
|
||||
<div hidden sse-swap="done" hx-target="#msg-{{ message.id }}" hx-swap="outerHTML"></div>
|
||||
|
||||
{#
|
||||
A file the model has opened. The frame carries the canvas tab strip marked
|
||||
`hx-swap-oob`, so it lands in the panel rather than here -- this element is
|
||||
only somewhere for it to arrive. `hx-swap="none"` because the payload has no
|
||||
business in the bubble; htmx extracts out-of-band fragments before it
|
||||
considers the main swap, so "none" does not stop them.
|
||||
|
||||
Only the strip is ever pushed. The file's contents would be a lot of bytes
|
||||
on every version bump and would overwrite a textarea somebody is typing in.
|
||||
#}
|
||||
<div hidden sse-swap="canvas" hx-swap="none"></div>
|
||||
{% endif %}
|
||||
</article>
|
||||
|
||||
@@ -89,6 +89,18 @@
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if canvas_enabled %}
|
||||
{# Nearest the conversation of the three, being the widest and the one
|
||||
most likely to be open beside it. All three share one slot: at
|
||||
1280px the sidebar plus two panels leaves about seventy pixels of
|
||||
chat. #}
|
||||
<button class="btn btn--icon" type="button" aria-label="Canvas"
|
||||
title="Open a file beside the conversation"
|
||||
aria-expanded="false" data-toggle="#canvas" data-toggle-group="side">
|
||||
{{ icon("file-text") }}
|
||||
</button>
|
||||
{% endif %}
|
||||
|
||||
{% if terminal_enabled %}
|
||||
{# To the left of the inspector, and never open beside it: see the
|
||||
toggle group in app.js. #}
|
||||
@@ -316,8 +328,12 @@
|
||||
{% endif %}
|
||||
</main>
|
||||
|
||||
{# Third and fourth children of .shell, mirroring the sidebar opposite. The
|
||||
terminal comes first so it sits to the left of the inspector. #}
|
||||
{# The panels, mirroring the sidebar opposite, in the order they sit on
|
||||
screen: the canvas nearest the conversation, then the terminal, then the
|
||||
inspector. Only ever one of them is open -- see the toggle group. #}
|
||||
{% if canvas_enabled %}
|
||||
{% include "chat/_canvas.html" %}
|
||||
{% endif %}
|
||||
{% if terminal_enabled %}
|
||||
{% include "chat/_terminal.html" %}
|
||||
{% endif %}
|
||||
@@ -328,6 +344,9 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{% if canvas_enabled %}
|
||||
<script src="{{ url_for('static', path='js/canvas.js') }}" defer></script>
|
||||
{% endif %}
|
||||
{% if terminal_enabled %}
|
||||
{# Only where it can be used. xterm is nearly three times everything else
|
||||
vendored, so a plain chat must never load it. #}
|
||||
|
||||
Reference in New Issue
Block a user