create-pmos 0.13.0 → 0.15.0

package/workspace/public/index.html

@@ -51,12 +51,37 @@
     </div>
   </header>
 
+  <!-- workspace-mobile-surface — the phone's top bar: back, the screen's name, theme. It sits HERE,
+       above .body, because it is the row above the content on screen and the row above it for a
+       screen reader too; putting it beside the bottom nav in DOM order would read the app backwards.
+       `hidden` is the shipped state and app.js removes it at ≤760px only, so above the breakpoint
+       this is absent from the accessibility tree rather than merely invisible (R12). -->
+  <div class="mob" id="mobShell" hidden>
+    <header class="mob-bar" id="mobBar">
+      <button class="mob-back" id="mobBack" hidden aria-label="Back">‹</button>
+      <span class="mob-title" id="mobTitle"></span>
+      <!-- The jump palette lives HERE, not in the control bar below. Two reasons, and the second is
+           the binding one: it is not a terminal control key (the bar's other buttons all write a
+           PTY sequence), and the bar is `overflow-x:auto` with eight 44px buttons, so at 390px the
+           last one sat past the right edge — reachable only by a horizontal scroll nobody would
+           guess at. A control the PM cannot see is the hover-only trap in another costume. -->
+      <button class="mob-pal" id="mobPalette" aria-label="Open the jump palette (⌘K)">⌘K</button>
+      <button class="mob-theme" id="mobTheme" aria-label="Toggle theme">theme</button>
+    </header>
+  </div>
+
   <!-- The arrangement is COMPUTED from the current layout (lib/layout.js), not hard-coded here:
        the sidebar, the terminal and the reader are grid areas whose columns/rows/areas are written
        by applyLayout(). Each pane carries a ⠿ grip (move) and, where it has an outer edge, a
        resize handle. DOM order is fixed; only the grid decides where a pane lands. -->
   <div class="body" id="bodyGrid">
 
+    <!-- Collapsed-column rails. Shown INSTEAD of their column, in the same grid area, so the
+         track narrows to 36px rather than the column disappearing. Each keeps a real accessible
+         name; the rotated text is decoration over it, never the only label. -->
+    <button class="colrail" id="col1Rail" hidden aria-label="Show the initiatives column"><span id="col1RailLabel">initiatives ⟩</span></button>
+    <button class="colrail" id="col2Rail" hidden aria-label="Show the detail panel"><span id="col2RailLabel">initiative ⟩</span></button>
+
     <!-- ONE tree (R1): repositories → their working trees, each labelled by the initiative on its
          branch → that tree's sessions. It replaces the old `workspaces` + `running agents` pair,
          which split a parent from its children across two panes and made the PM correlate a live
@@ -64,6 +89,7 @@
          change still resolves; `sess` is retired and ignored (R13). -->
     <nav class="side" id="side" aria-label="Repositories, initiatives and running agents">
       <div class="edge" id="sideEdge" data-edge="side" role="separator" aria-label="Resize the sidebar" tabindex="0"></div>
+
       <section class="pane" id="paneWs">
         <div class="cap">
           <span class="grip" id="sideGrip" data-pane="side" role="button" tabindex="0"
@@ -74,6 +100,45 @@
           <span class="ct" id="needCount"></span>
           <button class="mini" id="addWsBtn" aria-expanded="false" title="Add a repository">＋</button></div>
         <div class="pane-body">
+          <!-- workspace-focus R1 — a FULL-WIDTH row above the mode menu, not a ninth cell in
+               #spMenu: the eighth cell there is the grid-squaring "hide" control and a ninth breaks
+               the two-row grid. Focus joins every registered repository, so it sits ABOVE the
+               product switcher, which scopes only what is below it. Visible in every mode.
+               The badge prints badge.text, never a count — a digit would be a claim about the whole
+               world, and the world includes reads that failed. -->
+          <button class="focusbtn" id="focusBtn" aria-expanded="false" aria-controls="focusPanel"
+            title="What only you can unblock, across every repository">
+            <span class="g" aria-hidden="true">◎</span><span class="l">focus</span>
+            <span class="ct" id="focusBadge"></span>
+          </button>
+          <!-- workspace-product-switcher — one button per PRODUCT (a distinct repo_key), not per
+               working tree: a product with four trees was four rows of the same name, and the tree
+               is a detail of where you stand, not of what you are working on. Buttons WRAP so a
+               full product name always shows; a horizontally scrolling strip is not acceptable —
+               it hides products off-screen with nothing on screen saying they exist. Product-scoped,
+               so app.js hides it outside `product` mode. -->
+          <div class="psw" id="prodSwitch" role="group" aria-label="Products" hidden>
+            <div class="psw-list" id="pswList"></div>
+            <!-- opens the SHIPPED #addWsForm — the same node #addWsBtn opens. Two controls onto one
+                 form is fine; two forms that both add a repository is not. -->
+            <button class="psw-add" id="pswAdd" aria-expanded="false" aria-controls="addWsForm"
+              aria-label="Add a repository" title="Add a repository">＋</button>
+          </div>
+          <!-- workspace-pm-spine — the destinations sit ON TOP OF the initiative list they scope,
+               not in a separate nav column. Everything here is PRODUCT-SPECIFIC — knowledge and
+               scheduled tasks belong to the repository in view, not to the app — so the menu
+               lives inside the product's own column, where its scope is unambiguous. -->
+          <div class="spmenu" id="spMenu" role="toolbar" aria-label="Views"></div>
+          <!-- One search box over everything the column can hold, not a per-mode filter. It
+               narrows the current mode's list AND surfaces matches from elsewhere (artifacts,
+               sessions) underneath, so a name you half-remember is findable without first
+               knowing which mode it lives in. ⌘K focuses it. -->
+          <div class="spfind-wrap">
+            <div class="spfind">
+              <span class="g" aria-hidden="true">⌕</span>
+              <input id="spFind" type="search" placeholder="search everything…" aria-label="Search initiatives, artifacts and sessions" autocomplete="off" />
+            </div>
+          </div>
           <button class="newsess" id="newBtn" aria-expanded="false"><i>＋</i> new session — run an agent here</button>
           <form class="miniform" id="newForm" hidden>
             <!-- R5: "here" gets a visible referent. The composer has always acted on the selected
@@ -86,6 +151,14 @@
               <button type="button" data-agent="claude" role="radio" aria-checked="false">claude</button>
               <button type="button" data-agent="codex" role="radio" aria-checked="false">codex</button>
             </div>
+            <!-- workspace-profiles — the chips are written from the descriptors actually read off
+                 disk. NOTHING is hard-coded here: a picker that renders two chips on a machine with
+                 no descriptors makes a choice that applies nothing. An empty group renders whatever
+                 readProfiles said — absent, or a successful read of nothing. -->
+            <div class="prof" id="newProfile" role="radiogroup" aria-label="Profile to start this session under"></div>
+            <p class="prof-note" id="newProfileNote">Chosen at start and never changed afterwards — a process's
+              environment is fixed when it is created. A session started on one profile does not get the MCP
+              servers another profile declares.</p>
             <div class="brwrap" id="newBranchWrap" hidden>
               <label class="lbl" for="newBranch">branch <span class="opt">— optional</span></label>
               <select id="newBranch" aria-label="Branch to run this session on"></select>
@@ -103,11 +176,41 @@
             </div>
           </form>
           <div id="tree"></div>
-          <div id="workspaces" hidden></div>
+          <!-- workspace-focus — a SIBLING of #tree, not a replacement for it: focus is a second
+               reading of the same repositories, so leaving the tree in place is what lets the PM
+               check the queue against the structure it was derived from. app.js writes six sections
+               (#fcIntro #fcObjectives #fcQueue #fcHandoffs #fcDelegated #fcUpkeep) into #focusBody,
+               always all six — a section that is absent says nothing, and "nothing waiting on you"
+               is a fact worth printing. -->
+          <section class="fc" id="focusPanel" hidden aria-label="Focus — what only you can unblock">
+            <div class="fc-body" id="focusBody"></div>
+          </section>
+          <!-- workspace-repo-ingest — the two sources are stated in the affordance, before the
+               click, because they do different things: a folder is REGISTERED (read where it lies)
+               and a GitHub repo is INGESTED (cloned, scanned, proposed). Both consequence lines are
+               always present, one under each option, so the difference is never something you learn
+               afterwards from what happened. -->
           <form class="miniform" id="addWsForm" hidden>
-            <button type="button" class="pick" id="pickFolderBtn">📁 Choose folder…</button>
-            <label class="lbl" for="addWsPath">or type a path</label>
-            <input id="addWsPath" type="text" placeholder="/path/to/another/repo" aria-label="Path to a repository" autocomplete="off" spellcheck="false" />
+            <div class="ing-src seg" role="radiogroup" aria-label="Where this repository comes from" id="addWsSource">
+              <button type="button" data-src="local" role="radio" aria-checked="true">local folder</button>
+              <button type="button" data-src="github" role="radio" aria-checked="false">GitHub</button>
+            </div>
+
+            <div class="ing-opt" id="addWsLocal">
+              <button type="button" class="pick" id="pickFolderBtn">📁 Choose folder…</button>
+              <label class="lbl" for="addWsPath">or type a path</label>
+              <input id="addWsPath" type="text" placeholder="/path/to/another/repo" aria-label="Path to a repository" autocomplete="off" spellcheck="false" />
+              <p class="ing-note" id="addWsLocalNote">Adding a folder registers it. Nothing is imported from a
+                bare folder — its own records are read and shown, but no PMOS state is proposed.</p>
+            </div>
+
+            <div class="ing-opt" id="addWsGithub" hidden>
+              <label class="lbl" for="addWsRepo">repository</label>
+              <input id="addWsRepo" type="text" placeholder="owner/name or https://github.com/owner/name" aria-label="Repository to ingest — owner/name or a GitHub URL" autocomplete="off" spellcheck="false" />
+              <p class="ing-note" id="addWsGithubNote">Four stages run: clone · scan (read-only) · review ·
+                accept. The scan proposes; nothing is written into the repository until you confirm one item.</p>
+            </div>
+
             <div class="row">
               <button type="submit" class="go">add</button>
               <button type="button" class="quiet" id="addWsCancel">cancel</button>
@@ -132,6 +235,13 @@
       <div class="groups" id="groups" data-split="off">
         <section class="group" id="group0" data-g="0">
           <div class="stabs" role="tablist" aria-label="Open sessions" id="stabs"></div>
+          <!-- workspace-profiles R6 — which profile this pane was started under, as WORKSPACE
+               chrome between the tab strip and the terminal, never written into the pane. Writing
+               into a tmux pane sends input to the agent; anything appended to the ring buffer is
+               erased on the next reattach; and a line the workspace injects into scrollback is
+               indistinguishable from one the agent printed, which defeats a line whose whole
+               purpose is provenance. The sentence is computed server-side and printed verbatim. -->
+          <div class="profline" id="profLine0" role="status"></div>
           <div class="termhost" id="termhost">
             <!-- INSIDE termhost (position:relative): the overlay covers only the terminal area,
                  never the sidebar/tabs/needs — those must stay usable while a session is exited. -->
@@ -154,6 +264,8 @@
         </section>
         <section class="group" id="group1" data-g="1" hidden>
           <div class="stabs" role="tablist" aria-label="Open sessions, second group" id="stabs1"></div>
+          <!-- the second group carries its own line: two panes side by side may be two profiles -->
+          <div class="profline" id="profLine1" role="status"></div>
           <div class="termhost" id="termhost1">
             <!-- a split with nothing to put in it offers the next step, never an empty black box -->
             <div class="empty-overlay" id="noSess1">
@@ -173,6 +285,25 @@
            bar; open it takes a bounded slice below the terminal — it never overlays the tabs, the
            terminal, or the document rail. Persists PER TAB: each session keeps its own staging
            text, and the label below says which tab you are staging for. -->
+
+      <!-- workspace-viewer-column — the viewer. Documents, images and summoned surfaces are tabs in
+           THIS column now, beside the terminals, rather than a pane inside the rail. It is one pane
+           spanning the group row rather than one per group: a session belongs to a group because two
+           agents genuinely run side by side, and a document has no such property — giving it a group
+           would invent an affinity the object does not have. When a viewer tab is active it covers
+           the groups; un-selecting it returns both groups exactly as they were. -->
+      <section class="viewpane" id="viewPane" hidden aria-label="Document viewer">
+        <div class="cap">
+          <span class="crumb" id="crumb"></span>
+          <button class="mini docrev" id="docEdit" hidden title="Edit this document">edit</button>
+          <button class="mini docrev" id="docSave" hidden title="Save (⌘S)">save</button>
+          <button class="mini docrev" id="docCancel" hidden title="Discard changes">cancel</button>
+          <button class="mini docrev" id="docHistory" hidden title="Changes you have made to this document">history</button>
+          <button class="x" id="closeDoc" aria-label="Close document">✕</button>
+        </div>
+        <div class="pane-body doc-body" id="docBody" tabindex="0"></div>
+      </section>
+
       <section class="scratch" id="scratch" data-open="false" aria-label="Scratchpad">
         <div class="scratch-head">
           <button type="button" class="scratch-toggle" id="scratchToggle" aria-expanded="false" aria-controls="scratchText">
@@ -195,7 +326,7 @@
         <div class="cap">
           <span class="grip" id="readGrip" data-pane="reader" role="button" tabindex="0"
             aria-label="Move the reader" title="Move this pane">⠿</span>
-          <button class="fold" id="libFold" aria-expanded="true" title="Hide the library"><span class="chev" aria-hidden="true">▾</span>library</button>
+          <button class="fold" id="libFold" aria-expanded="true" title="Hide the initiative panel"><span class="chev" aria-hidden="true">▾</span>initiative</button>
           <!-- R7 — the four standing lenses are gone. What the rail shows follows the SELECTION:
                a repository group gives repo detail (the folder map, its schedules, its history), a
                tree row gives that initiative's dossier. The views below are the sub-views of
@@ -203,6 +334,7 @@
           <span class="lens" role="tablist" aria-label="Detail view" id="lensTabs"></span>
           <span class="reading" id="libWho" title="the repository these documents come from"></span>
           <button class="mini librefresh" id="libRefresh" title="Rescan the repository for new files & folders" aria-label="Refresh the library">↻</button>
+          <button class="mini" id="col2Hide" title="Collapse this column" aria-label="Collapse the detail panel">⟨</button>
         </div>
         <div class="pane-body">
           <input class="libfind" id="libFind" type="search" placeholder="filter the library…" aria-label="Filter the library" autocomplete="off" />
@@ -210,20 +342,6 @@
         </div>
       </section>
 
-      <div class="railsplit" id="railSplit" role="separator" aria-label="Resize the library and document panes" tabindex="0" hidden></div>
-
-      <section class="pane doc-pane" id="paneDoc" hidden>
-        <div class="cap">
-          <button class="fold" id="docFold" aria-expanded="true" title="Hide the document"><span class="chev" aria-hidden="true">▾</span>document</button>
-          <span class="crumb" id="crumb"></span>
-          <button class="mini docrev" id="docEdit" hidden title="Edit this document">edit</button>
-          <button class="mini docrev" id="docSave" hidden title="Save (⌘S)">save</button>
-          <button class="mini docrev" id="docCancel" hidden title="Discard changes">cancel</button>
-          <button class="mini docrev" id="docHistory" hidden title="Changes you have made to this document">history</button>
-          <button class="x" id="closeDoc" aria-label="Close document">✕</button>
-        </div>
-        <div class="pane-body doc-body" id="docBody" tabindex="0"></div>
-      </section>
     </aside>
 
     <!-- Drop targets, shown only while a ⠿ grip is being dragged. They are an ACCELERATOR: every
@@ -232,7 +350,6 @@
     <div class="drop" id="drop" aria-hidden="true">
       <div class="dz" data-z="left">left</div>
       <div class="dz" data-z="right">right</div>
-      <div class="dz" data-z="bottom">bottom</div>
       <div class="dz" data-z="off">hide</div>
     </div>
   </div>
@@ -258,9 +375,13 @@
     </div>
   </div>
 
-  <!-- Mobile only (≤760px): a terminal control-key accessory bar (phones lack these keys) over a
-       pane switcher. Hidden on desktop via CSS; the switcher swaps the single visible column. -->
-  <div class="mobmenu" id="mobMenu" data-view="terminal">
+  <!-- Mobile only (≤760px): a terminal control-key accessory bar (phones lack these keys) over the
+       destination nav. Hidden on desktop via CSS. The accessory bar keeps its ids and its behaviour
+       — it is a deliberate divergence from the prototype, whose terminal screen is a text input over
+       sample lines; this one is driving a real PTY, and the control keys are the thing the current
+       phone mode does well. No `data-view` is hard-coded: the screen at load is a destination root,
+       not the terminal, and app.js sets the attribute from the screen it actually applied. -->
+  <div class="mobmenu" id="mobMenu">
     <div class="ctrlbar" id="ctrlBar" role="toolbar" aria-label="Terminal control keys">
       <button type="button" data-seq="esc" aria-label="Escape"><span class="lbl">esc</span></button>
       <button type="button" data-seq="tab" aria-label="Tab"><span class="lbl">tab</span></button>
@@ -269,12 +390,18 @@
       <button type="button" data-seq="up" aria-label="Up arrow">↑</button>
       <button type="button" data-seq="down" aria-label="Down arrow">↓</button>
       <button type="button" data-seq="right" aria-label="Right arrow">→</button>
-      <button type="button" id="mobPalette" aria-label="Open the jump palette (⌘K)">⌘K</button>
     </div>
-    <nav class="mobtabs" role="tablist" aria-label="Switch pane">
-      <button type="button" role="tab" data-mview="sessions" aria-selected="false">sessions</button>
-      <button type="button" role="tab" data-mview="terminal" aria-selected="true">terminal</button>
-      <button type="button" role="tab" data-mview="library" aria-selected="false">library</button>
+    <!-- Five destinations, replacing the three-column switcher. It is a <nav> of buttons carrying
+         aria-current, NOT the tablist it used to be: that markup declared role="tablist" over
+         role="tab" children with no tabpanel and no aria-controls anywhere — a promise the DOM did
+         not keep. Selection here resets a destination to its root; depth is pushed on top and the
+         back control in #mobBar pops it. -->
+    <nav class="mobnav" id="mobNav" aria-label="Sections">
+      <button type="button" class="mobnav-b" data-dest="board" aria-current="page">board</button>
+      <button type="button" class="mobnav-b" data-dest="scheduled">scheduled</button>
+      <button type="button" class="mobnav-b" data-dest="agents">agents</button>
+      <button type="button" class="mobnav-b" data-dest="memory">memory</button>
+      <button type="button" class="mobnav-b" data-dest="more">more</button>
     </nav>
   </div>
 
@@ -289,6 +416,9 @@
 <script src="/vendor/addon-web-links.js"></script>
 <script src="/lib/preview-kind.js"></script>
 <script src="/lib/layout.js"></script>
+<!-- the phone's navigation reducer: DOM-free, and required by test.js so the whole screen
+     domain is walkable in node rather than only in a browser -->
+<script src="/lib/mobile-nav.js"></script>
 <script src="/lib/session-state.js"></script>
 <!-- The editor computes its diff with the SAME module the server saves through, so what you see
      while editing and what the server writes can never disagree. -->