cli-jaw 2.0.3 → 2.0.5

package/public/manager/src/manager-help.css

@@ -163,6 +163,33 @@
     text-align: center;
 }
 
+.help-topic-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 28px;
+    height: 28px;
+    border: 1px solid var(--border-subtle, #d0d7de);
+    border-radius: 999px;
+    background: var(--bg-raised, #f6f8fa);
+    color: var(--text-secondary, #57606a);
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 1;
+    cursor: pointer;
+}
+
+.help-topic-button:hover {
+    border-color: var(--border-strong, #8c959f);
+    color: var(--text-primary, #1f2328);
+}
+
+.help-topic-button:focus-visible {
+    outline: 2px solid var(--accent, #4f8cff);
+    outline-offset: 2px;
+}
+
 /* Board workspace control row additions */
 .dashboard-board-workspace-header {
     display: flex;

package/public/manager/src/manager-layout.css

@@ -15,8 +15,14 @@
     grid-template-areas: "sidebar detail" "sidebar activity";
     overflow: hidden;
 }
+.manager-workspace.is-side-panel-open {
+    grid-template-columns: 340px minmax(0, 1fr) 420px;
+    grid-template-areas: "sidebar detail ceo" "sidebar activity ceo";
+}
 .manager-shell.is-sidebar-collapsed .manager-workspace,
 .manager-workspace.is-sidebar-collapsed { grid-template-columns: 56px minmax(0, 1fr); }
+.manager-shell.is-sidebar-collapsed .manager-workspace.is-side-panel-open,
+.manager-workspace.is-sidebar-collapsed.is-side-panel-open { grid-template-columns: 56px minmax(0, 1fr) 420px; }
 .manager-sidebar { grid-area: sidebar; min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--border-subtle); background: var(--canvas-deep); }
 .manager-command {
     grid-area: command;
@@ -25,6 +31,7 @@
     background: var(--bg-panel);
 }
 .manager-detail { grid-area: detail; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg-panel); }
+.manager-ceo-panel { grid-area: ceo; min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--border-subtle); background: var(--bg-panel); }
 .workspace-surface-stack {
     min-width: 0;
     min-height: 0;
@@ -68,12 +75,18 @@
     .dashboard-shell.manager-shell:not(.is-sidebar-collapsed) .manager-workspace {
         grid-template-columns: 360px minmax(0, 1fr);
     }
+    .dashboard-shell.manager-shell:not(.is-sidebar-collapsed) .manager-workspace.is-side-panel-open {
+        grid-template-columns: 360px minmax(0, 1fr) 520px;
+    }
 }
 @media (max-width: 1279px) and (min-width: 1024px) {
     .dashboard-shell.manager-shell:not(.is-sidebar-collapsed) .manager-workspace {
         grid-template-columns: 300px minmax(0, 1fr);
         grid-template-rows: minmax(0, 1fr) var(--activity-dock-height, 150px);
     }
+    .dashboard-shell.manager-shell:not(.is-sidebar-collapsed) .manager-workspace.is-side-panel-open {
+        grid-template-columns: 300px minmax(0, 1fr) 360px;
+    }
     .command-primary { grid-template-columns: minmax(120px, 180px) max-content minmax(max-content, 1fr); }
     .command-search { width: clamp(260px, 38vw, 620px); }
     .overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@@ -105,6 +118,7 @@
     .manager-workspace > .drawer-backdrop { position: fixed; inset: 0; z-index: 20; background: var(--scrim-overlay); }
     .drawer-trigger { display: inline-flex; grid-area: drawer; }
     .manager-mobile-nav { display: block; border-top: 1px solid var(--border-subtle); }
+    .manager-ceo-panel { display: contents; }
     .command-primary {
         grid-template-columns: auto minmax(0, 1fr) auto;
         grid-template-areas: "drawer title actions" "search search search";
@@ -170,6 +184,11 @@
         gap: 8px;
         padding: 8px 10px;
     }
+    .workbench-mode-bar {
+        justify-content: flex-start;
+        overflow-x: auto;
+        padding-bottom: 1px;
+    }
     .workbench-mode-tabs {
         flex-wrap: nowrap;
         justify-content: stretch;

package/public/manager/src/manager-notes.css

@@ -398,8 +398,8 @@
     min-width: 0;
     min-height: 0;
     height: 100%;
-    display: grid;
-    grid-template-rows: auto minmax(0, 1fr);
+    display: flex;
+    flex-direction: column;
     overflow: hidden;
 }
 
@@ -446,14 +446,23 @@
     opacity: 0.55;
 }
 
-.notes-milkdown-root {
+.notes-milkdown-scroll {
     min-width: 0;
     min-height: 0;
-    height: 100%;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
     overflow: auto;
     background: var(--canvas-base);
 }
 
+.notes-milkdown-root {
+    min-width: 0;
+    min-height: 0;
+    flex: 1 1 auto;
+    background: var(--canvas-base);
+}
+
 .notes-editor .cm-editor {
     height: 100%;
 }

package/public/manager/src/manager-p0-1-1.css

@@ -246,13 +246,13 @@
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: minmax(0, 1fr);
-    gap: 4px;
+    gap: 6px;
 }
 
 .manager-sidebar .instance-actions button,
 .manager-sidebar .instance-actions .open-link {
-    min-height: 24px;
-    padding-inline: 4px;
+    min-height: 28px;
+    padding-inline: 6px;
     font-size: 11px;
 }
 

package/public/manager/src/manager-polish.css

@@ -3,6 +3,10 @@
     grid-template-areas: "sidebar detail";
 }
 
+.manager-workspace.is-inspector-collapsed.is-side-panel-open {
+    grid-template-areas: "sidebar detail ceo";
+}
+
 .dashboard-shell.manager-shell:not(.is-sidebar-collapsed) .manager-workspace {
     grid-template-columns: 320px minmax(0, 1fr);
 }
@@ -250,13 +254,13 @@
     display: grid;
     grid-auto-flow: column;
     grid-auto-columns: minmax(0, 1fr);
-    gap: 4px;
+    gap: 6px;
 }
 
 .manager-sidebar .instance-actions button,
 .manager-sidebar .instance-actions .open-link {
-    min-height: 24px;
-    padding-inline: 4px;
+    min-height: 28px;
+    padding-inline: 6px;
     font-size: 11px;
 }
 

package/public/manager/src/manager-shortcuts.ts

@@ -0,0 +1,116 @@
+import type { DashboardShortcutAction, DashboardShortcutKeymap } from './types';
+
+export const MANAGER_SHORTCUT_ACTIONS: DashboardShortcutAction[] = [
+    'focusInstances',
+    'focusActiveSession',
+    'focusNotes',
+    'previousInstance',
+    'nextInstance',
+];
+
+export const DEFAULT_MANAGER_SHORTCUT_KEYMAP: DashboardShortcutKeymap = {
+    focusInstances: 'Alt+I',
+    focusActiveSession: 'Alt+P',
+    focusNotes: 'Alt+N',
+    previousInstance: 'Alt+K',
+    nextInstance: 'Alt+J',
+};
+
+type ParsedShortcut = {
+    key: string;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+};
+
+function normalizeKey(value: string): string {
+    const lower = value.trim().toLowerCase();
+    if (!lower) return '';
+    if (lower === 'space') return ' ';
+    if (lower.length === 1) return lower;
+    if (lower === 'arrowup') return 'arrowup';
+    if (lower === 'arrowdown') return 'arrowdown';
+    if (lower === 'arrowleft') return 'arrowleft';
+    if (lower === 'arrowright') return 'arrowright';
+    return lower;
+}
+
+function parseShortcut(raw: string): ParsedShortcut | null {
+    const parts = raw.split('+').map(part => part.trim()).filter(Boolean);
+    if (parts.length === 0) return null;
+    const parsed: ParsedShortcut = {
+        key: '',
+        altKey: false,
+        ctrlKey: false,
+        metaKey: false,
+        shiftKey: false,
+    };
+    for (const part of parts) {
+        const lower = part.toLowerCase();
+        if (lower === 'alt' || lower === 'option') parsed.altKey = true;
+        else if (lower === 'ctrl' || lower === 'control') parsed.ctrlKey = true;
+        else if (lower === 'meta' || lower === 'cmd' || lower === 'command') parsed.metaKey = true;
+        else if (lower === 'shift') parsed.shiftKey = true;
+        else parsed.key = normalizeKey(part);
+    }
+    return parsed.key ? parsed : null;
+}
+
+export function normalizeManagerShortcutKeymap(value: unknown): DashboardShortcutKeymap {
+    const input = value && typeof value === 'object' ? value as Partial<Record<DashboardShortcutAction, unknown>> : {};
+    const keymap = { ...DEFAULT_MANAGER_SHORTCUT_KEYMAP };
+    for (const action of MANAGER_SHORTCUT_ACTIONS) {
+        const shortcut = input[action];
+        keymap[action] = typeof shortcut === 'string' && shortcut.trim() ? shortcut : DEFAULT_MANAGER_SHORTCUT_KEYMAP[action];
+    }
+    return keymap;
+}
+
+function resolveEventKey(event: KeyboardEvent): string {
+    const k = normalizeKey(event.key);
+    if (k.length === 1) return k;
+    // macOS Option+letter produces special chars (e.g. ∆ for Alt+J).
+    // Fall back to event.code to recover the original letter.
+    if (event.altKey && event.code?.startsWith('Key')) {
+        return event.code.slice(3).toLowerCase();
+    }
+    return k;
+}
+
+export function shortcutMatches(event: KeyboardEvent, raw: string): boolean {
+    const parsed = parseShortcut(raw);
+    if (!parsed) return false;
+    return event.altKey === parsed.altKey
+        && event.ctrlKey === parsed.ctrlKey
+        && event.metaKey === parsed.metaKey
+        && event.shiftKey === parsed.shiftKey
+        && resolveEventKey(event) === parsed.key;
+}
+
+export function actionForShortcutEvent(
+    event: KeyboardEvent,
+    keymap: unknown,
+): DashboardShortcutAction | null {
+    const shortcuts = normalizeManagerShortcutKeymap(keymap);
+    for (const action of MANAGER_SHORTCUT_ACTIONS) {
+        if (shortcutMatches(event, shortcuts[action])) return action;
+    }
+    return null;
+}
+
+export function formatShortcut(raw: string): string {
+    return raw
+        .split('+')
+        .map(part => part.trim())
+        .filter(Boolean)
+        .join(' + ');
+}
+
+export function isManagerShortcutEditableTarget(target: EventTarget | null): boolean {
+    if (!(target instanceof HTMLElement)) return false;
+    if (target.isContentEditable) return true;
+    const tag = target.tagName.toLowerCase();
+    if (tag === 'input' || tag === 'textarea' || tag === 'select') return true;
+    return Boolean(target.closest('[contenteditable="true"], .cm-editor, .ProseMirror, [data-milkdown-root]'));
+}

package/public/manager/src/notes/MarkdownEditor.tsx

@@ -10,7 +10,8 @@ import { MarkdownPreview } from './MarkdownPreview';
 import { RichMarkdownPortalHost } from './rich-markdown/RichMarkdownPortalHost';
 import { richMarkdownExtension } from './rich-markdown/rich-markdown-extension';
 import { richMarkdownPastePolicy } from './rich-markdown/paste-policy';
-import type { NotesAuthoringMode } from './notes-types';
+import { wikiLinkCodeMirrorCompletion } from './wiki-link-codemirror-completion';
+import type { NotesAuthoringMode, NotesNoteLinkRef, NotesNoteMetadata } from './notes-types';
 import type { RichMarkdownWidgetRegistration } from './rich-markdown/rich-markdown-types';
 
 const MilkdownWysiwygEditor = lazy(async () => {
@@ -23,8 +24,13 @@ type MarkdownEditorProps = {
     authoringMode: NotesAuthoringMode;
     content: string;
     notePath: string;
+    outgoing: readonly NotesNoteLinkRef[];
+    notes: readonly NotesNoteMetadata[];
+    activeTag: string | null;
     wordWrap: boolean;
     onChange: (value: string) => void;
+    onTagSelect: (tag: string | null) => void;
+    onWikiLinkNavigate: (path: string) => void;
 };
 
 export function MarkdownEditor(props: MarkdownEditorProps) {
@@ -54,6 +60,7 @@ export function MarkdownEditor(props: MarkdownEditorProps) {
             notesEditorTheme,
             notesSyntaxHighlighting,
             markdown({ codeLanguages: languages }),
+            wikiLinkCodeMirrorCompletion(props.notes),
             richMarkdownPastePolicy({
                 notePath: props.notePath,
                 onError: error => console.warn('[notes-image-paste]', error),
@@ -68,13 +75,23 @@ export function MarkdownEditor(props: MarkdownEditorProps) {
         ];
         if (props.wordWrap) base.push(EditorView.lineWrapping);
         return base;
-    }, [props.active, props.authoringMode, props.notePath, props.wordWrap, registerWidget, requestMeasure, unregisterWidget]);
+    }, [props.active, props.authoringMode, props.notePath, props.notes, props.wordWrap, registerWidget, requestMeasure, unregisterWidget]);
 
     if (isWysiwyg) {
         return (
             <div className="notes-editor notes-wysiwyg-editor">
                 <Suspense fallback={<div className="notes-wysiwyg-loading">Loading WYSIWYG editor...</div>}>
-                    <MilkdownWysiwygEditor active={props.active} content={props.content} notePath={props.notePath} onChange={props.onChange} />
+                    <MilkdownWysiwygEditor
+                        active={props.active}
+                        content={props.content}
+                        notePath={props.notePath}
+                        outgoing={props.outgoing}
+                        notes={props.notes}
+                        activeTag={props.activeTag}
+                        onChange={props.onChange}
+                        onTagSelect={props.onTagSelect}
+                        onWikiLinkNavigate={props.onWikiLinkNavigate}
+                    />
                 </Suspense>
             </div>
         );

package/public/manager/src/notes/MarkdownPreview.tsx

@@ -1,13 +1,22 @@
 import { MarkdownRenderer } from './rendering/MarkdownRenderer';
+import type { NotesNoteLinkRef, NotesNoteMetadata } from './notes-types';
 
 type MarkdownPreviewProps = {
     markdown: string;
+    outgoing?: NotesNoteLinkRef[] | undefined;
+    notes?: readonly NotesNoteMetadata[] | undefined;
+    onWikiLinkNavigate?: ((path: string) => void) | undefined;
 };
 
 export function MarkdownPreview(props: MarkdownPreviewProps) {
     return (
         <article className="notes-preview">
-            <MarkdownRenderer markdown={props.markdown} />
+            <MarkdownRenderer
+                markdown={props.markdown}
+                outgoing={props.outgoing}
+                notes={props.notes}
+                onWikiLinkNavigate={props.onWikiLinkNavigate}
+            />
         </article>
     );
 }

package/public/manager/src/notes/NotesFileTree.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState, type CSSProperties, type DragEvent, type KeyboardEvent, type MouseEvent } from 'react';
+import { useCallback, useEffect, useMemo, useState, type DragEvent, type KeyboardEvent, type MouseEvent } from 'react';
 import type { NotesTreeEntry } from './notes-types';
 
 type NotesTrashItem = { path: string; kind: NotesTreeEntry['kind'] };
@@ -9,7 +9,6 @@ type NotesFileTreeProps = {
     selectedFolderPath: string | null;
     dirtyPath: string | null;
     loading: boolean;
-    width: number;
     notesRoot: string | null;
     onSelectPath: (path: string) => void;
     onSelectFolder: (path: string | null) => void;
@@ -17,9 +16,6 @@ type NotesFileTreeProps = {
     onRenamePath: (path: string, kind: NotesTreeEntry['kind']) => void;
     onTrashPath: (path: string, kind: NotesTreeEntry['kind']) => void;
     onTrashPaths: (items: NotesTrashItem[]) => void;
-    onCreateNote: () => void;
-    onCreateFolder: () => void;
-    onRefresh: () => void;
 };
 
 function TreeChevron({ expanded }: { expanded: boolean }) {
@@ -48,7 +44,7 @@ function FileIcon() {
     );
 }
 
-function NewNoteIcon() {
+export function NewNoteIcon() {
     return (
         <svg viewBox="0 0 18 18" aria-hidden="true" className="notes-tree-action-icon">
             <path d="M5 2.8h5.2L13.5 6v9.2H5V2.8Z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
@@ -57,7 +53,7 @@ function NewNoteIcon() {
     );
 }
 
-function NewFolderIcon() {
+export function NewFolderIcon() {
     return (
         <svg viewBox="0 0 18 18" aria-hidden="true" className="notes-tree-action-icon">
             <path d="M2.5 5.2h5.1l1.2 1.5h6.7v6.7a1.4 1.4 0 0 1-1.4 1.4H3.9a1.4 1.4 0 0 1-1.4-1.4V5.2Z" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
@@ -66,7 +62,7 @@ function NewFolderIcon() {
     );
 }
 
-function RefreshIcon() {
+export function RefreshIcon() {
     return (
         <svg viewBox="0 0 18 18" aria-hidden="true" className="notes-tree-action-icon">
             <path d="M14.2 6.3A5.5 5.5 0 0 0 4 5.2L3 6.6M3.8 11.7A5.5 5.5 0 0 0 14 12.8l1-1.4" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
@@ -201,6 +197,12 @@ function renderEntry(
                         type="button"
                         className="notes-tree-folder-button"
                         aria-expanded={expanded}
+                        draggable
+                        onDragStart={(event) => {
+                            event.dataTransfer.effectAllowed = 'move';
+                            event.dataTransfer.setData('application/x-cli-jaw-note-path', entry.path);
+                            event.dataTransfer.setData('text/plain', entry.path);
+                        }}
                         onClick={(event) => {
                             if (event.shiftKey || event.metaKey || event.ctrlKey) {
                                 onEntryClick(entry.path, event);
@@ -224,7 +226,7 @@ function renderEntry(
                             event.stopPropagation();
                             const draggedPath = notePathFromDrag(event);
                             setDropTargetPath(null);
-                            if (draggedPath) props.onMovePath(draggedPath, entry.path);
+                            if (draggedPath && draggedPath !== entry.path && !entry.path.startsWith(`${draggedPath}/`)) props.onMovePath(draggedPath, entry.path);
                         }}
                         onKeyDown={(event) => {
                             if (event.key === 'ArrowRight' && !expanded) {
@@ -325,7 +327,6 @@ function renderEntry(
 }
 
 export function NotesFileTree(props: NotesFileTreeProps) {
-    const style = { '--notes-tree-width': `${props.width}px` } as CSSProperties;
     const [expandedFolders, setExpandedFolders] = useState<Set<string>>(() => new Set());
     const [dropTargetPath, setDropTargetPath] = useState<string | null>(null);
     const [multiSelected, setMultiSelected] = useState<Set<string>>(() => new Set());
@@ -446,9 +447,8 @@ export function NotesFileTree(props: NotesFileTreeProps) {
     }, [multiSelected, pathKindLookup, props]);
 
     return (
-        <aside
-            className={`notes-tree ${dropTargetPath === null ? 'is-root-drop-target' : ''}`}
-            style={style}
+        <div
+            className={`notes-tree-body ${dropTargetPath === null ? 'is-root-drop-target' : ''}`}
             onDragOver={(event) => {
                 if (!hasNotePathDrag(event)) return;
                 event.preventDefault();
@@ -461,14 +461,6 @@ export function NotesFileTree(props: NotesFileTreeProps) {
                 props.onMovePath(draggedPath, null);
             }}
         >
-            <div className="notes-tree-header">
-                <strong>Notes</strong>
-                <div className="notes-tree-actions">
-                    <button type="button" onClick={props.onCreateNote} title="New note" aria-label="New note"><NewNoteIcon /></button>
-                    <button type="button" onClick={props.onCreateFolder} title="New folder" aria-label="New folder"><NewFolderIcon /></button>
-                    <button type="button" onClick={props.onRefresh} disabled={props.loading} title="Refresh notes" aria-label="Refresh notes"><RefreshIcon /></button>
-                </div>
-            </div>
             {multiSelected.size > 0 && (
                 <div className="notes-tree-selection-info">
                     {multiSelected.size} selected
@@ -486,6 +478,6 @@ export function NotesFileTree(props: NotesFileTreeProps) {
             {!props.loading && props.entries.length > 0 && (
                 <ul className="notes-tree-list">{props.entries.map(entry => renderEntry(entry, props, expandedFolders, toggleFolder, dropTargetPath, setDropTargetPath, multiSelected, pathKindLookup, onEntryClick))}</ul>
             )}
-        </aside>
+        </div>
     );
 }

package/public/manager/src/notes/NotesFrontmatterStrip.tsx

@@ -0,0 +1,61 @@
+import type { NotesNoteMetadata } from './notes-types';
+
+type NotesFrontmatterStripProps = {
+    note: NotesNoteMetadata | null;
+    activeTag: string | null;
+    onTagClick: (tag: string | null) => void;
+};
+
+export function NotesFrontmatterStrip(props: NotesFrontmatterStripProps) {
+    const note = props.note;
+    if (!note) return null;
+
+    const aliases = note.aliases || [];
+    const tags = note.tags || [];
+    const created = note.created;
+    const error = note.frontmatterError;
+
+    const isEmpty = !error && aliases.length === 0 && tags.length === 0 && !created;
+    if (isEmpty) return null;
+
+    return (
+        <div className="notes-frontmatter-strip" aria-label="Note frontmatter">
+            {error && (
+                <span className="notes-frontmatter-error" role="alert">
+                    Frontmatter: {error}
+                </span>
+            )}
+            {aliases.length > 0 && (
+                <span className="notes-frontmatter-section">
+                    <span className="notes-frontmatter-label">Aliases</span>
+                    <span className="notes-frontmatter-value">{aliases.join(', ')}</span>
+                </span>
+            )}
+            {created && (
+                <span className="notes-frontmatter-section">
+                    <span className="notes-frontmatter-label">Created</span>
+                    <span className="notes-frontmatter-value">{created}</span>
+                </span>
+            )}
+            {tags.length > 0 && (
+                <span className="notes-frontmatter-section notes-frontmatter-tags">
+                    {tags.map(tag => {
+                        const active = tag === props.activeTag;
+                        return (
+                            <button
+                                key={tag}
+                                type="button"
+                                className={active ? 'notes-tag-chip is-active' : 'notes-tag-chip'}
+                                aria-pressed={active}
+                                title={active ? `Clear filter: #${tag}` : `Filter notes by #${tag}`}
+                                onClick={() => props.onTagClick(active ? null : tag)}
+                            >
+                                #{tag}
+                            </button>
+                        );
+                    })}
+                </span>
+            )}
+        </div>
+    );
+}