@oharness/server 0.8.0 → 0.9.1

package/dist/page/style.js

@@ -33,8 +33,25 @@ code,pre,.mono{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,
 /* sidebar */
 aside{
   width:236px;flex:0 0 236px;background:var(--panel);
-  display:flex;flex-direction:column;overflow:hidden;
+  display:flex;flex-direction:column;overflow:hidden;transition:flex-basis .18s,width .18s;
 }
+/* Folded away on a desktop. Zero width rather than display:none, for the
+   slide, and so nothing inside has to be rebuilt when it comes back. */
+body.nav-collapsed>aside{width:0;flex-basis:0}
+#nav-collapse,#nav-expand{
+  width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--dim);
+  cursor:pointer;padding:0;display:grid;place-items:center;flex:0 0 auto;-webkit-app-region:no-drag;
+}
+#nav-collapse{margin-left:auto}
+#nav-collapse:hover,#nav-expand:hover{background:var(--hover);color:var(--fg)}
+#nav-collapse svg,#nav-expand svg{width:16px;height:16px;display:block;shape-rendering:geometricPrecision}
+#nav-expand{display:none;position:absolute;z-index:5;top:7px;left:8px}
+body.nav-collapsed #nav-expand{display:grid}
+body.nav-collapsed #tabs{padding-left:44px}
+/* The traffic lights sit where the sidebar's corner was; step past them. */
+body.inset-titlebar.nav-collapsed #nav-expand{left:80px}
+body.inset-titlebar.nav-collapsed #tabs{padding-left:116px;-webkit-app-region:drag}
+body.inset-titlebar.nav-collapsed #tabs>*{-webkit-app-region:no-drag}
 aside header{padding:15px 14px 8px;display:flex;gap:8px;align-items:center}
 /* The desktop shell hides the title bar, so on macOS the traffic lights float
  * over this corner. The wordmark moves below them, and the strip they sit in
@@ -531,8 +548,14 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
 .tab .dot{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:0 0 auto}
 .tab .x{
   width:18px;height:18px;padding:0;border:0;border-radius:5px;background:transparent;color:inherit;
-  display:grid;place-items:center;cursor:pointer;opacity:0;flex:0 0 auto;
-}
+  display:none;place-items:center;cursor:pointer;opacity:0;flex:0 0 auto;
+}
+/* A tab's controls take no room until the pointer or focus is on it: an idle
+   tab spends its width on its title, and a hovered one gives some back to its
+   buttons, where the title then ends in an ellipsis. Hidden rather than only
+   transparent — a transparent button still holds its space. A running
+   browser keeps its button, because its dot is what says so. */
+.tab:hover .x,.tab:focus-within .x{display:grid}
 /* The tab's browser button's size. Much smaller and the 1.5px strokes thin
    below a pixel and blur; the full 16px outweighs the tab's own text. */
 .tab .x svg{width:14px;height:14px}
@@ -543,6 +566,8 @@ details.provider>summary .vmark.filled,.pp-item .vmark.filled{padding:0}
   display:grid;place-items:center;background:transparent;color:inherit;cursor:pointer;
   opacity:0;flex:0 0 auto;
 }
+.tab .tab-browser{display:none}
+.tab:hover .tab-browser,.tab:focus-within .tab-browser,.tab .tab-browser.running{display:grid}
 .tab:hover .tab-browser,.tab.on .tab-browser,.tab-browser.running{opacity:.62}
 .tab-browser:hover,.tab-browser.on{opacity:1;background:var(--sel)}
 .tab-browser svg{width:14px;height:14px}
@@ -799,6 +824,140 @@ body.panelled #composer,body.panelled #jump,body.panelled #changes-btn{display:n
 #diff pre.diff{padding:8px 0}
 .d-add,.d-del,.d-same{padding:0 12px}
 .hunk{color:var(--dim);background:var(--field);padding:3px 12px;font-size:11px}
+/*
+ * The files pane: the same column as #review, a little wider because it holds
+ * two — the tree, and the file picked from it.
+ */
+#explorer{
+  width:0;flex:0 0 0;background:var(--panel);
+  display:flex;flex-direction:column;overflow:hidden;transition:flex-basis .18s,width .18s;
+  /* Above the transcript column, whose composer bar can spill sideways when
+     the window is narrow enough to squeeze it. */
+  position:relative;z-index:2;
+}
+#explorer.open{width:var(--explorer-width,min(52vw,860px));flex:0 0 var(--explorer-width,min(52vw,860px));overflow:clip;overflow-clip-margin:6px}
+#explorer-head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px 16px;font-size:12.5px}
+#explorer-title{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+#explorer-actions{display:flex;gap:2px}
+#explorer-actions button{
+  width:28px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--dim);
+  cursor:pointer;padding:0;display:grid;place-items:center;
+}
+#explorer-actions button:hover{background:var(--hover);color:var(--fg)}
+#explorer-actions svg{width:15px;height:15px}
+#explorer-body{flex:1;display:flex;min-height:0}
+#explorer-tree{width:var(--explorer-tree-width,min(40%,260px));flex:0 0 auto;overflow:auto;padding:2px 6px 12px}
+/* The line between the tree and the file, and the handle that moves it: a
+   gap wide enough to grab, drawn only while it is being pointed at. */
+#explorer-split{flex:0 0 7px;margin:0 -3px;position:relative;z-index:1;cursor:col-resize;touch-action:none;outline:0}
+#explorer-split::before{
+  content:"";position:absolute;left:2px;top:50%;width:3px;height:34px;border-radius:999px;
+  background:var(--dim);opacity:0;transform:translateY(-50%) scaleY(.65);transition:opacity .12s,transform .16s;
+}
+.explorer-row{
+  display:flex;align-items:center;gap:5px;width:100%;border:0;background:transparent;color:var(--fg);
+  font:inherit;font-size:12.5px;text-align:left;padding:4px 8px;border-radius:6px;cursor:pointer;
+  white-space:nowrap;
+}
+.explorer-row:hover{background:var(--hover)}
+.explorer-row.on{background:var(--sel)}
+.explorer-row svg{width:14px;height:14px;flex:0 0 auto;color:var(--dim)}
+.explorer-caret{width:12px;flex:0 0 12px;display:grid;place-items:center}
+.explorer-caret svg{width:11px;height:11px}
+.explorer-name{overflow:hidden;text-overflow:ellipsis;min-width:0}
+#explorer-view{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
+.explorer-hint{padding:16px;font-size:12.5px;margin:0}
+.explorer-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:12px}
+.explorer-path{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:left}
+.explorer-size{color:var(--dim);font-size:11px;flex:0 0 auto}
+.explorer-btn{
+  border:0;background:var(--field);color:var(--fg);border-radius:6px;padding:3px 9px;
+  font:inherit;font-size:11.5px;cursor:pointer;flex:0 0 auto;
+}
+.explorer-btn:hover{background:var(--sel)}
+.explorer-content{flex:1;overflow:auto;min-height:0}
+.explorer-code{display:flex;align-items:flex-start;min-width:max-content}
+.explorer-code pre{margin:0;font-size:12.5px;line-height:1.55;padding:8px 12px 16px}
+.explorer-gutter{color:var(--dim);text-align:right;user-select:none;opacity:.7;padding-right:10px!important;position:sticky;left:0;background:var(--bg)}
+.explorer-src{overflow:visible!important;padding-left:4px!important}
+.explorer-md{padding:12px 20px 24px;max-width:780px}
+.explorer-img{display:block;max-width:calc(100% - 32px);margin:16px;image-rendering:auto}
+.explorer-video{display:block;max-width:calc(100% - 32px);max-height:calc(100% - 32px);margin:16px;background:#000;border-radius:8px}
+.explorer-audio{display:block;width:calc(100% - 32px);margin:16px}
+.explorer-content.explorer-fill{overflow:hidden;display:flex}
+.explorer-pdf{flex:1;width:100%;height:100%;border:0;background:var(--bg)}
+/* Resize handles: an invisible strip on an edge, with a short pill drawn on
+   hover or while dragging — the same look as the browser pane's handle. */
+.resizer-col{position:absolute;z-index:4;left:-6px;top:0;bottom:0;width:15px;cursor:col-resize;outline:0;touch-action:none}
+.resizer-col::before{
+  content:"";position:absolute;left:6px;top:50%;width:3px;height:34px;border-radius:999px;
+  background:var(--dim);opacity:0;transform:translateY(-50%) scaleY(.65);transition:opacity .12s,transform .16s;
+}
+.resizer-row{position:absolute;z-index:4;left:0;right:0;top:-6px;height:13px;cursor:row-resize;outline:0;touch-action:none}
+.resizer-row::before{
+  content:"";position:absolute;top:5px;left:50%;height:3px;width:34px;border-radius:999px;
+  background:var(--dim);opacity:0;transform:translateX(-50%) scaleX(.65);transition:opacity .12s,transform .16s;
+}
+.resizer-col:hover::before,.resizer-col:focus-visible::before,
+#explorer-split:hover::before,#explorer-split:focus-visible::before,body.dragging-x #explorer-split::before{
+  opacity:.55;transform:translateY(-50%) scaleY(1);
+}
+.resizer-row:hover::before,.resizer-row:focus-visible::before,body.dragging-y .resizer-row::before{
+  opacity:.55;transform:translateX(-50%) scaleX(1);
+}
+body.dragging{user-select:none;-webkit-user-select:none}
+body.dragging-x{cursor:col-resize}
+body.dragging-y{cursor:row-resize}
+body.dragging #explorer{transition:none}
+body.dragging iframe{pointer-events:none}
+/*
+ * The terminal, under the composer and as wide as the conversation. Its
+ * height is whatever it was last dragged to.
+ */
+#terminal{
+  flex:0 0 var(--terminal-height,clamp(180px,34vh,420px));min-height:120px;position:relative;
+  display:flex;flex-direction:column;background:var(--panel);
+}
+#terminal[hidden]{display:none}
+#terminal-head{display:flex;align-items:center;gap:4px;padding:5px 8px 3px 8px;font-size:12px;flex:0 0 auto;min-width:0}
+#terminal-tabs{display:flex;gap:2px;overflow-x:auto;min-width:0;flex:0 1 auto;scrollbar-width:none}
+#terminal-tabs::-webkit-scrollbar{display:none}
+.terminal-tab{
+  display:flex;align-items:center;gap:6px;height:26px;padding:0 4px 0 8px;border-radius:6px;
+  color:var(--dim);cursor:pointer;flex:0 0 auto;max-width:180px;user-select:none;
+}
+.terminal-tab:hover{background:var(--hover);color:var(--fg)}
+.terminal-tab.on{background:var(--bg);color:var(--fg)}
+.terminal-tab>svg{width:13px;height:13px;flex:0 0 auto}
+.terminal-tab-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.terminal-tab-x{
+  width:18px;height:18px;border:0;border-radius:4px;background:transparent;color:inherit;padding:0;
+  display:grid;place-items:center;cursor:pointer;opacity:0;flex:0 0 auto;
+}
+.terminal-tab:hover .terminal-tab-x,.terminal-tab.on .terminal-tab-x{opacity:.6}
+.terminal-tab-x:hover{opacity:1;background:var(--sel)}
+.terminal-tab-x svg{width:12px;height:12px}
+#terminal-where{flex:1;min-width:0;text-align:right;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 6px}
+#terminal-new,#terminal-hide{
+  width:26px;height:26px;border:0;border-radius:6px;background:transparent;color:var(--dim);
+  cursor:pointer;padding:0;display:grid;place-items:center;flex:0 0 auto;
+}
+#terminal-new:hover,#terminal-hide:hover{background:var(--hover);color:var(--fg)}
+#terminal-new svg,#terminal-hide svg{width:14px;height:14px}
+#terminal-body{flex:1;min-height:0;position:relative;background:var(--bg)}
+.terminal-host{position:absolute;inset:4px 0 6px 12px}
+.terminal-host[hidden]{display:none}
+.terminal-host .xterm{height:100%}
+.terminal-host .xterm-viewport{background:transparent!important}
+.tab-tool{
+  width:22px;height:22px;border:0;border-radius:6px;background:transparent;color:inherit;
+  display:grid;place-items:center;padding:0;cursor:pointer;flex:0 0 auto;opacity:0;
+}
+.tab .tab-tool{display:none}
+.tab:hover .tab-tool,.tab:focus-within .tab-tool{display:grid}
+.tab:hover .tab-tool,.tab.on .tab-tool{opacity:.62}
+.tab-tool:hover,.tab-tool.on{opacity:1;background:var(--sel)}
+.tab-tool svg{width:14px;height:14px}
 #changes-btn{
   border:0;background:var(--panel);color:var(--fg);border-radius:7px;
   padding:5px 11px;font:inherit;font-size:12px;cursor:pointer;
@@ -1294,6 +1453,38 @@ details.setting>summary:focus-visible{outline:none;background:var(--hover)}
 .status-dot.ok{background:var(--ok);opacity:1}
 /* The presets and the calendar on one line, on the same baseline. */
 .usage-window{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
+.usage-kind-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
+.usage-head-actions{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
+.usage-head-actions .seg{margin:0}
+.usage-head-actions .seg-item{padding:3px 10px;font-size:12px}
+/*
+ * The kinds, as figures that are also the filter. Filled, never outlined: the
+ * chosen one takes the accent fill the model chips use for "this one".
+ */
+.usage-kinds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:4px 0 10px}
+.usage-kind{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:12px 14px;border:0;border-radius:10px;background:var(--panel);color:var(--fg);font:inherit;text-align:left;cursor:pointer}
+.usage-kind:hover{box-shadow:inset 0 0 0 999px var(--hover)}
+.usage-kind:focus-visible{outline:none;box-shadow:inset 0 0 0 999px var(--sel)}
+.usage-kind-label{font-size:11.5px;color:var(--dim)}
+.usage-kind-value{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.usage-kind-sub{font-size:12px;color:var(--dim)}
+.usage-kind.empty .usage-kind-value{color:var(--dim)}
+.usage-kind.on{background:var(--accent);color:var(--bg);box-shadow:none}
+.usage-kind.on .usage-kind-label,.usage-kind.on .usage-kind-sub,.usage-kind.on.empty .usage-kind-value{color:var(--bg);opacity:.72}
+.usage-counted{margin:0 0 10px}
+/* Amounts in one column at the right edge, so a list is compared by glancing down it. */
+.usage .row-head .usage-amount{margin-left:auto;flex:none;font-variant-numeric:tabular-nums}
+.usage .row-head .row-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+@media (max-width:640px){.usage-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}.usage-kind:first-child{grid-column:1/-1}}
+.usage-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 8px}
+.usage-section-head .section-title{margin:0}
+.usage-session{cursor:pointer}
+.usage-session:hover{background:var(--hover)}
+.usage-session:focus-visible{outline:none;background:var(--hover)}
+.usage-sessions-count{margin:10px 0 8px}
+.usage-sessions-foot{padding:10px 0 24px;text-align:center}
+.usage-sessions-sentinel{height:1px}
+.usage-kind-title .muted{font-weight:400;text-transform:none;letter-spacing:0}
 .perms-card{display:flex;flex-direction:column;gap:10px}
 .perms-card .setting-list{margin:0}
 /* The mode, as the one fact the rest of the page qualifies. */
@@ -2152,6 +2343,40 @@ pre.diff{margin:0;font-size:12px;line-height:1.5;overflow-x:auto}
  * between two paragraphs — and the box is kept for what opens under it. The
  * chevron trails the words, where it points at what a click will show. */
 details.work{margin:0 0 12px}
+/* What a media tool made, under the steps that made it. No frame: the image is
+   its own edge, and a border would only box it in. */
+.media-strip{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin:0 0 14px}
+.media-item{margin:0;display:flex;flex-direction:column;gap:5px;max-width:100%}
+/* Sized by the picture itself, so the corners are the picture's corners: a
+   box of fixed proportions around it showed as a panel-coloured frame
+   wherever the two shapes differed. */
+.media-item img,.media-item video{display:block;width:auto;height:auto;max-width:min(360px,100%);max-height:440px;border-radius:12px;cursor:zoom-in}
+.media-item video{max-width:min(480px,100%);cursor:auto}
+/* A clip, drawn by the page: a filled card, no outline, like everything else
+   that sits on the conversation. */
+.media-item.audio{width:min(360px,100%)}
+.media-item audio{display:none}
+.audio-card{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:14px;background:var(--panel)}
+.audio-play{
+  width:36px;height:36px;flex:0 0 auto;border:0;border-radius:50%;padding:0;
+  display:grid;place-items:center;background:var(--fg);color:var(--bg);cursor:pointer;
+}
+.audio-play:hover{opacity:.85}
+.audio-play svg{width:14px;height:14px}
+.audio-play svg path{fill:currentColor}
+.audio-card.playing .audio-play svg path{fill:none;stroke-width:2.2}
+.audio-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
+.audio-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12.5px}
+.audio-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg);cursor:pointer}
+.audio-name:hover{text-decoration:underline;text-underline-offset:2px}
+.audio-time{flex:0 0 auto;color:var(--dim);font-size:11.5px;font-variant-numeric:tabular-nums}
+/* Thin to look at, tall to hit: the pseudo-element widens the target. */
+.audio-track{position:relative;height:4px;border-radius:2px;background:var(--hover);cursor:pointer}
+.audio-track::before{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}
+.audio-track:focus-visible{outline:none;background:var(--sel)}
+.audio-fill{height:100%;width:0;border-radius:2px;background:var(--fg);pointer-events:none}
+.media-item figcaption{max-width:360px;font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
+.media-item figcaption:hover{color:var(--fg)}
 details.work>summary{
   padding:3px 0;cursor:pointer;font-size:13.5px;color:var(--dim);list-style:none;
   display:flex;gap:6px;align-items:center;width:max-content;max-width:100%;
@@ -2684,6 +2909,9 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   body>aside.open{transform:none;box-shadow:0 0 0 1px #0000000a,0 12px 40px #00000040}
   body.nav-open #scrim{display:block}
   #nav-close{display:grid}
+  #nav-collapse,body.nav-collapsed #nav-expand{display:none}
+  body.nav-collapsed>aside{width:min(280px,84vw);flex-basis:auto}
+  body.nav-collapsed #tabs{padding-left:12px}
   #burger{display:grid}
   #top{padding:6px 10px}
   #top:has(#changes-btn:not([hidden])){padding:6px 10px}
@@ -2695,6 +2923,31 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   }
   #review-head{padding:10px 10px 8px 16px}
   #review-close{display:grid}
+  #explorer.open{position:fixed;inset:0;z-index:50;width:100%;height:100%;flex:none;transition:none}
+  #explorer-head{padding-top:max(10px,env(safe-area-inset-top))}
+  #explorer-body{flex-direction:column}
+  #explorer-resizer{display:none}
+  #explorer-tree{width:auto;height:var(--explorer-tree-height,38%);max-height:none}
+  /* Stacked, so the handle between them drags up and down — and is a strip
+     a thumb can find rather than a hairline. */
+  #explorer-split{flex:0 0 18px;margin:0;cursor:row-resize}
+  #explorer-split::before{left:50%;top:7px;width:34px;height:4px;opacity:.4;transform:translateX(-50%)}
+  body.dragging-y #explorer-split::before{opacity:.7;transform:translateX(-50%)}
+  .explorer-row{padding-top:8px;padding-bottom:8px}
+  #explorer-actions button{width:34px;height:34px}
+  /* A phone has room for the conversation or a shell, and the shell needs the
+     keyboard: while it is open the composer steps aside, and the handle on
+     top is a visible grip. */
+  body.terminal-open #composer,body.terminal-open #jump{display:none}
+  #terminal{flex-basis:var(--terminal-height,55%);padding-bottom:env(safe-area-inset-bottom)}
+  #terminal-resizer{top:0;height:18px}
+  #terminal-resizer::before{top:6px;opacity:.4;transform:translateX(-50%)}
+  #terminal-head{padding-top:14px}
+  #terminal-new,#terminal-hide{width:34px;height:34px}
+  .terminal-tab{height:32px}
+  .terminal-tab-x{opacity:.6;width:24px;height:24px}
+  #terminal-where{display:none}
+  .terminal-host{inset:4px 0 6px 6px}
   #files{max-height:40%}
   #shelf-bar{flex-wrap:wrap;row-gap:4px}
 
@@ -2767,6 +3020,8 @@ dialog::backdrop{background:rgba(0,0,0,.55)}
   .turn{margin-bottom:14px}
   .act{padding:6px 10px}
   .tab .x{opacity:.55;width:24px;height:24px}
+  /* No hover to reveal them on a touch screen. */
+  .tab .x,.tab .tab-tool,.tab .tab-browser{display:grid}
   #tab-add{width:32px;height:32px}
   .tab{height:34px}
   .nav-item,.session,.fold,.project{height:38px}

package/dist/page/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,0EAA0E;AAC1E,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;EAC7B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAouFV,CAAC"}
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/page/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,0EAA0E;AAC1E,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA;EAC7B,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAm+FV,CAAC"}

package/dist/page.js

@@ -55,6 +55,7 @@ ${ANALYTICS_STUB}
       </svg>
     </span>
     <b class="wordmark">OHarness</b>
+    <button id="nav-collapse" type="button" data-t-title="nav.collapse" data-t-aria-label="nav.collapse"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.25" y="3.25" width="11.5" height="9.5" rx="2.5"/><path d="M6.25 3.25v9.5"/></svg></button>
     <button id="nav-close" type="button" aria-label="Close"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg></button>
   </header>
   <button id="project" class="project" type="button">
@@ -103,6 +104,8 @@ ${ANALYTICS_STUB}
 
   <div id="split">
     <div id="main">
+    <!-- Shown only while the sidebar is folded away: the way back to it. -->
+    <button id="nav-expand" type="button" data-t-title="nav.expand" data-t-aria-label="nav.expand"><svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2.25" y="3.25" width="11.5" height="9.5" rx="2.5"/><path d="M6.25 3.25v9.5"/></svg></button>
     <div id="tabs"></div>
     <div id="log">
       <div id="empty">
@@ -199,6 +202,19 @@ ${ANALYTICS_STUB}
       <span id="ctxtext"></span>
     </div>
   </form>
+    <!-- The embedded terminal: under the conversation, as tall as it is
+         dragged. The shell belongs to the project, not to this panel, so
+         hiding the panel leaves it running. -->
+    <div id="terminal" hidden>
+      <div id="terminal-resizer" class="resizer-row" role="separator" aria-orientation="horizontal" tabindex="0" data-t-aria-label="terminal.resize"></div>
+      <div id="terminal-head">
+        <div id="terminal-tabs" role="tablist"></div>
+        <button id="terminal-new" type="button" data-t-title="terminal.new" data-t-aria-label="terminal.new"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M8 3.5v9M3.5 8h9"/></svg></button>
+        <span id="terminal-where"></span>
+        <button id="terminal-hide" type="button" data-t-title="terminal.hide" data-t-aria-label="terminal.hide"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/></svg></button>
+      </div>
+      <div id="terminal-body"></div>
+    </div>
     </div>
     <div id="review">
       <div id="review-head">
@@ -209,6 +225,24 @@ ${ANALYTICS_STUB}
       <div id="files"></div>
       <div id="diff"></div>
     </div>
+    <!-- A project's own files: the tree on one side, the file on the other.
+         Shaped and placed like #review, which is the same kind of column. -->
+    <div id="explorer">
+      <div id="explorer-resizer" class="resizer-col" role="separator" aria-orientation="vertical" tabindex="0" data-t-aria-label="files.resize"></div>
+      <div id="explorer-head">
+        <span id="explorer-title"></span>
+        <span id="explorer-actions">
+          <button id="explorer-terminal" type="button" data-t-title="files.terminal" data-t-aria-label="files.terminal"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 5.5 6.5 8 4 10.5"/><path d="M8.5 10.5H12"/></svg></button>
+          <button id="explorer-refresh" type="button" data-t-title="files.refresh" data-t-aria-label="files.refresh"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13.2 5.4A5.6 5.6 0 1 0 13.5 10"/><path d="M13.2 2.5v2.9h-2.9"/></svg></button>
+          <button id="explorer-close" type="button" data-t-title="files.close" data-t-aria-label="files.close"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/></svg></button>
+        </span>
+      </div>
+      <div id="explorer-body">
+        <div id="explorer-tree" role="tree"></div>
+        <div id="explorer-split" role="separator" tabindex="0" data-t-aria-label="files.resize"></div>
+        <div id="explorer-view"></div>
+      </div>
+    </div>
     <!-- The agent's browser, beside the transcript rather than over it.
          A sibling of #main for the same reason #review is one: the split is a
          row of columns, and a pane nested inside #main would stack under the
@@ -221,7 +255,7 @@ ${ANALYTICS_STUB}
       <div id="browser-head">
         <div id="browser-context">
           <div id="browser-name-line">
-            <span id="browser-mark" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="1.75" y="2.5" width="12.5" height="11" rx="2"/><path d="M1.75 6h12.5"/><circle cx="4.25" cy="4.25" r=".55" fill="currentColor" stroke="none"/></svg></span>
+            <span id="browser-mark" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="1.75" y="2.75" width="12.5" height="10.5" rx="2"/><path d="M1.75 6h12.5"/><path d="M4.1 4.4h.01M5.9 4.4h.01"/></svg></span>
             <span id="browser-title" data-t="nav.browser"></span>
             <span id="browser-status" hidden><i></i><span data-t="browser.live"></span></span>
           </div>

package/dist/page.js.map

@@ -1 +1 @@
-{"version":3,"file":"page.js","sourceRoot":"","sources":["../src/page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;;;GAcG;AAGH;;;;;;;GAOG;AACH,MAAM,OAAO,GAAG;;;;;yCAKyB,CAAC;AAE1C,MAAM,CAAC,MAAM,IAAI,GAAG;;;;;;;4CAOwB,kBAAkB,CAAC,OAAO,CAAC;SAC9D,KAAK;EACZ,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAwWK,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;qBACvB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;EAC1C,aAAa;EACb,UAAU;EACV,gBAAgB;;;QAGV,CAAC"}
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../src/page.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD;;;;;;;;;;;;;;GAcG;AAGH;;;;;;;GAOG;AACH,MAAM,OAAO,GAAG;;;;;yCAKyB,CAAC;AAE1C,MAAM,CAAC,MAAM,IAAI,GAAG;;;;;;;4CAOwB,kBAAkB,CAAC,OAAO,CAAC;SAC9D,KAAK;EACZ,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA0YK,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;qBACvB,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC;EAC1C,aAAa;EACb,UAAU;EACV,gBAAgB;;;QAGV,CAAC"}