@shardflux/desktop-linux-arm64 0.0.0-stage → 0.1.0-next.4

package/app/ui/tokens.css

@@ -0,0 +1,149 @@
+/* Shardflux design tokens. Source of truth for web and app UI.
+   Rules for using them: docs/DESIGN_SYSTEM.md. Values match the approved landing page (v2).
+   Dark is the primary theme. The light theme exists for the app (settings, docs, invoices) and printouts. */
+
+
+:root {
+  color-scheme: dark;
+
+  /* surfaces */
+  --sf-bg: #0A0A0B;            /* page */
+  --sf-raise: #111113;         /* panels, code, windows */
+  --sf-overlay: #1B1C1F;       /* menus, popovers, tooltips */
+
+  /* app top bar: the one light surface in the dark app (marketing nav stays dark) */
+  --sf-bar-bg: #F6F4F0;
+  --sf-bar-ink: #15161A;
+  --sf-bar-muted: #5B6068;
+  --sf-bar-line: rgba(21, 22, 26, .10);
+  --sf-bar-active: rgba(21, 22, 26, .07);
+
+  /* glass: summary cards at the top of app pages only (dark theme) */
+  --sf-glass-fill: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018) 55%, rgba(255, 255, 255, .03));
+  --sf-glass-edge: linear-gradient(140deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .05) 38%, rgba(255, 255, 255, .02) 62%, rgba(255, 255, 255, .16));
+  --sf-glass-blur: blur(22px) saturate(170%);
+  --sf-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .035), 0 24px 48px -28px rgba(0, 0, 0, .9);
+  --sf-glass-glow-cold: #6FB4F0;
+
+  /* text */
+  --sf-ink: #EDEBE7;           /* primary text, primary button fill */
+  --sf-muted: #8B8F96;         /* secondary text, body copy on marketing */
+  --sf-dim: #5D6168;           /* labels, table headers, disabled */
+
+  /* lines */
+  --sf-line: rgba(237, 235, 231, .09);   /* dividers, row rules */
+  --sf-line-2: rgba(237, 235, 231, .16); /* panel borders, inputs, ghost buttons */
+  --sf-line-3: rgba(237, 235, 231, .34); /* hover on bordered controls */
+
+  /* the one accent: molten amber. Means "running" and marks the single most important number */
+  --sf-molten: #FF8A3D;
+
+  /* workspace state (text colours; see the state rules) */
+  --sf-state-running: var(--sf-molten);
+  --sf-state-paused: var(--sf-ink);
+  --sf-state-archived: var(--sf-dim);
+  --sf-state-starting: var(--sf-muted);
+
+  /* shard glyph fills for the same states (the glyph needs more contrast steps than text) */
+  --sf-glyph-running: var(--sf-molten);
+  --sf-glyph-paused: rgba(237, 235, 231, .55);
+  --sf-glyph-archived: rgba(237, 235, 231, .16);
+
+  /* feedback. Never reuse amber for warnings: amber means running */
+  --sf-success: #7BC68A;
+  --sf-warning: #E9C46A;
+  --sf-danger: #F0645A;
+
+  /* code syntax (inside --sf-raise windows only) */
+  --sf-code-keyword: #C6A6F2;
+  --sf-code-string: #9FD39A;
+  --sf-code-call: #F2C08A;
+  --sf-code-comment: #5D6168;
+  --sf-code-line-number: #3E4147;
+
+  /* type */
+  --sf-display: "Funnel Display", system-ui, sans-serif;
+  --sf-body: "Funnel Sans", system-ui, sans-serif;
+  --sf-mono: "Fragment Mono", ui-monospace, Menlo, monospace;
+
+  /* type scale (px). App UI lives at 13-15; marketing uses the top of the scale */
+  --sf-text-11: 11px;  /* uppercase mono labels only */
+  --sf-text-12: 12.5px;/* table headers, captions */
+  --sf-text-13: 13px;  /* mono data, small UI */
+  --sf-text-14: 14px;  /* app body, buttons, nav */
+  --sf-text-15: 15px;  /* table cells, descriptions */
+  --sf-text-17: 17px;  /* marketing body */
+  --sf-text-20: 20px;  /* card and dialog titles */
+  --sf-text-26: 26px;  /* app page titles */
+  --sf-text-44: 44px;  /* big numbers */
+  --sf-text-52: 52px;  /* marketing section headings */
+  --sf-text-72: 72px;  /* marketing hero only */
+
+  /* spacing: 4 px base */
+  --sf-1: 4px; --sf-2: 8px; --sf-3: 12px; --sf-4: 16px; --sf-5: 20px; --sf-6: 24px;
+  --sf-8: 32px; --sf-10: 40px; --sf-12: 48px; --sf-16: 64px; --sf-24: 96px; --sf-35: 140px;
+
+  /* radii */
+  --sf-radius-sm: 4px;   /* chips, code inline */
+  --sf-radius: 6px;      /* buttons, inputs, tabs */
+  --sf-radius-lg: 12px;  /* panels, windows, dialogs */
+  --sf-radius-glass: 16px; /* summary cards */
+
+  /* layout */
+  --sf-max: 1200px;
+  --sf-gutter: clamp(20px, 4vw, 48px);
+  --sf-header: 64px;
+
+  /* motion */
+  --sf-ease-out: cubic-bezier(.2, .8, .2, 1);
+  --sf-ease-in-out: cubic-bezier(.65, 0, .35, 1);
+  --sf-fast: 150ms;
+  --sf-base: 250ms;
+  --sf-slow: 600ms;
+}
+
+/* Light theme: app surfaces only (never the marketing site). Same roles, bone paper. */
+:root[data-theme="light"] {
+  color-scheme: light;
+  --sf-bg: #EDEBE7;
+  --sf-raise: #F6F4F0;
+  --sf-overlay: #FFFFFF;
+  --sf-ink: #15161A;
+  --sf-muted: #5B6068;
+  --sf-dim: #8A8E94;
+  --sf-line: rgba(21, 22, 26, .10);
+  --sf-line-2: rgba(21, 22, 26, .18);
+  --sf-line-3: rgba(21, 22, 26, .36);
+  --sf-molten: #D2691E;          /* darker amber keeps contrast on bone */
+  --sf-glyph-paused: rgba(21, 22, 26, .55);
+  --sf-glyph-archived: rgba(21, 22, 26, .16);
+  --sf-success: #2F8A4A;
+  --sf-warning: #9A7209;
+  --sf-danger: #C8372D;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root { --sf-fast: 0ms; --sf-base: 0ms; --sf-slow: 0ms; }
+}
+
+/* Summary card. Markup: <div class="sf-glass"> title, figure, bar, context line </div>.
+   Put the blurred state glows behind the row, not inside the card. */
+.sf-glass {
+  position: relative; overflow: hidden;
+  padding: 20px 22px 22px; border-radius: var(--sf-radius-glass);
+  display: flex; flex-direction: column; gap: 8px;
+  background: var(--sf-glass-fill);
+  -webkit-backdrop-filter: var(--sf-glass-blur); backdrop-filter: var(--sf-glass-blur);
+  box-shadow: var(--sf-glass-shadow);
+}
+.sf-glass::before {
+  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
+  background: var(--sf-glass-edge);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor; mask-composite: exclude;
+}
+.sf-glass::after {
+  content: ""; position: absolute; left: -20%; top: -60%; width: 90%; height: 120%; pointer-events: none;
+  background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent); transform: rotate(-12deg);
+}
+.sf-glass > * { position: relative; z-index: 1; }

package/app/ui/tray.mjs

@@ -0,0 +1,61 @@
+// AgentMenu.swift: the top-bar panel. Approvals, New conversation, the conversations (live, then "N done"), errors,
+// and the ⋯ overflow; each row's ⋯ opens its actions. Geometry and type follow the Mac menu (420 wide, 36 pt rows).
+import {icon,appMark} from './icons.mjs';
+import {escape as e,accountConnected} from './core.mjs';
+export function compactElapsed(since,now=Date.now()){const s=Math.max(0,Math.floor((now-Date.parse(since))/1000));return s<60?`${s}s`:s<3600?`${Math.floor(s/60)}m`:s<86400?`${Math.floor(s/3600)}h`:`${Math.floor(s/86400)}d`;}
+export function installTray({model,host,cli,render,button,registerActions,performAction}){
+  const T={done:false,overflow:false,actions:null};model.trayState=T;
+  const prior=window.renderSurface;
+  const stateLabel={working:'working','needs-you':'needs you','sign-in':'sign in needed',parked:'parked',done:'done'};
+  // menuActionLabel: icon in secondary ink, the title, an optional shortcut.
+  const item=(title,action,name,shortcut='',extra='')=>`<button class="menu-item" data-action="${action}">${icon(name,13)}<span class="menu-title">${title}</span>${shortcut?`<span class="menu-shortcut">${e(shortcut)}</span>`:''}${extra}</button>`;
+  const rule='<div class="menu-rule"></div>';
+  function row(r){
+    const open=T.actions===r.id;
+    return `<div class="session-row ${open?'actions-open':''}" data-row="${e(r.id)}" title="${e(`${r.title} · ${stateLabel[r.state]} · ${r.workspace_key}${r.last_message?`\n${r.last_message}`:''}`)}">
+      <button class="session-open" data-action="open:${e(r.reference)}"><span class="state-dot ${r.state}"></span>${appMark(r.app,14)}<span class="session-title ${r.state==='done'?'done':''}">${e(r.title)}</span><span class="session-project">${e(r.project)}</span><span class="session-age">${compactElapsed(r.since)}</span></button>
+      <button class="row-tool" data-action="archive:${e(r.id)}" title="Archive conversation" aria-label="Archive conversation">${icon('archive',12)}</button>
+      <button class="row-tool ${open?'pressed':''}" data-action="row-actions:${e(r.id)}" title="More actions" aria-label="More actions">${icon('ellipsis',13)}</button></div>`;
+  }
+  const approvalCount=()=>(model.integrations?.credentials?.length||0)+(model.integrations?.requests?.length||0);
+  function approvals(){const i=model.integrations||{};return (i.credentials||[]).map(r=>card(`Sign in to ${e(hostOf(r.site))}`,`Share ${r.fields.map(e).join(' and ')} from your vault.`,`credential:${r.id}`,`deny-credential:${r.id}`,`always-credential:${r.id}`,r.prompt)).join('')+(i.requests||[]).map(r=>card(r.outside?'Access outside conversation':'Device request',e(r.summary),`review:${r.request_id}`,`deny:${r.request_id}`,null,r.summary)).join('');}
+  const hostOf=site=>{try{return new URL(site).host;}catch{return site;}};
+  // ApprovalCard: lock.shield, the title and two lines, Review… and Deny; a credential adds ⋯ (Always allow for this project).
+  function card(title,detail,review,deny,always,help=''){return `<div class="approval-card"><span class="approval-icon">${icon('shield-lock',17)}</span><div class="approval-body"><b>${title}</b><p title="${e(help||'')}">${detail}</p><div class="approval-actions">${button('Review…',review,'glass-button')}${button('Deny',deny,'plain')}<span class="grow"></span>${always?`<button class="more" data-action="approval-more:${always.slice(18)}" title="More approval options" aria-label="More approval options">${icon('ellipsis',14)}</button>`:''}</div></div></div>`;}
+  function overflow(){const f=model.integrations?.files?.placeholders||[],update=!!model.settings?.update?.update_available;
+    return `<div class="menu-popover overflow" role="menu">${item('Settings…','settings','settings','Ctrl+,')}${item('Check for updates','updates','rotate-cw','',update?'<span class="update-dot"></span>':'')}${rule}${item('Open files','files','folder')}${f.slice(0,5).map((x,i)=>item(`Download ${e(x.path.split('/').at(-1))}`,`download:${i}`,'circle-arrow-down',sizeText(x.size))).join('')}${rule}${item('Quit','quit','circle-x','Ctrl+Q')}</div>`;}
+  function rowActions(r){return `<div class="menu-popover row-actions" role="menu"><div class="menu-heading">${e(r.title)}</div>${item('Open',`open:${e(r.reference)}`,'square-arrow-up-right')}${item('New thread on this computer',`thread:${e(r.id)}`,'monitor')}${rule}${item('Archive',`archive:${e(r.id)}`,'archive')}${item('Copy workspace key',`copy-key:${e(r.workspace_key)}`,'copy')}</div>`;}
+  // ByteCountFormatter, binary count style: 60,000,000 bytes is 57.2 MB.
+  const sizeText=n=>{const units=['bytes','KB','MB','GB','TB'];let i=0,v=n;while(v>=1024&&i<units.length-1){v/=1024;i++;}return `${i<2?Math.round(v):new Intl.NumberFormat(undefined,{maximumFractionDigits:1}).format(v)} ${units[i]}`;};
+  function panel(){
+    const rows=model.rows||[],live=rows.filter(r=>r.state!=='done'),done=rows.filter(r=>r.state==='done'),signedIn=model.signedIn!==false;
+    const selected=rows.find(r=>r.id===T.actions);
+    const status=!signedIn?'Sign in to Shardflux to see your conversations here.':model.trayStatus||'';
+    const error=model.error||(live.length&&status&&signedIn?status:'');
+    const list=!live.length&&!done.length?`<p class="menu-empty">${e(status||'Your conversations will appear here.')}</p>`:
+      `<div class="session-list" style="max-height:${Math.max(108,(screen.availHeight||800)-180-approvalCount()*88)}px">${live.map(row).join('')}${done.length?`<button class="done-toggle" data-action="tray-done">${icon(T.done?'chevron-down':'chevron-right',10)}<span>${done.length} done</span></button>${T.done?done.map(row).join(''):''}`:''}</div>`;
+    const update=!!model.settings?.update?.update_available;
+    return `<section class="menu-panel ${T.overflow?'with-overflow':''} ${selected?'with-actions':''}" style="--placeholders:${Math.min(5,(model.integrations?.files?.placeholders||[]).length)}">
+      ${approvals()}<button class="new-conversation" data-action="${signedIn?'launcher':'onboarding'}">${icon('plus',13)}<span class="menu-title">New conversation</span><span class="menu-shortcut">Ctrl+N</span></button>${rule}${list}
+      ${error?`<div class="menu-error">${icon('circle-alert',13)}<div><p>${e(error)}</p>${model.trayStatus&&signedIn?button('Refresh','tray-refresh','bordered'):''}${model.createdKey?button('Open created conversation',`open:${e(model.createdKey)}`,'plain'):''}</div></div>`:''}
+      <span class="grow"></span><footer class="menu-foot"><button class="overflow-toggle ${T.overflow?'pressed':''}" data-action="tray-overflow" title="More options" aria-label="${update?'More options, update available':'More options'}">${icon('ellipsis',16)}${update?'<span class="update-dot"></span>':''}</button></footer>
+      ${T.overflow?`<div class="menu-dismiss" data-action="tray-dismiss"></div>${overflow()}`:selected?`<div class="menu-dismiss" data-action="tray-dismiss"></div>${rowActions(selected)}`:''}</section>`;
+  }
+  window.renderSurface=()=>{if(model.view!=='tray')return prior();document.querySelector('#app').innerHTML=panel();requestAnimationFrame(()=>{const p=document.querySelector('.menu-panel');if(p)void host('resize',{height:Math.min(760,p.offsetHeight+24)});});};
+  registerActions({'tray-refresh':async()=>{await window.sfRefreshTray?.();},'tray-done':()=>{T.done=!T.done;},'tray-overflow':()=>{T.overflow=!T.overflow;T.actions=null;},'tray-dismiss':()=>{T.overflow=false;T.actions=null;}});
+  const app=document.querySelector('#app');
+  // The row's ⋯ toggles its actions; every other action closes the panel's menus and then the panel, as an NSMenu does.
+  app.addEventListener('click',ev=>{if(model.view!=='tray')return;const a=ev.target.closest('[data-action]')?.dataset.action;if(!a)return;
+    if(a.startsWith('row-actions:')){ev.stopImmediatePropagation();T.actions=T.actions===a.slice(12)?null:a.slice(12);T.overflow=false;render();return;}
+    if(!a.startsWith('tray-')&&!a.startsWith('approval-more:')){T.overflow=false;T.actions=null;void host('hide');}},true);
+  // Right-click on a row: its context menu, natively (Open, New thread on this computer, Archive, Copy workspace key).
+  app.addEventListener('click',ev=>{if(model.view!=='tray')return;const m=ev.target.closest('[data-action^="approval-more:"]');if(!m)return;ev.stopImmediatePropagation();const r=m.getBoundingClientRect();void host('popup',{x:Math.round(r.right),y:Math.round(r.bottom+2),width:1,height:1,align:'right',items:[{label:'Always allow for this project',action:`always-credential:${m.dataset.action.slice(14)}`}]});},true);
+  app.addEventListener('contextmenu',ev=>{if(model.view!=='tray')return;const el=ev.target.closest('[data-row]');ev.preventDefault();if(!el)return;const r=(model.rows||[]).find(r=>r.id===el.dataset.row);if(!r)return;
+    void host('popup',{x:Math.round(ev.clientX),y:Math.round(ev.clientY),width:1,height:1,items:[{label:'Open',action:`open:${r.reference}`},{label:'New thread on this computer',action:`thread:${r.id}`},{label:'Archive',action:`archive:${r.id}`},{separator:true},{label:'Copy workspace key',action:`copy-key:${r.workspace_key}`}]});});
+  // Updates.swift: the CLI's update check, at start and then every six hours; a newer release puts the dot on ⋯.
+  async function checkUpdates(){try{(model.settings??={}).update=await cli(['update','--check','--json']);if(model.view==='tray')render();}catch{}}
+  window.sfCheckUpdates=checkUpdates;void checkUpdates();setInterval(checkUpdates,6*3600*1000);
+  window.addEventListener('keydown',ev=>{if(model.view!=='tray')return;
+    if(ev.key==='Escape'){if(T.overflow||T.actions){T.overflow=false;T.actions=null;render();}else void host('hide');}
+    else if(ev.ctrlKey&&!ev.shiftKey&&!ev.altKey&&['n',',','q'].includes(ev.key.toLowerCase())){ev.preventDefault();const a={n:'launcher',',':'settings',q:'quit'}[ev.key.toLowerCase()];T.overflow=false;void host('hide').then(()=>performAction(a));}});
+}

package/package.json

@@ -1,6 +1,24 @@
 {
   "name": "@shardflux/desktop-linux-arm64",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-next.4",
+  "description": "Shardflux desktop app for Ubuntu Linux",
+  "license": "Apache-2.0",
+  "os": [
+    "linux"
+  ],
+  "cpu": [
+    "arm64"
+  ],
+  "files": [
+    "app",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}