cli-jaw 2.0.10 → 2.0.16

package/public/manager/src/notes/graph/notes-graph-force.ts

@@ -0,0 +1,36 @@
+import type { NotesGraphRenderNode } from './notes-graph-filter';
+import type { NotesGraphSettings } from './notes-graph-settings';
+
+export type NotesGraphForceConfig = {
+    nodeSize: number;
+    linkDistance: number;
+    chargeStrength: number;
+    labelDensity: number;
+    showArrows: boolean;
+    animate: boolean;
+};
+
+export function graphForceConfigFromSettings(settings: NotesGraphSettings): NotesGraphForceConfig {
+    return {
+        nodeSize: settings.nodeSize,
+        linkDistance: settings.linkDistance,
+        chargeStrength: settings.chargeStrength,
+        labelDensity: settings.labelDensity,
+        showArrows: settings.showArrows,
+        animate: settings.animate,
+    };
+}
+
+export function radiusForNode(node: NotesGraphRenderNode, config: NotesGraphForceConfig): number {
+    const base = node.kind === 'tag' ? 5 : node.kind === 'missing' || node.kind === 'ambiguous' ? 6 : 7;
+    const degreeWeight = Math.sqrt(Math.max(0, node.degree)) * 2.4;
+    return Math.min(26, Math.max(4, (base + degreeWeight) * config.nodeSize));
+}
+
+export function labelVisibleForNode(node: NotesGraphRenderNode, zoomScale: number, config: NotesGraphForceConfig): boolean {
+    if (node.kind === 'missing' || node.kind === 'ambiguous') return zoomScale >= 0.45;
+    if (node.kind === 'tag') return config.labelDensity > 0.35 && zoomScale >= 0.65;
+    if (config.labelDensity >= 0.75) return zoomScale >= 0.35;
+    if (config.labelDensity >= 0.45) return node.degree > 0 && zoomScale >= 0.6;
+    return node.degree >= 2 && zoomScale >= 0.85;
+}

package/public/manager/src/notes/graph/notes-graph-settings.ts

@@ -0,0 +1,121 @@
+import type {
+    DashboardNotesGraphGroup,
+    DashboardNotesGraphSection,
+    DashboardNotesGraphSettings,
+} from '../../types';
+
+export type NotesGraphGroup = DashboardNotesGraphGroup;
+export type NotesGraphSection = DashboardNotesGraphSection;
+export type NotesGraphSettings = DashboardNotesGraphSettings;
+
+export const NOTES_GRAPH_SECTIONS: NotesGraphSection[] = ['filters', 'display', 'forces', 'groups'];
+export const NOTES_GRAPH_GROUP_COLORS = ['#7c9cff', '#3fb950', '#f2cc60', '#ff7b72', '#d2a8ff', '#56d4dd'];
+
+export const DEFAULT_NOTES_GRAPH_SETTINGS: NotesGraphSettings = {
+    version: 1,
+    panelOpen: true,
+    collapsedSections: {},
+    query: '',
+    existingFilesOnly: false,
+    showOrphans: true,
+    showTags: true,
+    showAttachments: false,
+    focusSelected: false,
+    focusDepth: 1,
+    groupMode: 'query',
+    groups: [],
+    nodeSize: 1,
+    linkDistance: 92,
+    chargeStrength: -180,
+    labelDensity: 0.6,
+    showArrows: false,
+    animate: true,
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+    return Boolean(value) && typeof value === 'object' && !Array.isArray(value);
+}
+
+function clampNumber(value: unknown, fallback: number, min: number, max: number): number {
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed)) return fallback;
+    return Math.min(max, Math.max(min, parsed));
+}
+
+function clampInt(value: unknown, fallback: number, min: number, max: number): number {
+    const parsed = Number(value);
+    if (!Number.isInteger(parsed)) return fallback;
+    return Math.min(max, Math.max(min, parsed));
+}
+
+function readText(value: unknown, fallback = '', max = 240): string {
+    return typeof value === 'string' ? value.trim().slice(0, max) : fallback;
+}
+
+function readColor(value: unknown, fallback: string): string {
+    if (typeof value !== 'string') return fallback;
+    const trimmed = value.trim();
+    return /^#[0-9a-f]{6}$/i.test(trimmed) ? trimmed : fallback;
+}
+
+export function cloneNotesGraphSettings(settings: NotesGraphSettings): NotesGraphSettings {
+    return {
+        ...settings,
+        collapsedSections: { ...settings.collapsedSections },
+        groups: settings.groups.map(group => ({ ...group })),
+    };
+}
+
+export function normalizeNotesGraphSettings(value: unknown): NotesGraphSettings {
+    const input = isRecord(value) ? value : {};
+    const fallback = DEFAULT_NOTES_GRAPH_SETTINGS;
+    const collapsedInput = isRecord(input['collapsedSections']) ? input['collapsedSections'] : {};
+    const collapsedSections: NotesGraphSettings['collapsedSections'] = {};
+    for (const section of NOTES_GRAPH_SECTIONS) {
+        if (typeof collapsedInput[section] === 'boolean') collapsedSections[section] = collapsedInput[section];
+    }
+    const groupsInput = Array.isArray(input['groups']) ? input['groups'] : [];
+    const groups = groupsInput.flatMap((candidate, index): NotesGraphGroup[] => {
+        if (!isRecord(candidate)) return [];
+        const query = readText(candidate['query']);
+        if (!query) return [];
+        return [{
+            id: readText(candidate['id'], `group-${index + 1}`, 80),
+            label: readText(candidate['label'], `Group ${index + 1}`, 80),
+            query,
+            color: readColor(candidate['color'], NOTES_GRAPH_GROUP_COLORS[index % NOTES_GRAPH_GROUP_COLORS.length] ?? '#7c9cff'),
+            enabled: typeof candidate['enabled'] === 'boolean' ? candidate['enabled'] : true,
+        }];
+    }).slice(0, 20);
+    return {
+        version: 1,
+        panelOpen: typeof input['panelOpen'] === 'boolean' ? input['panelOpen'] : fallback.panelOpen,
+        collapsedSections,
+        query: readText(input['query'], fallback.query),
+        existingFilesOnly: typeof input['existingFilesOnly'] === 'boolean' ? input['existingFilesOnly'] : fallback.existingFilesOnly,
+        showOrphans: typeof input['showOrphans'] === 'boolean' ? input['showOrphans'] : fallback.showOrphans,
+        showTags: typeof input['showTags'] === 'boolean' ? input['showTags'] : fallback.showTags,
+        showAttachments: typeof input['showAttachments'] === 'boolean' ? input['showAttachments'] : fallback.showAttachments,
+        focusSelected: typeof input['focusSelected'] === 'boolean' ? input['focusSelected'] : fallback.focusSelected,
+        focusDepth: clampInt(input['focusDepth'], fallback.focusDepth, 1, 4),
+        groupMode: input['groupMode'] === 'off' || input['groupMode'] === 'query' ? input['groupMode'] : fallback.groupMode,
+        groups,
+        nodeSize: clampNumber(input['nodeSize'], fallback.nodeSize, 0.6, 2),
+        linkDistance: clampInt(input['linkDistance'], fallback.linkDistance, 40, 240),
+        chargeStrength: clampInt(input['chargeStrength'], fallback.chargeStrength, -800, -20),
+        labelDensity: clampNumber(input['labelDensity'], fallback.labelDensity, 0, 1),
+        showArrows: typeof input['showArrows'] === 'boolean' ? input['showArrows'] : fallback.showArrows,
+        animate: typeof input['animate'] === 'boolean' ? input['animate'] : fallback.animate,
+    };
+}
+
+export function createNotesGraphGroup(index: number, query: string): NotesGraphGroup {
+    const color = NOTES_GRAPH_GROUP_COLORS[index % NOTES_GRAPH_GROUP_COLORS.length] ?? '#7c9cff';
+    return {
+        id: `graph-group-${Date.now().toString(36)}-${index.toString(36)}`,
+        label: `Group ${index + 1}`,
+        query: query.trim() || 'tag:',
+        color,
+        enabled: true,
+    };
+}

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

@@ -0,0 +1,382 @@
+.notes-graph-workspace {
+    grid-row: 3;
+    min-width: 0;
+    min-height: 0;
+    height: 100%;
+    display: grid;
+    grid-template-rows: max-content minmax(0, 1fr);
+    background: var(--canvas-deep, #111827);
+    color: var(--text-primary);
+    overflow: hidden;
+}
+
+.notes-graph-toolbar {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px 12px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: color-mix(in srgb, var(--canvas-mid, #151b23) 88%, transparent);
+}
+
+.notes-graph-counts,
+.notes-graph-actions,
+.notes-graph-control-row {
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.notes-graph-counts {
+    color: var(--text-secondary);
+    font-size: 12px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.notes-graph-counts strong {
+    color: var(--text-primary);
+    font-variant-numeric: tabular-nums;
+}
+
+.notes-graph-actions button,
+.notes-graph-controls button {
+    border: 1px solid var(--border-subtle);
+    background: var(--bg-panel, #161b22);
+    color: var(--text-primary);
+    border-radius: 6px;
+    min-height: 30px;
+    padding: 4px 9px;
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.notes-graph-actions button:hover,
+.notes-graph-controls button:hover {
+    background: var(--surface-hover, #232b36);
+}
+
+.notes-graph-actions button:active,
+.notes-graph-controls button:active {
+    transform: translateY(1px);
+}
+
+.notes-graph-body {
+    min-width: 0;
+    min-height: 0;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(260px, 318px);
+    overflow: hidden;
+}
+
+.notes-graph-workspace:not(.has-controls) .notes-graph-body {
+    grid-template-columns: minmax(0, 1fr);
+}
+
+.notes-graph-canvas {
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    background:
+        linear-gradient(color-mix(in srgb, var(--border-subtle, #30363d) 35%, transparent) 1px, transparent 1px),
+        linear-gradient(90deg, color-mix(in srgb, var(--border-subtle, #30363d) 35%, transparent) 1px, transparent 1px),
+        var(--canvas-deep, #111827);
+    background-size: 28px 28px;
+}
+
+.notes-graph-svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 320px;
+    color: var(--text-tertiary);
+}
+
+.notes-graph-empty-state {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    color: var(--text-secondary);
+    font-size: 13px;
+    pointer-events: none;
+}
+
+.notes-graph-link {
+    stroke: var(--border-strong, #536173);
+    stroke-width: 1.2;
+    stroke-opacity: 0.54;
+}
+
+.notes-graph-link-resolved.is-virtual {
+    stroke-dasharray: 4 5;
+    stroke-opacity: 0.42;
+}
+
+.notes-graph-link-missing {
+    stroke: var(--status-error, #ff7b72);
+}
+
+.notes-graph-link-ambiguous {
+    stroke: var(--status-warning, #f2cc60);
+}
+
+.notes-graph-node {
+    outline: none;
+    cursor: default;
+}
+
+.notes-graph-node-note {
+    cursor: pointer;
+}
+
+.notes-graph-node circle {
+    fill: var(--surface-secondary, #2d333b);
+    stroke: color-mix(in srgb, var(--text-secondary, #8b949e) 42%, transparent);
+    stroke-width: 1.2;
+    transition: filter 0.15s, stroke-width 0.15s;
+}
+
+.notes-graph-node-note circle {
+    fill: var(--accent-muted, #244872);
+}
+
+.notes-graph-node-missing circle {
+    fill: var(--status-error, #ff7b72);
+}
+
+.notes-graph-node-ambiguous circle {
+    fill: var(--status-warning, #f2cc60);
+}
+
+.notes-graph-node-tag circle {
+    fill: var(--status-info, #56d4dd);
+}
+
+.notes-graph-node.is-selected circle {
+    stroke: var(--accent-primary, #8ab4ff);
+    stroke-width: 3;
+}
+
+.notes-graph-node:hover circle,
+.notes-graph-node:focus-visible circle {
+    filter: brightness(1.22);
+    stroke-width: 2;
+}
+
+.notes-graph-label {
+    opacity: 0;
+    fill: var(--text-secondary);
+    font-size: 11px;
+    paint-order: stroke;
+    stroke: var(--canvas-deep, #111827);
+    stroke-width: 3px;
+    stroke-linejoin: round;
+    pointer-events: none;
+    user-select: none;
+}
+
+.notes-graph-node.is-label-visible .notes-graph-label,
+.notes-graph-node:hover .notes-graph-label,
+.notes-graph-node:focus-visible .notes-graph-label {
+    opacity: 1;
+}
+
+.notes-graph-controls {
+    min-width: 0;
+    min-height: 0;
+    overflow: auto;
+    border-left: 1px solid var(--border-subtle);
+    background: var(--canvas-mid, #151b23);
+}
+
+.notes-graph-controls-header {
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 10px 10px;
+    border-bottom: 1px solid var(--border-subtle);
+    background: var(--canvas-mid, #151b23);
+}
+
+.notes-graph-controls-header h3 {
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.2;
+}
+
+.notes-graph-controls-header span {
+    color: var(--text-tertiary);
+    font-size: 11px;
+}
+
+.notes-graph-icon-button {
+    width: 30px;
+    min-width: 30px;
+    padding-inline: 0;
+}
+
+.notes-graph-control-section {
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.notes-graph-section-toggle {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border: 0;
+    border-radius: 0;
+    background: transparent;
+    padding: 8px 10px;
+    font-weight: 600;
+}
+
+.notes-graph-control-body {
+    display: grid;
+    gap: 8px;
+    padding: 0 10px 10px;
+}
+
+.notes-graph-field,
+.notes-graph-toggle {
+    display: grid;
+    gap: 5px;
+    color: var(--text-secondary);
+    font-size: 12px;
+}
+
+.notes-graph-toggle {
+    grid-template-columns: minmax(0, 1fr) max-content;
+    align-items: center;
+}
+
+.notes-graph-toggle.is-disabled {
+    opacity: 0.55;
+}
+
+.notes-graph-field input:not([type="range"]),
+.notes-graph-group-row input:not([type="color"]) {
+    width: 100%;
+    min-width: 0;
+    border: 1px solid var(--border-subtle);
+    background: var(--bg-panel, #161b22);
+    color: var(--text-primary);
+    border-radius: 6px;
+    min-height: 30px;
+    padding: 4px 8px;
+    font: inherit;
+    font-size: 12px;
+}
+
+.notes-graph-field input[type="range"] {
+    width: 100%;
+}
+
+.notes-graph-groups {
+    display: grid;
+    gap: 8px;
+}
+
+.notes-graph-group-row {
+    display: grid;
+    grid-template-columns: 28px minmax(52px, 0.7fr) minmax(72px, 1fr) max-content 30px;
+    align-items: center;
+    gap: 5px;
+}
+
+.notes-graph-color {
+    width: 28px;
+    min-width: 28px;
+    height: 30px;
+    padding: 0;
+    border: 1px solid var(--border-subtle);
+    border-radius: 6px;
+    background: transparent;
+}
+
+.notes-graph-swatches {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+.notes-graph-swatches span {
+    width: 14px;
+    height: 14px;
+    border-radius: 4px;
+    border: 1px solid color-mix(in srgb, var(--text-primary, #f0f6fc) 30%, transparent);
+}
+
+@media (max-width: 860px) {
+    .notes-graph-body {
+        grid-template-columns: minmax(0, 1fr);
+        grid-template-rows: minmax(0, 1fr) minmax(160px, 34vh);
+    }
+
+    .notes-graph-controls {
+        border-left: 0;
+        border-top: 1px solid var(--border-subtle);
+    }
+}
+
+@media (max-width: 540px) {
+    .notes-mode-graph .notes-toolbar {
+        align-items: flex-start;
+        flex-wrap: wrap;
+        gap: 8px;
+        padding: 8px;
+    }
+
+    .notes-mode-graph .notes-view-tabs {
+        grid-column: 1 / -1;
+        display: grid;
+        grid-template-columns: repeat(5, minmax(0, 1fr));
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .notes-mode-graph .notes-view-tabs button {
+        width: 100%;
+        min-height: 30px;
+        padding-inline: 3px;
+        font-size: 11px;
+    }
+
+    .notes-mode-graph .notes-toolbar-actions {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 6px;
+    }
+
+    .notes-mode-graph .notes-toolbar-actions > button {
+        min-width: 0;
+        padding-inline: 6px;
+    }
+
+    .notes-graph-toolbar {
+        align-items: flex-start;
+        flex-wrap: wrap;
+        padding: 7px 8px;
+    }
+
+    .notes-graph-actions {
+        width: 100%;
+        justify-content: flex-end;
+    }
+
+    .notes-graph-body {
+        grid-template-rows: minmax(180px, 1fr) minmax(220px, 42vh);
+    }
+}

package/public/manager/src/notes/rendering/CodeBlock.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { copyText } from '../../clipboard/copy-text';
 import { highlightCode } from './highlight-languages';
 
 type CodeBlockProps = {
@@ -12,13 +13,13 @@ export function CodeBlock(props: CodeBlockProps) {
     const label = result.language || 'text';
 
     async function copyCode(): Promise<void> {
-        try {
-            await navigator.clipboard.writeText(props.code);
+        const result = await copyText(props.code);
+        if (result.ok) {
             setCopied(true);
             window.setTimeout(() => setCopied(false), 1200);
-        } catch (err) {
-            console.error('[notes:code-copy]', err);
+            return;
         }
+        console.error('[notes:code-copy]', result.error);
     }
 
     return (

package/public/manager/src/notes/rendering/MarkdownRenderer.tsx

@@ -124,6 +124,9 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
                 img: ({ src, alt, ...imageProps }: ComponentProps<'img'>) => {
                     const safeSrc = typeof src === 'string' ? notesImageSrc(src) : '';
                     if (!safeSrc) return null;
+                    if (safeSrc.endsWith('.pdf')) {
+                        return <iframe src={safeSrc} title={alt ?? 'PDF embed'} className="notes-pdf-embed" />;
+                    }
                     return <img {...imageProps} src={safeSrc} alt={alt ?? ''} loading="lazy" />;
                 },
                 p: wikiTransform('p'),

package/public/manager/src/notes/useNoteSync.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef } from 'react';
+
+type NoteWsEvent =
+    | { type: 'file-changed'; path: string }
+    | { type: 'tree-changed' };
+
+type UseNoteSyncOptions = {
+    active: boolean;
+    onFileChanged?: (path: string) => void;
+    onTreeChanged?: () => void;
+};
+
+const RECONNECT_BASE_MS = 3000;
+const RECONNECT_MAX_MS = 30000;
+
+export function useNoteSync(options: UseNoteSyncOptions): void {
+    const callbacksRef = useRef(options);
+    callbacksRef.current = options;
+
+    useEffect(() => {
+        if (!options.active) return;
+
+        let ws: WebSocket | null = null;
+        let reconnectDelay = RECONNECT_BASE_MS;
+        let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+        let disposed = false;
+
+        function connect(): void {
+            if (disposed) return;
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const url = `${protocol}//${window.location.host}/api/dashboard/notes/ws`;
+            ws = new WebSocket(url);
+
+            ws.onopen = () => { reconnectDelay = RECONNECT_BASE_MS; };
+
+            ws.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data as string) as NoteWsEvent;
+                    if (data.type === 'file-changed') {
+                        callbacksRef.current.onFileChanged?.(data.path);
+                    } else if (data.type === 'tree-changed') {
+                        callbacksRef.current.onTreeChanged?.();
+                    }
+                } catch { /* ignore malformed messages */ }
+            };
+
+            ws.onclose = () => {
+                ws = null;
+                if (disposed) return;
+                reconnectTimer = setTimeout(() => {
+                    reconnectDelay = Math.min(reconnectDelay * 1.5, RECONNECT_MAX_MS);
+                    connect();
+                }, reconnectDelay);
+            };
+
+            ws.onerror = () => { ws?.close(); };
+        }
+
+        connect();
+
+        return () => {
+            disposed = true;
+            if (reconnectTimer) clearTimeout(reconnectTimer);
+            ws?.close();
+        };
+    }, [options.active]);
+}

package/public/manager/src/notes/wysiwyg/MilkdownWysiwygEditor.tsx

@@ -26,6 +26,8 @@ import {
     refreshMilkdownAssetImages,
 } from './milkdown-editor-utils';
 import { notesMilkdownBlockKeymap } from './milkdown-block-keymap';
+import { notesMilkdownSlashMenu } from './milkdown-slash-menu';
+import { notesMilkdownTableMenu } from './milkdown-table-menu';
 import { CODE_SOURCE_UPDATED_EVENT, notesMilkdownCodeBlockView } from './milkdown-code-block-view';
 import { notesMilkdownGfm } from './milkdown-gfm-safe';
 import { notesMilkdownHeadingSourceView } from './milkdown-heading-source-view';
@@ -141,6 +143,8 @@ export function MilkdownWysiwygEditor(props: MilkdownWysiwygEditorProps) {
             .use(notesMilkdownMath)
             .use(notesMilkdownCodeBlockView)
             .use(notesMilkdownBlockKeymap)
+            .use(notesMilkdownSlashMenu)
+            .use(notesMilkdownTableMenu)
             .use(notesMilkdownWikiLinkPlugin(wikiRuntimeRef.current))
             .use(notesMilkdownWikiLinkCompletionPlugin(wikiCompletionRuntimeRef.current))
             .use(history)

package/public/manager/src/notes/wysiwyg/milkdown-code-block-view.ts

@@ -4,6 +4,7 @@ import type { Node as ProseMirrorNode } from '@milkdown/kit/prose/model';
 import { TextSelection } from '@milkdown/kit/prose/state';
 import type { EditorView, NodeView, NodeViewConstructor } from '@milkdown/kit/prose/view';
 import { $view } from '@milkdown/kit/utils';
+import { copyText } from '../../clipboard/copy-text';
 import { highlightCode } from '../rendering/highlight-languages';
 
 export const CODE_SOURCE_UPDATED_EVENT = 'notes-code-source-updated';
@@ -340,9 +341,12 @@ function createCodeBlockView(): NodeViewConstructor {
             event.preventDefault();
             event.stopPropagation();
             const text = codeText(currentNode);
-            navigator.clipboard.writeText(text).then(() => {
+            copyText(text).then(result => {
+                if (!result.ok) throw new Error(result.error ?? 'Copy failed');
                 copyBtn.textContent = 'Copied!';
                 setTimeout(() => { copyBtn.textContent = copyButtonLabel(); }, 1500);
+            }).catch(error => {
+                console.error('[notes:wysiwyg-code-copy]', error);
             });
         });
         copyBtn.addEventListener('mousedown', event => event.stopPropagation());