chamba 0.6.0 → 0.7.0

package/templates/webterm/public/index.html

@@ -27,34 +27,58 @@
             <span id="note"></span>
         </div>
 
-        <!-- The web pane, rendered by app/pane.js: the pages this session's agent published, with the chips
-             bar and the counter drawn out here by the interface, and the page itself inside a sandboxed
-             frame. Both it and its drag handle are hidden until the session has a page. -->
+        <!-- The web pane, rendered by app/pane-shell.js: the tool tabs and the two width controls are the
+             pane's own chrome, and one panel per tool sits under them - Pages (app/pane.js) and Specs
+             (app/specs-host.js). Both the pane and its drag handle are hidden until there is something in it. -->
         <div id="grip" hidden></div>
         <aside id="pane" hidden>
-            <div id="pagebar">
-                <button type="button" id="pane-prev" class="pane-nav" title="Older pages" aria-label="Older pages" hidden>&#8249;</button>
-                <div id="chips"></div>
-                <button type="button" id="pane-next" class="pane-nav" title="Newer pages" aria-label="Newer pages" hidden>&#8250;</button>
-                <span id="page-count"></span>
-                <!-- How big the shown page is drawn, for this browser. Interface furniture: no agent knows it
-                     exists, and a page written before it scales like any other. -->
-                <span id="page-size">
-                    <button type="button" id="page-smaller" title="Smaller text" aria-label="Smaller text">&#8722;</button>
-                    <span id="page-size-val"></span>
-                    <button type="button" id="page-bigger" title="Larger text" aria-label="Larger text">+</button>
+            <!-- The pane's own bar: which tool is open, and how wide the pane is. Nothing in it belongs to a
+                 tool, so a tool can never move the pane or say which tool the user is looking at. -->
+            <div id="panebar">
+                <div id="tool-tabs"></div>
+                <span id="pane-ctl">
+                    <!-- The pane's edge to the far wall, and back again. -->
+                    <button type="button" id="pane-full" class="pane-nav" title="Full width" aria-label="Full width">
+                        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <path d="M4 5v14" />
+                            <path d="M20 12H9" />
+                            <path d="M13 8l-4 4 4 4" />
+                        </svg>
+                    </button>
+                    <!-- An arrow into the pane's own edge: put it away, that way. Inline because this bar is
+                         static chrome, unlike the session bar's icons, which are drawn per frame. -->
+                    <button type="button" id="pane-collapse" class="pane-nav" title="Collapse the pane" aria-label="Collapse the pane">
+                        <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                            <path d="M4 12h11" />
+                            <path d="M11 8l4 4-4 4" />
+                            <path d="M20 5v14" />
+                        </svg>
+                    </button>
                 </span>
-                <!-- An arrow into the pane's own edge: put it away, that way. Inline because this bar is static
-                     chrome, unlike the session bar's icons, which are drawn per frame. -->
-                <button type="button" id="pane-collapse" class="pane-nav" title="Collapse the web pane" aria-label="Collapse the web pane">
-                    <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-                        <path d="M4 12h11" />
-                        <path d="M11 8l4 4-4 4" />
-                        <path d="M20 5v14" />
-                    </svg>
-                </button>
             </div>
-            <div id="page-doc"></div>
+
+            <!-- Pages: the pages this session's agent published, with the chips bar and the counter drawn out
+                 here by the interface, and the page itself inside a sandboxed frame. -->
+            <div id="tool-pages" class="tool-panel">
+                <div id="pagebar">
+                    <button type="button" id="pane-prev" class="pane-nav" title="Older pages" aria-label="Older pages" hidden>&#8249;</button>
+                    <div id="chips"></div>
+                    <button type="button" id="pane-next" class="pane-nav" title="Newer pages" aria-label="Newer pages" hidden>&#8250;</button>
+                    <span id="page-count"></span>
+                    <!-- How big the shown page is drawn, for this browser. Interface furniture: no agent knows
+                         it exists, and a page written before it scales like any other. -->
+                    <span id="page-size">
+                        <button type="button" id="page-smaller" title="Smaller text" aria-label="Smaller text">&#8722;</button>
+                        <span id="page-size-val"></span>
+                        <button type="button" id="page-bigger" title="Larger text" aria-label="Larger text">+</button>
+                    </span>
+                </div>
+                <div id="page-doc"></div>
+            </div>
+
+            <!-- Specs: the spec workspace, in a frame of its own. -->
+            <div id="tool-specs" class="tool-panel" hidden></div>
+
             <button type="button" id="spine" title="Open the web pane" aria-label="Open the web pane">
                 <span class="label"><span id="spine-badge" hidden></span> Web pane</span>
             </button>
@@ -80,10 +104,10 @@
                 <!-- The one button that sends without being written: it types a fixed sentence into the
                      session, through the same paste path as anything else, and leaves the box alone. Its
                      place in the markup is what puts it above Send: the block fills row by row. -->
-                <button type="button" id="ask-page" class="icon-btn" title="Put the last answer in the web pane"
-                        aria-label="Put the last answer in the web pane">
+                <button type="button" id="ask-page" class="icon-btn" title="Put the last answer on a page"
+                        aria-label="Put the last answer on a page">
                     <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">
-                        <title>Put the last answer in the web pane</title>
+                        <title>Put the last answer on a page</title>
                         <rect x="3" y="4" width="18" height="16" rx="2" />
                         <path d="M14 4v16" />
                         <path d="M17 9h1" />

package/templates/webterm/public/styles.css

@@ -527,6 +527,13 @@ body {
     display: flex;
     flex: 1;
     min-height: 0;
+    /* Stated once because two rules need it: the grip is this wide, and a full-width pane is the row less
+       the grip - which is what keeps the grip on the screen with the terminal squeezed out behind it. */
+    --grip-width: 12px;
+    /* The terminal's own inset, on both sides. A margin does not shrink with the box it is on, so a
+       full-width pane has to leave it as well or the row is wider than the window and the pane's own
+       controls, which sit at its far end, go off the screen. */
+    --term-gutter: 24px;
 }
 
 #termwrap {
@@ -537,7 +544,7 @@ body {
     /* Spacing via margin, not padding: FitAddon measures the wrapper height but does not subtract
        its padding, so wrapper padding makes it propose one row too many and the last line clips.
        Margin gives the same visual inset (page and terminal share a background) without breaking fit. */
-    margin: 8px 12px;
+    margin: 8px calc(var(--term-gutter) / 2);
 }
 
 #term {
@@ -595,7 +602,7 @@ body {
 #grip {
     position: relative;
     flex: none;
-    width: 12px;
+    width: var(--grip-width);
     background: var(--panel);
     border-left: 1px solid var(--border);
     border-right: 1px solid var(--border);
@@ -626,8 +633,9 @@ body.dragging {
     user-select: none;
 }
 
-/* The width is app/pane.js's, in a custom property so the two rules that must win - the collapsed spine and
-   the narrow-screen layout - still do. The value here is what shows before the first drag. */
+/* The width is app/pane-shell.js's, in a custom property so the three rules that must win - the collapsed
+   spine, the full row and the narrow-screen layout - still do. The value here is what shows before the first
+   drag. */
 #pane {
     display: flex;
     flex: none;
@@ -637,6 +645,16 @@ body.dragging {
     background: var(--bg);
 }
 
+/* The far end of the range: the pane takes the row and the terminal is squeezed out of it rather than hidden,
+   so the terminal keeps its place in the layout and comes back at whatever the next width is. The grip is
+   what the row leaves over, which is what keeps the way back on the screen, and the terminal's gutter is left
+   as well - it is a margin, so it stays whatever the box it is on shrinks to, and taking the row without it
+   would push the pane's own controls past the right edge of the window. Both are the same background, so what
+   the terminal leaves behind reads as part of the pane. */
+#pane.full {
+    width: calc(100% - var(--grip-width) - var(--term-gutter));
+}
+
 /* A page arrived and opened itself: one pulse of the workspace colour along the pane's own edge, and nothing
    moves. Inset, so it is drawn over the pane rather than pushing the layout about, and over the frame's edge
    rather than under it. ARRIVAL_MS in app/pane.js must match the duration - it is what takes the class off
@@ -664,20 +682,8 @@ body.dragging {
     }
 }
 
-/* The pagination bar: this session's pages as chips, the arrows for a bar too narrow to hold them, and where
-   in the history the open page sits. Drawn by the interface, outside the page's frame, so it always says the
-   truth about which page is open. */
-#pagebar {
-    display: flex;
-    flex: none;
-    align-items: center;
-    gap: 6px;
-    padding: 7px 10px;
-    background: var(--panel);
-    border-bottom: 1px solid var(--border);
-    overflow: hidden;
-}
-
+/* The small square buttons of the pane's two bars: the width controls up in the pane's own chrome, and the
+   chip arrows down in the Pages bar. */
 .pane-nav {
     flex: none;
     padding: 1px 6px;
@@ -695,6 +701,112 @@ body.dragging {
     color: var(--text);
 }
 
+/* The pane's own bar: which tool is open, and how wide the pane is. Nothing in it belongs to a tool, which is
+   what stops a tool from moving the pane or from saying which tool the user is looking at. */
+#panebar {
+    display: flex;
+    flex: none;
+    align-items: flex-end;
+    gap: 2px;
+    padding: 7px 10px 0;
+    background: var(--bg);
+    border-bottom: 1px solid var(--border);
+}
+
+#tool-tabs {
+    display: flex;
+    gap: 2px;
+    min-width: 0;
+    overflow: hidden;
+}
+
+/* A tab is a folder mouth: the open one carries the panel's own background up into the bar, so the two read
+   as one surface and the others read as behind it. */
+.tool-tab {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 14px;
+    border: 1px solid transparent;
+    border-bottom: none;
+    border-radius: 7px 7px 0 0;
+    background: none;
+    color: var(--muted);
+    font: inherit;
+    font-size: 12.5px;
+    cursor: pointer;
+}
+
+.tool-tab:hover {
+    color: var(--text);
+}
+
+.tool-tab.on {
+    background: var(--panel);
+    border-color: var(--border);
+    color: var(--text);
+}
+
+/* What is waiting in a tool nobody is looking at. The same green as everything else that means "something
+   happened here". */
+.tool-mark {
+    padding: 0 5px;
+    border-radius: 8px;
+    background: var(--accent);
+    color: #04140b;
+    font-size: 9.5px;
+    font-weight: 700;
+}
+
+#pane-ctl {
+    display: flex;
+    flex: none;
+    margin-left: auto;
+    gap: 4px;
+    padding-bottom: 5px;
+}
+
+#pane-ctl .pane-nav {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 5px;
+}
+
+/* The pane is already at the far end, and the button is the way back from it. */
+#pane-ctl .pane-nav.on {
+    background: #10151c;
+    color: var(--accent);
+}
+
+/* One tool's panel. Only the open one is on the screen, and each fills whatever the pane's bar leaves. */
+.tool-panel {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+}
+
+.tool-panel[hidden] {
+    display: none;
+}
+
+/* The pagination bar: this session's pages as chips, the arrows for a bar too narrow to hold them, and where
+   in the history the open page sits. Drawn by the interface, outside the page's frame, so it always says the
+   truth about which page is open. */
+#pagebar {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 6px;
+    padding: 7px 10px;
+    background: var(--panel);
+    border-bottom: 1px solid var(--border);
+    overflow: hidden;
+}
+
 #chips {
     display: flex;
     gap: 6px;
@@ -810,15 +922,6 @@ body.dragging {
     letter-spacing: 0.02em;
 }
 
-/* Out of the way, at the end of the bar: the pane is put away far more often than the chips are paged. */
-#pane-collapse {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 4px;
-    padding: 2px 5px;
-}
-
 #page-doc {
     flex: 1;
     min-width: 0;
@@ -841,10 +944,21 @@ body.dragging {
     zoom: var(--page-zoom, 1);
 }
 
+/* A tool's own client, in a frame of its own. It fills the panel and this side styles nothing inside it: the
+   tool ships its own document, its own stylesheet and its own theme, and the shell cannot reach in anyway. */
+.tool-frame {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: var(--bg);
+}
+
 /* A page is a document with an event loop of its own, and a pointer that crosses into it during a drag is a
    pointer the grip has to keep. Capture does that in every engine that has it; taking the frame out of the
    hit test for the length of the drag is what makes it true everywhere. */
-body.dragging .page-frame {
+body.dragging .page-frame,
+body.dragging .tool-frame {
     pointer-events: none;
 }
 
@@ -893,8 +1007,8 @@ body.dragging .page-frame {
     width: 30px;
 }
 
-#pane.collapsed #pagebar,
-#pane.collapsed #page-doc {
+#pane.collapsed #panebar,
+#pane.collapsed .tool-panel {
     display: none;
 }