@vale-dinap/lucidly 0.3.0 → 0.5.0

package/web/index.html

@@ -9,6 +9,7 @@
     <script src="theme.js"></script>
   </head>
   <body>
+    <nav class="tabs" id="tabs" role="tablist" aria-label="Open sessions" hidden></nav>
     <header class="top">
       <div class="brand"><img src="favicon.svg" alt="" width="20" height="20" /><span>Lucidly</span></div>
       <button class="ibtn open-btn" id="sessionsBtn" title="Open session (O)" aria-label="Open session">
@@ -28,6 +29,12 @@
         </button>
         <div class="pop wake-pop" id="wakePop" hidden></div>
       </div>
+      <div class="wake-wrap">
+        <button class="ibtn snd" id="soundBtn" aria-haspopup="dialog" aria-label="Sound alerts" title="Sound alerts">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.5 2h-14z M10 20.5a2.1 2.1 0 0 0 4 0" /><path class="waves" d="M20 7.5a6 6 0 0 1 1 3.5 M4 7.5a6 6 0 0 0-1 3.5" /><path class="mute" d="M4 4l16 16" /></svg>
+        </button>
+        <div class="pop wake-pop" id="soundPop" hidden></div>
+      </div>
       <div class="grow"></div>
       <div class="meter-wrap">
         <span class="pill warn" id="outdated" hidden title="Lucidly's engine was updated after this server started. Stop it and run lucidly again to apply the update: some data (such as token counts) may be missing until then.">Restart Lucidly to update</span>
@@ -102,7 +109,7 @@
 
     <dialog id="picker" class="picker">
       <form method="dialog" class="picker-h">
-        <h3>Open session</h3>
+        <h3 id="pickerTitle">Open session</h3>
         <nav class="seg">
           <button type="button" data-scope="project" class="on">This project</button>
           <button type="button" data-scope="all">All projects</button>
@@ -111,6 +118,7 @@
       </form>
       <div id="pickerOpen"></div>
       <ul id="pickerList" class="plist"></ul>
+      <div class="picker-hint" id="pickerHint"></div>
       <label class="picker-f" title="A file saved with the download button: keeps a run after its transcript is gone, or lets someone else open it">
         <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20V9m0 0l-4 4m4-4l4 4M5 4h14" /></svg>
         Open a saved snapshot…

package/web/style.css

@@ -1118,8 +1118,55 @@ pre .dh { color: var(--faint); font-weight: 600; }
 @keyframes gx-breathe { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--oc) 32%, transparent); } 50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--oc) 0%, transparent); } }
 .gx-state.off .gx-orb { box-shadow: 0 0 0 2px var(--border-strong); }
 .gx-time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; min-height: 1.3em; }
-.gx-title { max-width: min(70ch, 92%); font-size: 13.5px; color: var(--faint); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.3em; }
+/* Under the orb: the task in the spotlight, and the node in the middle of its chain (the step
+   under way, by default), each with a mark saying how it stands. */
+.gx-lines { width: 100%; margin-top: -6px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
+.gx-line { max-width: min(80ch, 92%); min-height: 20px; display: flex; align-items: center; justify-content: center; gap: 8px; }
+.gx-line .gx-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gx-task { font-size: 14.5px; font-weight: 550; color: var(--muted); }
+.gx-step { font-size: 13px; color: var(--faint); }
+.gx-step small { flex: none; font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--mc, var(--faint)); }
+.gx-mk { --mc: var(--faint); flex: none; box-sizing: border-box; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; color: var(--mc); }
+.gx-step .gx-mk { width: 15px; height: 15px; }
+.gx-mk svg { width: 66%; height: 66%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
+.m-live, .m-idle { --mc: var(--accent); }
+.m-done { --mc: var(--done); }
+.m-bad { --mc: var(--bad); }
+.m-ask { --mc: var(--amber); }
+.m-wait, .m-pend, .m-you { --mc: var(--faint); }
+.gx-mk.m-done, .gx-mk.m-bad, .gx-mk.m-ask { background: color-mix(in srgb, var(--mc) 18%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--mc) 55%, transparent); }
+.gx-mk.m-ask svg { width: 80%; height: 80%; stroke-width: 2.2; }
+.gx-mk.m-you svg { width: 88%; height: 88%; stroke-width: 2; }
+.gx-mk.m-wait svg { width: 72%; height: 72%; }
+/* Running: a spinning ring. Under way but quiet: the ring, still and dashed. Not started: a plain ring. */
+.gx-mk.m-live { border: 2px solid color-mix(in srgb, var(--mc) 22%, transparent); border-top-color: var(--mc); animation: spin 0.9s linear infinite; }
+.gx-mk.m-idle { border: 1.6px dashed var(--mc); }
+.gx-mk.m-pend { border: 1.6px solid var(--mc); }
 
+/* Subagents still running: a tag on the orb's left, only while some run, naming the latest one
+   ("+N" for the others); a click lists them all. */
+.gx-agents { --mc: var(--agent); position: absolute; right: calc(50% + 84px); top: 36px; width: max-content; max-width: min(300px, calc(50vw - 140px)); padding: 7px 13px 8px 10px;
+  display: flex; align-items: center; gap: 9px; border: 1.5px solid color-mix(in srgb, var(--agent) 70%, transparent); border-radius: 14px;
+  background: color-mix(in srgb, var(--agent) 9%, var(--surface)); color: var(--text); font: inherit; font-size: 13px; line-height: 1.35; text-align: left; cursor: pointer;
+  transform-origin: right center; animation: gx-agents-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1); transition: background 0.2s, box-shadow 0.2s; }
+.gx-agents:hover, .gx-agents.open { background: color-mix(in srgb, var(--agent) 16%, var(--surface)); }
+.gx-agents.open { box-shadow: 0 0 0 3px color-mix(in srgb, var(--agent) 22%, transparent); }
+.gx-agents[hidden], .gx-agpop[hidden] { display: none; }
+.gx-ag-t { min-width: 0; display: flex; flex-direction: column; }
+.gx-agents small { font-size: 10.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--agent); }
+.gx-ag-n { min-width: 0; display: flex; align-items: baseline; gap: 6px; }
+.gx-ag-t .gx-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.gx-ag-n b { flex: none; padding: 0 6px; border-radius: 999px; background: var(--agent); color: #fff; font-size: 11px; font-weight: 650; line-height: 17px; }
+@keyframes gx-agents-in { from { opacity: 0; transform: scale(0.6) translateX(12px); } }
+/* The list: under the tag, scrolling when long. */
+.gx-agpop { --mc: var(--agent); position: absolute; right: calc(50% + 84px); top: 92px; z-index: 5; width: 340px; max-width: calc(50vw - 110px); max-height: 280px; overflow-y: auto;
+  padding: 5px; border: 1px solid color-mix(in srgb, var(--agent) 40%, var(--border)); border-radius: 12px; background: var(--surface);
+  box-shadow: 0 16px 40px -16px rgb(0 0 0 / 0.45); animation: gx-pop-in 0.18s ease-out; }
+@keyframes gx-pop-in { from { opacity: 0; transform: translateY(-6px); } }
+.gx-ag-row { width: 100%; padding: 7px 9px; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
+.gx-ag-row:hover, .gx-ag-row:focus-visible { background: color-mix(in srgb, var(--agent) 12%, var(--surface)); outline: none; }
+.gx-agents .gx-mk.m-live, .gx-agpop .gx-mk.m-live { --mc: var(--agent); }
+.gx-ag-row small { color: var(--faint); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* The current task: its chain, larger, every node sized so the whole task fits the width. */
 /* The spotlight's chain: one row, one node in the middle, start and end always in view;
    placeChain() sets each node's place and opacity. */
@@ -1178,8 +1225,83 @@ pre .dh { color: var(--faint); font-weight: 600; }
 .gx-state.away .gx-orb { opacity: 0.8; }
 .gx-state.away .gx-orb:hover { opacity: 1; }
 @media (prefers-reduced-motion: reduce) {
-  .gx-orb::before, .gx-orb.swap svg, .gx-ask { animation: none !important; }
+  .gx-orb::before, .gx-orb.swap svg, .gx-ask, .gx-agents, .gx-agpop, .gx-mk { animation: none !important; }
   .gx-track > .fn { transition: none; }
   .gx-track > .fn.gx-new .fn-s, .gx-track > .fn.gx-new .fn-l { animation: none; }
 }
 
+
+/* ───────── session tabs: one per open session, above the top bar (from two tabs on) */
+.tabs {
+  flex: none; display: flex; align-items: flex-end; gap: 2px; padding: 6px 12px 0; min-width: 0; overflow-x: auto; scrollbar-width: none;
+  /* The line under the tabs is a shadow, so the tab on screen covers it and opens into the top bar. */
+  background: var(--sunken); box-shadow: inset 0 -1px 0 var(--border); position: relative; z-index: 7;
+}
+.tabs::-webkit-scrollbar { display: none; }
+.tab {
+  --c: var(--faint);
+  flex: 0 1 220px; min-width: 110px; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 4px 0 11px;
+  border: 1px solid transparent; border-bottom: 0; border-radius: 9px 9px 0 0; color: var(--muted); font-size: 12.5px; cursor: pointer;
+  position: relative; transition: background 0.15s, color 0.15s;
+}
+.tab:hover { background: var(--hover); color: var(--text); }
+.tab.on { background: var(--surface); border-color: var(--border); color: var(--text); font-weight: 560; }
+.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+.tab .tt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tab .tag { flex: none; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; font-size: 10.5px; font-weight: 650; line-height: 16px; text-align: center; color: var(--agent); background: var(--agent-bg); }
+.tab .tx { flex: none; width: 20px; height: 20px; padding: 3px; border: 0; border-radius: 5px; background: none; color: var(--faint); cursor: pointer; opacity: 0; }
+.tab:hover .tx, .tab.on .tx, .tab .tx:focus-visible { opacity: 1; }
+.tab .tx:hover { background: var(--border); color: var(--text); }
+.tab .tx svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+.tab-add { flex: none; align-self: center; width: 26px; height: 26px; margin: 0 0 3px 4px; padding: 5px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; }
+.tab-add:hover { background: var(--hover); color: var(--text); }
+.tab-add svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
+
+/* The state dot, in the orb's colours: working (pulsing), your turn, in trouble, finished. */
+.tdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
+.tab:has(.s-work) { --c: var(--accent); }
+.tab:has(.s-you) { --c: var(--warn); }
+.tab:has(.s-bad) { --c: var(--bad); }
+.tab:has(.s-done), .tab:has(.s-rest) { --c: var(--done); }
+.tdot.s-rest { opacity: 0.55; }
+.tdot.s-quiet, .tdot.s-paused { background: none; box-shadow: inset 0 0 0 1.5px var(--faint); }
+.tdot.s-work { animation: beat 1.6s ease-out infinite; }
+
+/* A tab that wants you: it flashes a few times, then glows until you open it. */
+.tab.attn:not(.on) { color: var(--text); background: color-mix(in srgb, var(--c) 14%, var(--sunken)); border-color: color-mix(in srgb, var(--c) 45%, transparent); }
+.tab.attn:not(.on)::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--c); }
+.tab.flash:not(.on) { animation: tab-flash 0.8s ease-in-out 4; }
+@keyframes tab-flash { 50% { background: color-mix(in srgb, var(--c) 42%, var(--sunken)); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent); } }
+
+/* The session list: what's already in a tab, and a "new tab" button on each row. */
+.plist .pin-tab { flex: none; font-size: 11px; font-weight: 600; color: var(--accent); background: var(--accent-bg); padding: 1px 7px; border-radius: 99px; white-space: nowrap; }
+.plist .pnew { flex: none; height: 24px; margin: -4px -2px -4px 0; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); color: var(--muted); font-size: 12px; font-weight: 550; white-space: nowrap; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; }
+.plist li:hover .pnew, .plist .pnew:focus-visible { opacity: 1; }
+.plist .pnew:hover { background: var(--accent-bg); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
+.picker-hint { flex: none; padding: 0 18px 8px; color: var(--faint); font-size: 11.5px; }
+.picker-hint:empty { display: none; }
+
+/* ───────── sound alerts (the bell next to keep awake) */
+.snd { color: var(--faint); }
+.snd svg { width: 19px; height: 19px; stroke-width: 1.7; }
+.snd .waves { opacity: 0; transition: opacity 0.2s; }
+.snd .mute { opacity: 0; }
+.snd[data-snd='off'] .mute { opacity: 1; }
+.snd[data-snd='on'] { color: var(--accent); }
+.snd[data-snd='on'] .waves { opacity: 1; }
+.snd[data-snd='wait'] { color: var(--warn); }
+.snd[data-snd='err'] { color: var(--bad); }
+#soundPop { width: 390px; }
+.sn-ev { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px 2px; }
+.sn-l { flex: 1; min-width: 0; font-size: 12.5px; }
+.sn-l b { font-weight: 560; }
+.sn-l small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; line-height: 1.35; }
+.sn-ev select { flex: none; width: 118px; height: 24px; margin-top: -2px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); font-size: 12px; cursor: pointer; }
+.sn-ev .tbtn:disabled { opacity: 0.4; cursor: default; }
+.sn-ev .tbtn { flex: none; height: 24px; padding: 0 9px; font-size: 12px; margin-top: -2px; }
+.sn-away { padding-top: 10px; border-top: 1px solid var(--border); }
+.sn-vol { display: flex; align-items: center; gap: 10px; margin: 0 0 10px 2px; font-size: 12.5px; color: var(--muted); }
+.sn-vol input { flex: 1; accent-color: var(--accent); }
+.wk-st.st-on { color: var(--text); }
+.wk-st.st-on i { background: var(--accent); }
+.wk-st.st-wait i { background: var(--warn); }