@leftoff/cli 0.9.9-beta.5 → 0.9.9-beta.7

package/ui/start.js

@@ -122,6 +122,12 @@ export function startPageHtml(data, ui = {}, { esc, icon, emoji = () => '', loca
 export function startBrowseHtml(b, { esc, icon = () => '', machine = '' } = {}) {
   let h = '<div class="start-browse" id="start-browse" role="region" aria-label="Folders on ' + esc(machine) + '">'
   const d = b && b.data
+  // or type one you know (~/src/project, or a full path): the browser goes there; the same rules as walking to it
+  const goTo = '<form class="sb-path" data-form="start-browse-path" novalidate><label class="sb-path-l" for="sb-path-in">Go to a folder</label><div class="sb-path-row">' +
+    '<input type="text" id="sb-path-in" class="sb-path-in" name="path" placeholder="~/code/web" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" enterkeyhint="go"' + (b && b.pathError ? ' aria-invalid="true" aria-describedby="sb-path-err"' : '') + '>' +
+    '<button type="submit" class="btn">Go</button></div>' +
+    (b && b.pathError ? '<p class="start-rule bad sb-path-err" id="sb-path-err" role="alert" data-st="path-err"></p>' : '') + '</form>'
+  if (!d) h += goTo
   if (d) {
     h += '<nav class="sb-crumbs" aria-label="Folder">' + d.crumbs.map((c, i) => (i ? '<span class="sb-sep" aria-hidden="true">/</span>' : '') +
       '<button type="button" class="sb-crumb" data-action="start-browse-go" data-crumb="' + i + '"' + (i === d.crumbs.length - 1 ? ' aria-current="location"' : '') + ' data-st="crumb-' + i + '"></button>').join('') + '</nav>'
@@ -129,6 +135,7 @@ export function startBrowseHtml(b, { esc, icon = () => '', machine = '' } = {})
       (d.parent ? '<button type="button" class="btn sb-up" data-action="start-browse-up" aria-label="Up one folder">' + icon('chevron-left') + 'Up</button>' : '') +
       '<span class="sb-cur"><span class="sb-cur-name" data-st="cur"></span>' + (d.git ? ' <span class="start-badge git">git</span>' : ' <span class="start-badge">not a git repo</span>') + '</span>' +
       '<button type="button" class="btn primary sb-use" data-action="start-browse-use"' + (d.parent ? '' : ' disabled') + '>Use this folder</button></div>'
+    h += goTo
     if (d.shortcuts && d.shortcuts.length > 1) h += '<div class="sb-cuts"><span class="sb-cuts-l">Jump to</span>' + d.shortcuts.map((c, i) => '<button type="button" class="sb-cut" data-action="start-browse-go" data-cut="' + i + '" data-st="cut-' + i + '"></button>').join('') + '</div>'
     if (!d.entries.length) h += '<p class="start-empty">No folders in here.</p>'
     else h += '<ul class="sb-list">' + d.entries.map((e, i) => '<li><button type="button" class="sb-dir" data-action="start-browse-go" data-entry="' + i + '">' + icon('folder') + '<span class="sb-name" data-st="entry-' + i + '"></span>' + (e.git ? '<span class="start-badge git">git</span>' : '') + icon('chevron-right', 'ic sb-go') + '</button></li>').join('') + '</ul>'
@@ -141,6 +148,17 @@ export function startBrowseHtml(b, { esc, icon = () => '', machine = '' } = {})
   return h
 }
 
+// What you typed in "Go to a folder", as a path to ask for: no spaces around
+// it, no quotes a copy brought along, a shell's "\ " back to a space, no
+// trailing slash. "~" stays "~"; the Mac resolves it (src/dirs.js checkFolder).
+export function typedPath(v) {
+  let t = String(v == null ? '' : v).trim()
+  if (/^(['"]).*\1$/.test(t) && t.length >= 2) t = t.slice(1, -1).trim()
+  t = t.replace(/\\ /g, ' ')
+  if (t.length > 1) t = t.replace(/\/+$/, '') || '/'
+  return t
+}
+
 // The text for every [data-st] on the page: names and paths from a Mac's disk.
 export function startTexts(data, ui = {}) {
   const t = {}
@@ -153,6 +171,7 @@ export function startTexts(data, ui = {}) {
     ;(d.shortcuts || []).forEach((c, i) => { t['cut-' + i] = c.label })
     d.entries.forEach((e, i) => { t['entry-' + i] = e.name })
   }
+  if (ui.browse && ui.browse.pathError) t['path-err'] = ui.browse.pathError
   for (const a of (data && Array.isArray(data.pending) ? data.pending : [])) if (a.firstTime) t['ask-folder-' + a.id] = a.folder || ''
   return t
 }
@@ -189,6 +208,22 @@ export function startAsksBanner(info, { esc, icon, local = true, clock = (x) =>
   }).join('')
 }
 
+// Asked once on THIS Mac's board when it pairs a phone or sees a new Mac:
+// may it start sessions here? No is the default (first, and what doing
+// nothing means); Yes turns on the switch, and Trust my paired devices if it's
+// off (the words say so). Never shown off this Mac.
+export function startPairAskHtml(info, { esc, local = true, busy = false } = {}) {
+  const a = info && info.pairAsk
+  if (!a || !local) return ''
+  const mac = info.machine || 'this Mac'
+  const who = a.kind === 'mac' ? (a.name || 'your other Mac') : 'your phone'
+  const what = a.kind === 'mac' ? 'Let ' + who + ' start sessions here?' : 'Let your phone start sessions here?'
+  const yes = 'Yes turns on “Allow starting sessions from other devices” for ' + mac + (info.trust ? '' : ', and Trust my paired devices so you can answer its prompts there') + '. It applies to every paired phone and Mac; change it any time in Settings → Privacy & security.'
+  return '<div class="banner info pair-ask" role="region" aria-label="' + esc(what) + '"><span class="grow"><b>' + esc(what) + '</b> ' + esc(a.kind === 'mac' ? who + ' could start Claude Code on ' + mac + ' with nobody here;' : 'It could start Claude Code on ' + mac + ' with nobody here;') + ' its edits and commands still wait for you in Needs you. ' + esc(yes) + '</span>' +
+    '<button type="button" class="btn" data-action="pair-ask-no"' + (busy ? ' aria-disabled="true"' : '') + '>No</button>' +
+    '<button type="button" class="btn" data-action="pair-ask-yes"' + (busy ? ' aria-disabled="true"' : '') + '>Yes, allow</button></div>'
+}
+
 // The session page's line for a session Leftoff runs: where it runs, who
 // started it, and Stop / Resume. The error (Claude Code's own words) is put
 // in with textContent by app.js ([data-headless-err]).
@@ -209,8 +244,22 @@ export function headlessBarHtml(s, { esc, icon, may = true } = {}) {
 }
 
 // Settings → Privacy & security: the one switch, on this Mac only.
-export function startsSettingHtml(info, { esc, local = true } = {}) {
+// 0.9.9: a setting kept only on one Mac (not in the synced config.json) wears a
+// pill beside its label: "🖥️ studio only", with a styled tip. Synced settings
+// get none, so the pill alone tells you which kind it is.
+export const LOCAL_TIP = 'Kept on this Mac; doesn’t sync.'
+export function localPillHtml({ machine, emoji = '', esc }) {
+  return ' <span class="local-pill" data-tip="' + esc(LOCAL_TIP) + '">' + (emoji ? '<span aria-hidden="true">' + esc(emoji) + '</span> ' : '') + esc(machine || 'this Mac') + ' only<span class="sr-only">: ' + esc(LOCAL_TIP) + '</span></span>'
+}
+// Away from that Mac the control is locked, and looks it: a lock, not just grey.
+export function lockedAttrs(local) { return local ? '' : ' disabled aria-disabled="true"' }
+export function lockHtml(local, icon) { return local ? '' : '<span class="lock" aria-hidden="true">' + (icon ? icon('lock') : '🔒') + '</span>' }
+
+export function startsSettingHtml(info, { esc, local = true, emoji = '', icon = null } = {}) {
   if (!info) return ''
-  return '<label for="f-start-allow">Start sessions</label><label class="check"><input id="f-start-allow" type="checkbox"' + (info.allowRemote ? ' checked' : '') + (local ? '' : ' disabled') + '><span>Allow starting sessions from other devices</span></label>' +
-    '<div class="hint">Off: a session your phone or another Mac starts here waits until someone at this Mac confirms it. On: it starts right away, and this Mac shows a notification each time. Needs Trust my paired devices. Kept on this Mac only (it doesn’t sync)' + (local ? '.' : '; change it on ' + esc(info.machine || 'that Mac') + '.') + '</div>'
+  const m = esc(info.machine || 'that Mac')
+  return '<label for="f-start-allow">Start sessions' + localPillHtml({ machine: info.machine, emoji, esc }) + '</label>' +
+    '<label class="check' + (local ? '' : ' locked') + '"><input id="f-start-allow" type="checkbox"' + (info.allowRemote ? ' checked' : '') + lockedAttrs(local) + '>' + lockHtml(local, icon) + '<span>Allow starting sessions from other devices</span></label>' +
+    '<div class="hint">Off: a session your phone or another Mac starts here waits until someone at this Mac confirms it. On: it starts right away, and this Mac shows a notification each time. Needs Trust my paired devices.</div>' +
+    '<div class="hint local-hint">' + (local ? 'Or run <code>leftoff starts on</code> on this Mac.' : 'Change on ' + m + ', or run <code>leftoff starts on</code> there.') + '</div>'
 }