sitevision-cli 1.0.0-beta.16 → 1.0.0-beta.17

package/dist/shell/Frame.d.ts

@@ -28,6 +28,12 @@ export declare function appStatus(project: ProjectInfo): {
     signing: boolean;
     scriptsWarning: string | undefined;
 };
+/** The name shown for an app in the navigator, and what the filter matches. */
+export declare function appLabel(app: ProjectInfo): string;
+/** Indices into `apps` whose label fuzzy-matches the filter. */
+export declare function navMatches(apps: ProjectInfo[], filter: string): number[];
+/** Next selectable index when moving by `delta`, wrapping at both ends. */
+export declare function navMove(ring: number[], selected: number, delta: number): number;
 export interface NavigatorProps {
     apps: ProjectInfo[];
     groupOf: (app: ProjectInfo) => string;
@@ -38,8 +44,9 @@ export interface NavigatorProps {
     single: boolean;
     settingsSelected?: boolean;
     width: number;
+    filter?: string;
 }
-export declare function Navigator({ apps, groupOf, selected, focused, tasks, height, single, settingsSelected, width, }: NavigatorProps): import("react").JSX.Element;
+export declare function Navigator({ apps, groupOf, selected, focused, tasks, height, single, settingsSelected, width, filter, }: NavigatorProps): import("react").JSX.Element;
 export declare function NavigatorStrip({ apps, selected, focused, }: Pick<NavigatorProps, 'apps' | 'selected' | 'focused'>): import("react").JSX.Element;
 export declare function elapsed(task: Task): string;
 export interface Hint {

package/dist/shell/Frame.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Text } from 'ink';
 import Spinner from 'ink-spinner';
 import { appTypeOf, getPackageJsonSyncChanges, localizedText, } from '../utils/project-detection.js';
+import { fuzzyMatch } from './actions.js';
 import { t } from '../utils/i18n.js';
 export const ACCENT = 'cyan';
 export const NARROW_BELOW = 100;
@@ -40,7 +41,24 @@ function Dots({ project }) {
     const dot = (ok, warn = false) => (_jsx(Text, { color: ok ? 'green' : warn ? 'yellow' : 'red', children: "\u25CF" }));
     return (_jsxs(Text, { children: [dot(s.deps), dot(s.config), dot(s.sync === 0, s.sync > 0), dot(s.signing, !s.signing)] }));
 }
-export function Navigator({ apps, groupOf, selected, focused, tasks, height, single, settingsSelected = false, width, }) {
+/** The name shown for an app in the navigator, and what the filter matches. */
+export function appLabel(app) {
+    return localizedText(app.manifest.name) || app.manifest.id;
+}
+/** Indices into `apps` whose label fuzzy-matches the filter. */
+export function navMatches(apps, filter) {
+    return apps
+        .map((_, index) => index)
+        .filter(index => fuzzyMatch(filter, appLabel(apps[index])));
+}
+/** Next selectable index when moving by `delta`, wrapping at both ends. */
+export function navMove(ring, selected, delta) {
+    if (ring.length === 0)
+        return selected;
+    const at = ring.indexOf(selected);
+    return ring[at === -1 ? 0 : (at + delta + ring.length) % ring.length];
+}
+export function Navigator({ apps, groupOf, selected, focused, tasks, height, single, settingsSelected = false, width, filter = '', }) {
     // Row: marker(1) glyph(3) sp name sp version(6) sp dots(4) inside the padding.
     const nameWidth = width - 2 - 17;
     const running = tasks.filter(task => task.status === 'running');
@@ -51,16 +69,20 @@ export function Navigator({ apps, groupOf, selected, focused, tasks, height, sin
     for (const [index, app] of apps.entries()) {
         const group = groupOf(app);
         if (!single && group !== lastGroup) {
-            rows.push(_jsx(Box, { height: 1, flexShrink: 0, children: _jsxs(Text, { dimColor: true, wrap: "truncate", children: ['  ', group] }) }, `g-${group}`));
+            rows.push(_jsx(Box, { height: 1, flexShrink: 0, children: _jsxs(Text, { dimColor: true, wrap: "truncate", children: ['  ', group] }) }, `g-${index}-${group}`));
             rowApp.push(-1);
             lastGroup = group;
         }
         rowApp.push(index);
         const active = index === selected;
         const busy = running.some(task => task.appRoot === app.root);
-        const name = localizedText(app.manifest.name) || app.manifest.id;
+        const name = appLabel(app);
         rows.push(_jsxs(Box, { width: width - 2, height: 1, flexShrink: 0, children: [_jsxs(Text, { backgroundColor: active && focused ? ACCENT : undefined, color: active && focused ? 'black' : undefined, bold: active, wrap: "truncate", children: [active ? '▎' : ' ', _jsx(Text, { dimColor: !active, children: typeGlyph(app.manifest) }), ' ', name.padEnd(nameWidth).slice(0, nameWidth), ' ', _jsx(Text, { dimColor: true, children: app.manifest.version.padStart(6).slice(0, 6) }), ' '] }), busy ? (_jsx(Text, { color: ACCENT, children: _jsx(Spinner, { type: "dots" }) })) : (_jsx(Dots, { project: app }))] }, app.root));
     }
+    if (rows.length === 0) {
+        rows.push(_jsx(Box, { height: 1, flexShrink: 0, children: _jsx(Text, { dimColor: true, children: '  ' + t('no matches') }) }, "none"));
+        rowApp.push(-1);
+    }
     // Window the list so the selected app stays visible; the lines outside
     // are summarised as "… n more".
     const fixed = 1 + 1 + (single ? 0 : 2) + (running.length > 0 ? running.length + 2 : 0);
@@ -79,14 +101,16 @@ export function Navigator({ apps, groupOf, selected, focused, tasks, height, sin
         if (end < rows.length)
             shown[shown.length - 1] = more(rows.length - end, '↓');
     }
-    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, borderStyle: "single", borderDimColor: true, borderTop: false, borderBottom: false, borderLeft: false, paddingX: 1, overflow: "hidden", children: [_jsx(Text, { bold: true, dimColor: true, children: single
+    return (_jsxs(Box, { flexDirection: "column", width: width, height: height, borderStyle: "single", borderDimColor: true, borderTop: false, borderBottom: false, borderLeft: false, paddingX: 1, overflow: "hidden", children: [filter ? (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: ACCENT, children: "\u276F " }), filter, _jsx(Text, { inverse: true, children: " " }), _jsxs(Text, { dimColor: true, children: [' ', apps.length === 1
+                                ? t('1 match')
+                                : t('{n} matches', { n: apps.length })] })] })) : (_jsx(Text, { bold: true, dimColor: true, children: single
                     ? t('APP')
                     : apps.length === 1
                         ? t('WORKSPACE 1 app')
-                        : t('WORKSPACE {n} apps', { n: apps.length }) }), shown, _jsx(Text, { dimColor: true, children: '  ' + t('deps·config·sync·signing') }), !single && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { backgroundColor: settingsSelected && focused ? ACCENT : undefined, color: settingsSelected && focused ? 'black' : undefined, bold: settingsSelected, children: [settingsSelected ? '▎' : ' ', "\u2699 ", t('Workspace settings')] }) })), running.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: t('TASKS') }), running.map(task => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: ACCENT, children: _jsx(Spinner, { type: "dots" }) }), ' ', task.label, " ", task.appName, " ", _jsx(Text, { dimColor: true, children: elapsed(task) })] }, task.id)))] }))] }));
+                        : t('WORKSPACE {n} apps', { n: apps.length }) })), shown, _jsx(Text, { dimColor: true, children: '  ' + t('deps·config·sync·signing') }), !single && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { backgroundColor: settingsSelected && focused ? ACCENT : undefined, color: settingsSelected && focused ? 'black' : undefined, bold: settingsSelected, children: [settingsSelected ? '▎' : ' ', "\u2699 ", t('Workspace settings')] }) })), running.length > 0 && (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsx(Text, { bold: true, dimColor: true, children: t('TASKS') }), running.map(task => (_jsxs(Text, { wrap: "truncate", children: [_jsx(Text, { color: ACCENT, children: _jsx(Spinner, { type: "dots" }) }), ' ', task.label, " ", task.appName, " ", _jsx(Text, { dimColor: true, children: elapsed(task) })] }, task.id)))] }))] }));
 }
 export function NavigatorStrip({ apps, selected, focused, }) {
-    return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { wrap: "truncate", children: apps.map((app, index) => (_jsxs(Text, { backgroundColor: index === selected && focused ? ACCENT : undefined, color: index === selected && focused ? 'black' : undefined, bold: index === selected, children: [' ', typeGlyph(app.manifest), ' ', localizedText(app.manifest.name) || app.manifest.id, ' '] }, app.root))) }) }));
+    return (_jsx(Box, { paddingX: 1, children: _jsx(Text, { wrap: "truncate", children: apps.map((app, index) => (_jsxs(Text, { backgroundColor: index === selected && focused ? ACCENT : undefined, color: index === selected && focused ? 'black' : undefined, bold: index === selected, children: [' ', typeGlyph(app.manifest), " ", appLabel(app), ' '] }, app.root))) }) }));
 }
 export function elapsed(task) {
     const ms = (task.endedAt ?? Date.now()) - task.startedAt;

package/dist/shell/Shell.js

@@ -9,7 +9,7 @@ import { listAddons, listExecutables, } from '../utils/sitevision-api.js';
 import { useTasks, runningTasks, startActivate, getTasks, } from '../utils/tasks.js';
 import { PasswordInput } from '../components/PasswordInput.js';
 import { AuthLoginScreen } from '../components/AuthLoginScreen.js';
-import { TopBar, Navigator, NavigatorStrip, BottomBar, navWidth, NARROW_BELOW, ACCENT, } from './Frame.js';
+import { TopBar, Navigator, NavigatorStrip, BottomBar, navMatches, navMove, appLabel, navWidth, NARROW_BELOW, ACCENT, } from './Frame.js';
 import { TabBar, TABS, Overview, Versions, Log, } from './Tabs.js';
 import { CommandPalette } from './CommandPalette.js';
 import { ConfigForm } from './ConfigForm.js';
@@ -43,6 +43,7 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
     const [tab, setTab] = useState('overview');
     const [focus, setFocus] = useState(workspaceRoot && !onboard ? 'nav' : 'content');
     const [overlay, setOverlay] = useState(null);
+    const [filter, setFilter] = useState('');
     const [versions, setVersions] = useState({});
     const [versionRow, setVersionRow] = useState(0);
     const [logScroll, setLogScroll] = useState(0);
@@ -78,6 +79,10 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
     [workspaceRoot, apps, env]);
     const narrow = columns < NARROW_BELOW;
     const sidebar = navWidth(columns);
+    // The navigator shows the fuzzy matches; `selected` stays an index into
+    // `apps` (with `apps.length` meaning the workspace settings row).
+    const matches = useMemo(() => navMatches(apps, filter), [apps, filter]);
+    const ring = single ? matches : [...matches, apps.length];
     const running = runningTasks();
     // Re-render once a second while something runs so elapsed times move.
     useEffect(() => {
@@ -254,6 +259,10 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
             ? raw.toUpperCase()
             : raw;
         if (key.escape) {
+            if (focus === 'nav' && filter) {
+                setFilter('');
+                return;
+            }
             // Esc backs out of the workspace settings pane, not just its focus.
             if (settings)
                 setSelected(0);
@@ -265,9 +274,40 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
             return;
         }
         if (key.tab) {
+            setFilter('');
             setFocus(f => f === 'nav' && !single ? 'content' : single ? 'content' : 'nav');
             return;
         }
+        // Navigator: typing searches, so no action key fires until Enter has
+        // moved the focus into the content pane.
+        if (focus === 'nav') {
+            const move = (delta) => {
+                setSelected(navMove(ring, selected, delta));
+            };
+            const search = (next) => {
+                setFilter(next);
+                const found = navMatches(apps, next);
+                if (found.length > 0 && !found.includes(selected))
+                    setSelected(found[0]);
+            };
+            if (key.upArrow)
+                move(-1);
+            else if (key.downArrow)
+                move(1);
+            else if (key.return) {
+                if (matches.length > 0 || settings) {
+                    setFilter('');
+                    setFocus('content');
+                }
+            }
+            else if (key.backspace || key.delete)
+                search(filter.slice(0, -1));
+            else if (input === 'q' && !filter)
+                quit();
+            else if (input?.length === 1 && input >= ' ' && !key.ctrl && !key.meta)
+                search(filter + input);
+            return;
+        }
         if (input === 'a' && tab !== 'versions') {
             setTab('versions');
             setFocus('content');
@@ -292,16 +332,7 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
                 quit();
             return;
         }
-        if (focus === 'nav') {
-            const last = single ? apps.length - 1 : apps.length;
-            if (key.upArrow)
-                setSelected(s => (s > 0 ? s - 1 : last));
-            if (key.downArrow)
-                setSelected(s => (s < last ? s + 1 : 0));
-            if (key.return)
-                setFocus('content');
-        }
-        else if (tab === 'versions') {
+        if (tab === 'versions') {
             const count = versions[versionsKey]?.executables?.length ?? 0;
             if (key.upArrow)
                 setVersionRow(r => Math.max(0, r - 1));
@@ -336,7 +367,7 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
     const mainHeight = frameRows - 2;
     const contentHeight = mainHeight - 1 - (narrow ? 1 : 0);
     const groupOf = (app) => workspaceRoot ? appGroup(workspaceRoot, app.root) : '.';
-    const appName = localizedText(project.manifest.name) || project.manifest.id;
+    const appName = appLabel(project);
     const tabName = t(TABS.find(entry => entry.id === tab).label).toLowerCase();
     const contextLabel = settings
         ? `${t('workspace')} ▸ ${t('settings')}`
@@ -361,61 +392,77 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
                 ['↑↓', 'apps'],
                 ['q', 'quit'],
             ]);
+    const navHints = filter
+        ? h([
+            ['↑↓', 'move'],
+            ['Enter', 'select'],
+            ['Esc', 'clear'],
+            ['/', 'commands'],
+        ])
+        : h([
+            ['a–z', 'search'],
+            ['↑↓', 'move'],
+            ['Enter', 'select'],
+            ['/', 'commands'],
+            ['q', 'quit'],
+        ]);
     const hints = overlay
         ? h([['Esc', 'cancel']])
-        : settings
-            ? settingsHints
-            : tab === 'versions'
-                ? h([
-                    ['a', 'activate'],
-                    ['R', 'refresh'],
-                    ['p', 'deploy'],
-                    ['/', 'commands'],
-                    ['q', 'quit'],
-                ])
-                : tab === 'log'
+        : focus === 'nav' && !settings
+            ? navHints
+            : settings
+                ? settingsHints
+                : tab === 'versions'
                     ? h([
-                        ['f', 'follow'],
-                        ['x', 'wrap'],
-                        ['K', 'stop'],
+                        ['a', 'activate'],
+                        ['R', 'refresh'],
                         ['p', 'deploy'],
                         ['/', 'commands'],
                         ['q', 'quit'],
                     ])
-                    : tab === 'config'
-                        ? editing
-                            ? h([
-                                ['Enter', 'save'],
-                                ['Esc', 'cancel'],
-                            ])
-                            : formActive
-                                ? h([
-                                    ['↑↓', 'field'],
-                                    ['Enter', 'edit'],
-                                    ['^O', 'pick addon'],
-                                    ['y', 'sync'],
-                                    ['/', 'commands'],
-                                    ['q', 'quit'],
-                                ])
-                                : h([
-                                    ['Tab', 'edit'],
-                                    ['y', 'sync'],
-                                    ['l', 'login'],
-                                    ['/', 'commands'],
-                                    ['q', 'quit'],
-                                ])
-                        : h([
-                            ['d', 'dev'],
-                            ['w', 'watch'],
-                            ['b', 'build'],
-                            ['s', 'sign'],
+                    : tab === 'log'
+                        ? h([
+                            ['f', 'follow'],
+                            ['x', 'wrap'],
+                            ['K', 'stop'],
                             ['p', 'deploy'],
-                            ['a', 'activate'],
-                            ['E', 'env'],
-                            ['i', 'install'],
                             ['/', 'commands'],
                             ['q', 'quit'],
-                        ]);
+                        ])
+                        : tab === 'config'
+                            ? editing
+                                ? h([
+                                    ['Enter', 'save'],
+                                    ['Esc', 'cancel'],
+                                ])
+                                : formActive
+                                    ? h([
+                                        ['↑↓', 'field'],
+                                        ['Enter', 'edit'],
+                                        ['^O', 'pick addon'],
+                                        ['y', 'sync'],
+                                        ['/', 'commands'],
+                                        ['q', 'quit'],
+                                    ])
+                                    : h([
+                                        ['Tab', 'edit'],
+                                        ['y', 'sync'],
+                                        ['l', 'login'],
+                                        ['/', 'commands'],
+                                        ['q', 'quit'],
+                                    ])
+                            : h([
+                                ['d', 'dev'],
+                                ['w', 'watch'],
+                                ['b', 'build'],
+                                ['s', 'sign'],
+                                ['p', 'deploy'],
+                                ['a', 'activate'],
+                                ['E', 'env'],
+                                ['i', 'install'],
+                                ['/', 'commands'],
+                                ['q', 'quit'],
+                            ]);
     const right = running.length > 0 ? (_jsxs(Text, { children: [_jsx(Text, { color: ACCENT, children: _jsx(Spinner, { type: "dots" }) }), ' ', running[0].label, " ", running[0].appName, running.length > 1 && (_jsxs(Text, { dimColor: true, children: [" \u00B7 ", t('{n} tasks', { n: running.length })] }))] })) : notice ? (_jsx(Text, { color: { info: undefined, ok: 'green', warn: 'yellow', error: 'red' }[notice.level], wrap: "truncate", children: notice.text })) : (_jsx(Text, { dimColor: true, children: t('idle') }));
     const closeOverlay = () => setOverlay(null);
     const content = overlay ? (renderOverlay(overlay, {
@@ -448,7 +495,7 @@ export function Shell({ apps: initialApps, workspaceRoot, version }) {
     return (_jsxs(Box, { flexDirection: "column", width: columns, height: frameRows, children: [_jsx(TopBar, { context: contextLabel, domain: project.devProperties?.domain, auth: authState(project), environment: {
                     name: env,
                     color: environmentColor(env, rawProject.devProperties),
-                }, version: version }), _jsxs(Box, { flexGrow: 1, height: mainHeight, borderStyle: "single", borderDimColor: true, borderLeft: false, borderRight: false, borderBottom: false, children: [!narrow && (_jsx(Navigator, { apps: apps, groupOf: groupOf, selected: selected, focused: focus === 'nav', tasks: tasks, height: mainHeight - 1, single: single, settingsSelected: settings, width: sidebar })), _jsxs(Box, { flexDirection: "column", width: narrow ? columns : columns - sidebar, overflow: "hidden", children: [narrow && !single && (_jsx(NavigatorStrip, { apps: apps, selected: selected, focused: focus === 'nav' })), settings ? (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { bold: true, color: ACCENT, children: t('Workspace settings') }), _jsx(Text, { dimColor: true, children: onboard && configIncomplete(workspaceTarget?.base)
+                }, version: version }), _jsxs(Box, { flexGrow: 1, height: mainHeight, borderStyle: "single", borderDimColor: true, borderLeft: false, borderRight: false, borderBottom: false, children: [!narrow && (_jsx(Navigator, { apps: matches.map(i => apps[i]), groupOf: groupOf, selected: matches.indexOf(selected), focused: focus === 'nav', tasks: tasks, height: mainHeight - 1, single: single, settingsSelected: settings, width: sidebar, filter: filter })), _jsxs(Box, { flexDirection: "column", width: narrow ? columns : columns - sidebar, overflow: "hidden", children: [narrow && !single && (_jsx(NavigatorStrip, { apps: matches.map(i => apps[i]), selected: matches.indexOf(selected), focused: focus === 'nav' })), settings ? (_jsxs(Box, { paddingX: 1, children: [_jsx(Text, { bold: true, color: ACCENT, children: t('Workspace settings') }), _jsx(Text, { dimColor: true, children: onboard && configIncomplete(workspaceTarget?.base)
                                             ? t(' · new workspace: fill in once, every app inherits · Esc skips')
                                             : t(' · shared .dev_properties.json at the root') })] })) : (_jsx(TabBar, { tab: tab, narrow: narrow, focused: focus === 'content' })), _jsx(Box, { height: contentHeight, overflow: "hidden", alignItems: "flex-start", children: content })] })] }), _jsx(BottomBar, { hints: hints, right: right })] }));
 }

package/dist/utils/i18n.js

@@ -203,6 +203,13 @@ const sv = {
     edit: 'redigera',
     back: 'tillbaka',
     quit: 'avsluta',
+    search: 'sök',
+    move: 'flytta',
+    select: 'välj',
+    clear: 'rensa',
+    'no matches': 'inga träffar',
+    '{n} matches': '{n} träffar',
+    '1 match': '1 träff',
     'edit settings': 'redigera inställningar',
     apps: 'appar',
     activate: 'aktivera',

package/dist/utils/workspace.js

@@ -39,7 +39,10 @@ export function discoverApps(root) {
         }
     };
     walk(root, 1);
-    return found.toSorted((a, b) => a.root.localeCompare(b.root));
+    // Group first, then path: a deeper folder (webapps/nested) must not split
+    // its parent's run of apps, or the same group heading renders twice.
+    return found.toSorted((a, b) => path.dirname(a.root).localeCompare(path.dirname(b.root)) ||
+        a.root.localeCompare(b.root));
 }
 /** Group label for an app: its parent folder relative to the workspace root. */
 export function appGroup(root, appRoot) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sitevision-cli",
-	"version": "1.0.0-beta.16",
+	"version": "1.0.0-beta.17",
 	"license": "MIT",
 	"bin": {
 		"svc": "dist/cli.js"