anentrypoint-design 0.0.320 → 0.0.322

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "0.0.320",
+  "version": "0.0.322",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/agent-chat.js

@@ -14,6 +14,7 @@ import * as webjsx from '../../vendor/webjsx/index.js';
 import { ChatComposer, ChatMessage, makeThreadAutoScroll } from './chat.js';
 import { Select } from './content.js';
 import { Btn, Icon } from './shell.js';
+import { BreadcrumbPath } from './files.js';
 import { initializeCachesEagerly } from '../markdown-cache.js';
 
 const h = webjsx.createElement;
@@ -116,18 +117,74 @@ function AgentControls({ agents, selectedAgent, models, selectedModel, busy, sta
 // `error`/`checking` give inline validation feedback while typing/blur (the host
 // debounces its /api/stat probe and sets these): a plain-language line renders
 // under the input (aria-describedby) and save stays disabled while either is set.
-function CwdBar({ cwd, editing, draft, onEdit, onSave, onCancel, onClear, onDraft, error, checking }) {
+//
+// Practicality upgrade: setting cwd by typing an exact absolute path from memory
+// was the only path (a fresh user has no way to discover what's even browsable,
+// and a regular user re-types/re-remembers the same handful of paths every
+// session). Three additive affordances, all optional/host-driven so a host that
+// doesn't wire them keeps the old text-only behavior:
+//   - `roots` (fsAllowRoots-equivalent): one-click starting points, always
+//     visible while editing, not buried in a separate Files-tab-only picker.
+//   - `recent` (host's own small MRU list, e.g. localStorage-backed): one-click
+//     chips for the last few cwds actually used, so switching between a
+//     regular handful of working directories needs no typing at all.
+//   - `browse` (host-driven inline directory listing): clicking "browse" asks
+//     the host (via onBrowse) to list a directory's subdirectories (reusing
+//     the same confined listing endpoint the Files tab already uses), and
+//     renders them as a breadcrumb + clickable dir list right in the composer
+//     — no round-trip through the Files tab and back required anymore.
+function CwdBar({ cwd, editing, draft, onEdit, onSave, onCancel, onClear, onDraft, error, checking,
+                   roots, recent, browse, onBrowseCrumb, onBrowseEnter, onBrowsePick, onBrowseToggle }) {
   if (editing) {
     const hint = checking ? 'checking…' : (error || null);
+    const rootsRow = (roots && roots.length)
+      ? h('div', { key: 'roots', class: 'agentchat-cwd-roots', role: 'group', 'aria-label': 'accessible folders' },
+          ...roots.map((r, i) => h('button', {
+            key: 'root' + i, type: 'button', class: 'agentchat-cwd-chip',
+            onclick: () => onDraft && onDraft(r.path || r),
+          }, r.label || r.path || r)))
+      : null;
+    const recentRow = (recent && recent.length)
+      ? h('div', { key: 'recent', class: 'agentchat-cwd-recent', role: 'group', 'aria-label': 'recently used folders' },
+          h('span', { key: 'rlbl', class: 'agentchat-cwd-recent-label' }, 'recent:'),
+          ...recent.map((r, i) => h('button', {
+            key: 'rec' + i, type: 'button', class: 'agentchat-cwd-chip',
+            title: r, onclick: () => onDraft && onDraft(r),
+          }, r.split(/[/\\]/).filter(Boolean).slice(-1)[0] || r)))
+      : null;
+    const browseToggle = onBrowseToggle
+      ? h('button', { key: 'browsetoggle', type: 'button', class: 'agentchat-cwd-btn agentchat-cwd-browse-toggle',
+          'aria-expanded': browse ? 'true' : 'false',
+          onclick: () => onBrowseToggle() }, browse ? 'hide browser' : 'browse…')
+      : null;
+    const browsePanel = (browse && browse.entries)
+      ? h('div', { key: 'browsepanel', class: 'agentchat-cwd-browse', role: 'group', 'aria-label': 'browse folders' },
+          browse.segments ? BreadcrumbPath({ segments: browse.segments, root: browse.rootLabel || 'root', onNav: (i) => onBrowseCrumb && onBrowseCrumb(i) }) : null,
+          h('div', { key: 'browselist', class: 'agentchat-cwd-browse-list', role: 'listbox', 'aria-label': 'subdirectories' },
+            browse.loading
+              ? h('div', { key: 'browseloading', class: 'agentchat-cwd-browse-loading', role: 'status' }, 'loading…')
+              : (browse.entries.length
+                  ? browse.entries.map((e, i) => h('button', {
+                      key: 'be' + i, type: 'button', class: 'agentchat-cwd-browse-item', role: 'option',
+                      onclick: () => onBrowseEnter && onBrowseEnter(e.path || e.name),
+                    }, e.name || e.path))
+                  : h('div', { key: 'browseempty', class: 'agentchat-cwd-browse-empty' }, 'no subfolders here'))),
+          h('button', { key: 'browseuse', type: 'button', class: 'agentchat-cwd-btn', onclick: () => onBrowsePick && onBrowsePick(browse.current) }, 'use this folder'))
+      : null;
     return h('div', { class: 'agentchat-cwd agentchat-cwd-editing', role: 'group', 'aria-label': 'Set working directory' },
-      h('input', { class: 'agentchat-cwd-input', type: 'text', value: draft ?? cwd ?? '',
-        placeholder: 'absolute path (blank = server default)',
-        'aria-describedby': hint ? 'agentchat-cwd-hint' : null,
-        'aria-invalid': error ? 'true' : null,
-        'aria-busy': checking ? 'true' : null,
-        oninput: (e) => onDraft && onDraft(e.target.value) }),
-      Btn({ key: 'cancel', onClick: () => onCancel && onCancel(), children: 'cancel' }),
-      Btn({ key: 'save', variant: 'primary', disabled: !!(error || checking), onClick: () => onSave && onSave(), children: 'save' }),
+      h('div', { key: 'row1', class: 'agentchat-cwd-row' },
+        h('input', { class: 'agentchat-cwd-input', type: 'text', value: draft ?? cwd ?? '',
+          placeholder: 'absolute path (blank = server default)',
+          'aria-describedby': hint ? 'agentchat-cwd-hint' : null,
+          'aria-invalid': error ? 'true' : null,
+          'aria-busy': checking ? 'true' : null,
+          oninput: (e) => onDraft && onDraft(e.target.value) }),
+        browseToggle,
+        Btn({ key: 'cancel', onClick: () => onCancel && onCancel(), children: 'cancel' }),
+        Btn({ key: 'save', variant: 'primary', disabled: !!(error || checking), onClick: () => onSave && onSave(), children: 'save' })),
+      rootsRow,
+      recentRow,
+      browsePanel,
       hint ? h('span', { key: 'hint', id: 'agentchat-cwd-hint', role: 'status', 'aria-live': 'polite',
         class: 'agentchat-cwd-hint' + (error ? ' is-error' : ' is-checking') }, hint) : null);
   }
@@ -151,9 +208,11 @@ export function AgentChat(props = {}) {
     agents = [], selectedAgent = '', models = [], selectedModel = '', modelsLoading = false, agentsLoading = false,
     messages = [], busy = false, draft = '', status, banners = [],
     cwd = '', cwdEditing = false, cwdDraft, cwdError, cwdChecking = false,
+    cwdRoots, cwdRecent, cwdBrowse,
     agentName, placeholder,
     onSelectAgent, onSelectModel, onSend, onStop, onNewChat, onInput,
     onCwdEdit, onCwdSave, onCwdCancel, onCwdClear, onCwdDraft,
+    onCwdBrowseToggle, onCwdBrowseCrumb, onCwdBrowseEnter, onCwdBrowsePick,
     canSend = true,
     suggestions = [], onSuggestionClick,
     onCopyMessage, onRetryMessage, onEditMessage,
@@ -398,7 +457,9 @@ export function AgentChat(props = {}) {
     AgentControls({ agents, selectedAgent, models, selectedModel, busy, status, modelsLoading, agentsLoading,
                     onSelectAgent, onSelectModel, onNewChat, onStop, exportActions }),
     CwdBar({ cwd, editing: cwdEditing, draft: cwdDraft, error: cwdError, checking: cwdChecking,
-             onEdit: onCwdEdit, onSave: onCwdSave, onCancel: onCwdCancel, onClear: onCwdClear, onDraft: onCwdDraft }),
+             roots: cwdRoots, recent: cwdRecent, browse: cwdBrowse,
+             onEdit: onCwdEdit, onSave: onCwdSave, onCancel: onCwdCancel, onClear: onCwdClear, onDraft: onCwdDraft,
+             onBrowseToggle: onCwdBrowseToggle, onBrowseCrumb: onCwdBrowseCrumb, onBrowseEnter: onCwdBrowseEnter, onBrowsePick: onCwdBrowsePick }),
     ...(banners || []).filter(Boolean),
     h('div', { class: 'agentchat-head' },
       h('h1', { class: 'agentchat-title' }, name + (selectedModel ? ' · ' + selectedModel : '')),

package/src/components/sessions.js

@@ -155,6 +155,13 @@ export function SessionMeta({ items = [] } = {}) {
           'aria-label': 'copy ' + (it.title || it.label || 'value'),
           onclick: () => it.onCopy(it.value),
         }, 'copy') : null,
+        // Generic secondary action (e.g. a directory row's "use as chat cwd")
+        // - kept distinct from onCopy since a fact can want a non-copy action,
+        // or (rare) both.
+        it.onAction ? h('button', {
+          key: 'a', type: 'button', class: 'ds-session-meta-action',
+          onclick: () => it.onAction(it.value),
+        }, it.actionLabel || 'use') : null,
       ].filter(Boolean))));
 }
 

package/src/kits/os/shell.js

@@ -74,6 +74,8 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
     brandEl.textContent = brand;
 
     const appsBtn = makeBtn(icons.apps, 'apps', 'apps');
+    appsBtn.setAttribute('aria-haspopup', 'menu');
+    appsBtn.setAttribute('aria-expanded', 'false');
     const newInstBtn = onNewInstance ? makeBtn(icons.plus, 'instance', 'add') : null;
 
     const instSwitch = document.createElement('div');
@@ -94,17 +96,29 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
 
     const appsMenu = document.createElement('div');
     appsMenu.className = 'os-menu';
+    appsMenu.setAttribute('role', 'menu');
+    appsMenu.setAttribute('aria-label', 'Apps');
 
     const sideRail = document.createElement('div');
     sideRail.className = 'os-side-rail';
+    sideRail.setAttribute('role', 'navigation');
+    sideRail.setAttribute('aria-label', 'App launcher rail');
 
     const drawer = document.createElement('div');
     drawer.className = 'os-drawer';
     drawer.setAttribute('aria-hidden', 'true');
+    // Full-screen overlay that traps the user's attention while open — the
+    // dialog role + aria-modal + aria-labelledby give a screen reader the
+    // same "you are now in a dialog named X" announcement a sighted user
+    // gets from the visual takeover.
+    drawer.setAttribute('role', 'dialog');
+    drawer.setAttribute('aria-modal', 'true');
+    drawer.setAttribute('aria-labelledby', 'os-drawer-title');
     const drawerHeader = document.createElement('div');
     drawerHeader.className = 'os-drawer-head';
     const drawerTitle = document.createElement('span');
     drawerTitle.className = 'os-drawer-title';
+    drawerTitle.id = 'os-drawer-title';
     drawerTitle.textContent = 'apps';
     const drawerClose = document.createElement('button');
     drawerClose.className = 'os-drawer-close';
@@ -121,6 +135,7 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
     for (const app of apps) {
         const iconSvg = app.icon || icons[app.id] || '';
         const menuBtn = makeBtn(iconSvg, app.name);
+        menuBtn.setAttribute('role', 'menuitem');
         menuBtn.addEventListener('click', () => { closeMenu(); openApp(app.id); });
         appsMenu.appendChild(menuBtn);
 
@@ -143,16 +158,40 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
 
     const taskbar = document.createElement('div');
     taskbar.className = 'os-taskbar';
+    // Taskbar contents are rebuilt on a 500ms poll whenever windows open/
+    // close/gain focus (refreshTaskbar below); aria-live announces those
+    // additions/removals to a screen reader, which otherwise gets no signal
+    // that the running-window list changed. "polite" so it never interrupts.
+    taskbar.setAttribute('role', 'toolbar');
+    taskbar.setAttribute('aria-label', 'Open windows');
+    taskbar.setAttribute('aria-live', 'polite');
+    taskbar.setAttribute('aria-relevant', 'additions removals');
 
     osRoot.append(menubar, appsMenu, taskbar);
     document.body.append(sideRail, drawer);
 
-    function openMenu() { appsMenu.classList.add('open'); }
-    function closeMenu() { appsMenu.classList.remove('open'); }
-    function openDrawer() { drawer.classList.add('open'); drawer.setAttribute('aria-hidden', 'false'); }
-    function closeDrawer() { drawer.classList.remove('open'); drawer.setAttribute('aria-hidden', 'true'); }
+    function openMenu() { appsMenu.classList.add('open'); appsBtn.setAttribute('aria-expanded', 'true'); }
+    function closeMenu() { appsMenu.classList.remove('open'); appsBtn.setAttribute('aria-expanded', 'false'); }
+    // Focus management: opening the drawer moves keyboard focus onto its
+    // close button (the first reachable control inside the now-visible
+    // dialog) so Tab starts inside it, not lost on a now-hidden ancestor;
+    // closing restores focus to whichever element opened it (homeBtn is the
+    // only trigger today) so the user's keyboard position isn't lost.
+    let drawerReturnFocus = null;
+    function openDrawer() {
+        drawerReturnFocus = document.activeElement;
+        drawer.classList.add('open');
+        drawer.setAttribute('aria-hidden', 'false');
+        drawerClose.focus();
+    }
+    function closeDrawer() {
+        drawer.classList.remove('open');
+        drawer.setAttribute('aria-hidden', 'true');
+        if (drawerReturnFocus && typeof drawerReturnFocus.focus === 'function') drawerReturnFocus.focus();
+        drawerReturnFocus = null;
+    }
 
-    appsBtn.addEventListener('click', e => { e.stopPropagation(); appsMenu.classList.toggle('open'); });
+    appsBtn.addEventListener('click', e => { e.stopPropagation(); appsMenu.classList.contains('open') ? closeMenu() : openMenu(); });
     homeBtn.addEventListener('click', e => { e.stopPropagation(); drawer.classList.contains('open') ? closeDrawer() : openDrawer(); });
     drawerClose.addEventListener('click', closeDrawer);
     drawer.addEventListener('click', e => { if (e.target === drawer) closeDrawer(); });
@@ -207,6 +246,9 @@ export function createDesktopShell({ root = document.body, wm, registry, brand =
             t.type = 'button';
             t.textContent = w.title;
             t.dataset.winId = w.id;
+            // aria-current announces which window is the active one; a
+            // sighted user reads this from the .focused visual state alone.
+            if (w.focused) t.setAttribute('aria-current', 'true');
             t.addEventListener('click', () => wm.focus(w.id));
             taskbar.appendChild(t);
         }