cli-jaw 2.0.3 → 2.0.5

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

@@ -0,0 +1,151 @@
+.notes-quick-switcher-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 70;
+    display: grid;
+    place-items: start center;
+    padding: 12vh 16px 24px;
+    background: color-mix(in srgb, var(--canvas-deep) 58%, transparent);
+}
+
+.notes-quick-switcher {
+    width: min(620px, 100%);
+    max-height: min(620px, 78vh);
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    overflow: hidden;
+    border: 1px solid var(--border-subtle);
+    border-radius: 8px;
+    background: var(--surface-raised);
+    color: var(--text-primary);
+}
+
+.notes-quick-switcher-input {
+    width: 100%;
+    min-height: 48px;
+    border: 0;
+    border-bottom: 1px solid var(--border-subtle);
+    border-radius: 0;
+    background: var(--surface-panel);
+    color: var(--text-primary);
+    padding: 0 16px;
+    font: inherit;
+    font-size: 15px;
+}
+
+.notes-quick-switcher-input:focus {
+    outline: 2px solid var(--accent-soft);
+    outline-offset: -2px;
+}
+
+.notes-quick-switcher-list {
+    min-height: 0;
+    overflow: auto;
+    padding: 8px;
+}
+
+.notes-quick-switcher-item {
+    width: 100%;
+    min-height: 56px;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) max-content;
+    gap: 4px 12px;
+    align-items: center;
+    margin: 0 0 4px;
+    padding: 9px 10px;
+    border: 1px solid transparent;
+    border-radius: 7px;
+    background: transparent;
+    color: var(--text-primary);
+    text-align: left;
+    font: inherit;
+}
+
+.notes-quick-switcher-item:hover,
+.notes-quick-switcher-item.is-active {
+    border-color: var(--border-subtle);
+    background: var(--accent-soft);
+}
+
+.notes-quick-switcher-item.is-current .notes-quick-switcher-title::before {
+    content: "";
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-right: 7px;
+    border-radius: 999px;
+    background: var(--accent);
+    vertical-align: middle;
+}
+
+.notes-quick-switcher-title {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 500;
+}
+
+.notes-quick-switcher-path {
+    min-width: 0;
+    grid-column: 1 / 2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-secondary);
+    font-size: 12px;
+}
+
+.notes-quick-switcher-alias {
+    grid-column: 2 / 3;
+    grid-row: 1 / span 2;
+    color: var(--text-tertiary);
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.notes-quick-switcher-empty {
+    margin: 0;
+    padding: 18px 12px;
+    color: var(--text-secondary);
+    font-size: 13px;
+}
+
+.notes-quick-switcher-footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    padding: 9px 12px;
+    border-top: 1px solid var(--border-subtle);
+    color: var(--text-tertiary);
+    font-size: 12px;
+}
+
+.notes-quick-switcher-footer kbd {
+    border: 1px solid var(--border-subtle);
+    border-radius: 5px;
+    background: var(--surface-panel);
+    color: var(--text-secondary);
+    padding: 1px 5px;
+    font: inherit;
+}
+
+@media (max-width: 720px) {
+    .notes-quick-switcher-backdrop {
+        place-items: start stretch;
+        padding: 10vh 10px 16px;
+    }
+
+    .notes-quick-switcher {
+        max-height: 82vh;
+    }
+
+    .notes-quick-switcher-item {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .notes-quick-switcher-alias {
+        grid-column: 1 / 2;
+        grid-row: auto;
+    }
+}

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

@@ -0,0 +1,90 @@
+.notes-tree-actions button.is-active {
+    border-color: var(--accent-soft);
+    background: var(--accent-soft);
+    color: var(--text-primary);
+}
+
+.notes-search-sidebar {
+    min-height: 0;
+    display: grid;
+    grid-template-rows: max-content minmax(0, 1fr);
+    overflow: hidden;
+}
+
+.notes-search-sidebar-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    border-bottom: 1px solid var(--border-subtle);
+}
+
+.notes-search-input {
+    min-width: 0;
+    flex: 1 1 auto;
+    height: 34px;
+    border: 1px solid var(--border-subtle);
+    border-radius: 7px;
+    padding: 0 10px;
+    background: var(--bg-panel);
+    color: var(--text-primary);
+    font: inherit;
+}
+
+.notes-search-sidebar-results {
+    min-height: 0;
+    overflow: auto;
+    padding: 6px;
+}
+
+.notes-search-result {
+    width: 100%;
+    display: grid;
+    gap: 3px;
+    padding: 9px 10px;
+    border: 1px solid transparent;
+    border-radius: 7px;
+    background: transparent;
+    color: var(--text-primary);
+    text-align: left;
+    cursor: pointer;
+}
+
+.notes-search-result:hover,
+.notes-search-result:focus-visible {
+    border-color: var(--border-subtle);
+    background: var(--canvas-mid);
+}
+
+.notes-search-result-path {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 13px;
+    font-weight: 600;
+}
+
+.notes-search-result-line {
+    color: var(--text-tertiary);
+    font-size: 11px;
+}
+
+.notes-search-result-context {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-secondary);
+    font-size: 12px;
+}
+
+.notes-search-loading,
+.notes-search-empty,
+.notes-search-error {
+    padding: 14px 10px;
+    color: var(--text-secondary);
+    font-size: 13px;
+}
+
+.notes-search-error {
+    color: var(--danger, #c34a4a);
+}

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

@@ -0,0 +1,292 @@
+.notes-frontmatter-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px 16px;
+    align-items: center;
+    padding: 6px 10px;
+    margin: 4px 0 10px;
+    border: 1px solid var(--border-subtle, rgba(120, 120, 140, 0.18));
+    border-radius: 6px;
+    background: var(--surface-soft, rgba(120, 120, 140, 0.06));
+    font-size: 12px;
+    line-height: 1.4;
+}
+
+.notes-frontmatter-section {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    flex-wrap: wrap;
+}
+
+.notes-frontmatter-label {
+    text-transform: uppercase;
+    font-size: 10px;
+    letter-spacing: 0;
+    color: var(--text-muted, rgba(140, 140, 160, 0.9));
+}
+
+.notes-frontmatter-value {
+    color: var(--text-primary, inherit);
+}
+
+.notes-frontmatter-error {
+    display: inline-flex;
+    align-items: center;
+    color: var(--danger-fg, #c0392b);
+    background: var(--danger-bg, rgba(192, 57, 43, 0.12));
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 11px;
+}
+
+.notes-frontmatter-tags {
+    gap: 4px;
+}
+
+.notes-tag-chip {
+    display: inline-flex;
+    align-items: center;
+    padding: 2px 8px;
+    border-radius: 999px;
+    border: 1px solid var(--border-subtle, rgba(120, 120, 140, 0.25));
+    background: var(--surface-elevated, transparent);
+    color: var(--accent-fg, #4458dc);
+    font-size: 11px;
+    cursor: pointer;
+    user-select: none;
+    line-height: 1.4;
+}
+
+.notes-tag-chip:hover {
+    background: var(--accent-bg, rgba(68, 88, 220, 0.12));
+}
+
+.notes-tag-chip.is-active {
+    background: var(--accent-fg, #4458dc);
+    color: var(--accent-on, #fff);
+    border-color: var(--accent-fg, #4458dc);
+}
+
+.notes-tag-filter-banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 6px 10px;
+    margin: 0 8px 6px;
+    border-radius: 4px;
+    background: var(--accent-bg, rgba(68, 88, 220, 0.12));
+    color: var(--accent-fg, #4458dc);
+    font-size: 11px;
+}
+
+.notes-tag-filter-banner-meta {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    overflow: hidden;
+}
+
+.notes-tag-filter-banner-hint {
+    font-size: 10px;
+    color: var(--text-muted, rgba(140, 140, 160, 0.9));
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.notes-tag-filter-clear {
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    font-size: 11px;
+    text-decoration: underline;
+}
+
+.notes-wikilink {
+    color: var(--accent-fg, #4458dc);
+    cursor: pointer;
+    text-decoration: none;
+    border-bottom: 1px solid currentColor;
+}
+
+.notes-wikilink:hover {
+    text-decoration: underline;
+}
+
+.notes-wikilink.is-broken {
+    color: var(--danger-fg, #c0392b);
+    border-bottom: 1px dashed currentColor;
+    cursor: help;
+}
+
+.notes-wysiwyg-frontmatter {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(120px, 180px);
+    gap: 8px 12px;
+    flex: 0 0 auto;
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--border-subtle, rgba(120, 120, 140, 0.18));
+    background: var(--surface-soft, rgba(120, 120, 140, 0.06));
+}
+
+.notes-wysiwyg-frontmatter-empty {
+    grid-template-columns: minmax(0, 1fr);
+    min-height: 28px;
+    padding: 5px 12px;
+    background: color-mix(in srgb, var(--canvas-panel) 70%, var(--accent-soft));
+}
+
+.notes-wysiwyg-frontmatter-add {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    min-width: 0;
+    padding: 3px 0;
+    border: 0;
+    background: transparent;
+    color: var(--text-secondary, rgba(92, 92, 110, 0.96));
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.notes-wysiwyg-frontmatter-add:hover,
+.notes-wysiwyg-frontmatter-add:focus-visible {
+    color: var(--accent-fg, #4458dc);
+}
+
+.notes-wysiwyg-frontmatter-add strong {
+    flex: 0 0 auto;
+    color: inherit;
+    font-size: 11px;
+    font-weight: 600;
+}
+
+.notes-wysiwyg-frontmatter-field {
+    display: grid;
+    gap: 4px;
+    min-width: 0;
+    font-size: 11px;
+}
+
+.notes-wysiwyg-frontmatter-field.is-wide {
+    grid-column: 1 / -1;
+}
+
+.notes-wysiwyg-frontmatter-field span {
+    color: var(--text-muted, rgba(140, 140, 160, 0.9));
+}
+
+.notes-wysiwyg-frontmatter-field input {
+    min-width: 0;
+    border: 1px solid var(--border-subtle, rgba(120, 120, 140, 0.25));
+    border-radius: 4px;
+    background: var(--surface-elevated, transparent);
+    color: inherit;
+    font: inherit;
+    padding: 4px 6px;
+}
+
+.notes-wysiwyg-frontmatter-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    align-items: end;
+}
+
+.notes-wikilink-live {
+    font: inherit;
+    border: 0;
+    background: transparent;
+    padding: 0;
+}
+
+.notes-milkdown-root .notes-wikilink-source[data-notes-wiki-hidden="true"] {
+    color: transparent;
+    font-size: 0;
+}
+
+.notes-milkdown-root .notes-wikilink-source[data-notes-wiki-hidden="false"],
+.notes-milkdown-root .notes-wikilink-source:hover {
+    color: inherit;
+    font-size: inherit;
+}
+
+.notes-wikilink-completion-anchor {
+    position: relative;
+    display: inline-block;
+    width: 0;
+    height: 1em;
+    vertical-align: baseline;
+}
+
+.notes-wikilink-completion {
+    position: absolute;
+    z-index: 24;
+    top: 1.35em;
+    left: 0;
+    display: grid;
+    width: min(280px, calc(100vw - 48px));
+    max-height: 220px;
+    overflow: auto;
+    padding: 4px;
+    border: 1px solid var(--border-subtle, rgba(120, 120, 140, 0.24));
+    border-radius: 6px;
+    background: var(--surface-elevated, #fff);
+    box-shadow: 0 12px 28px rgba(20, 24, 40, 0.16);
+}
+
+.notes-wikilink-completion-item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 2px 8px;
+    width: 100%;
+    min-width: 0;
+    padding: 6px 8px;
+    border: 0;
+    border-radius: 4px;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+}
+
+.notes-wikilink-completion-item:hover,
+.notes-wikilink-completion-item[aria-selected='true'] {
+    background: var(--accent-bg, rgba(68, 88, 220, 0.12));
+}
+
+.notes-wikilink-completion-title,
+.notes-wikilink-completion-path {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.notes-wikilink-completion-title {
+    grid-column: 1;
+    color: var(--text-primary, inherit);
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.notes-wikilink-completion-path {
+    grid-column: 1;
+    color: var(--text-muted, rgba(140, 140, 160, 0.9));
+    font-size: 10px;
+}
+
+.notes-wikilink-completion-meta {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+    align-self: center;
+    color: var(--accent-fg, #4458dc);
+    font-size: 10px;
+}

package/public/manager/src/notes/notes-types.ts

@@ -1,7 +1,10 @@
 import type {
     DashboardNoteFileResponse,
+    DashboardNoteSearchResult,
     DashboardNotesCapabilities,
     DashboardNoteTreeEntry,
+    NoteLinkRef,
+    NoteMetadata,
     VaultIndexSnapshot,
 } from '../types';
 
@@ -20,5 +23,8 @@ export type NoteConflictState = {
 
 export type NotesTreeEntry = DashboardNoteTreeEntry;
 export type NoteFile = DashboardNoteFileResponse;
+export type NoteSearchResult = DashboardNoteSearchResult;
 export type NotesVaultIndexSnapshot = VaultIndexSnapshot;
+export type NotesNoteMetadata = NoteMetadata;
+export type NotesNoteLinkRef = NoteLinkRef;
 export type NotesCapabilities = DashboardNotesCapabilities;

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

@@ -1,5 +1,5 @@
-import { isValidElement } from 'react';
-import type { ComponentProps, ReactNode } from 'react';
+import { createElement, isValidElement, useMemo } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
 import rehypeSanitize from 'rehype-sanitize';
@@ -14,15 +14,45 @@ import {
     notesImageSrc,
     safeMarkdownUrl,
 } from './markdown-render-security';
+import { buildWikiLinkLookup, splitChildrenWithWikiLinks, type WikiLinkContext } from '../wiki-link-rendering';
+import { splitPreviewFrontmatter } from '../frontmatter-preview';
+import type { NotesNoteLinkRef, NotesNoteMetadata } from '../notes-types';
 
 type MarkdownRendererProps = {
     markdown: string;
+    outgoing?: NotesNoteLinkRef[] | undefined;
+    notes?: readonly NotesNoteMetadata[] | undefined;
+    onWikiLinkNavigate?: ((path: string) => void) | undefined;
 };
 
 type MarkdownAnchorProps = ComponentProps<'a'> & {
     node?: unknown;
 };
 
+type WikiContainerTag =
+    | 'p'
+    | 'li'
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'blockquote'
+    | 'td'
+    | 'th'
+    | 'em'
+    | 'strong'
+    | 'del';
+
+type WikiContainerProps = {
+    children?: ReactNode;
+    className?: string | undefined;
+    id?: string | undefined;
+    style?: CSSProperties | undefined;
+    node?: unknown;
+};
+
 function textFromNode(node: ReactNode): string {
     if (typeof node === 'string' || typeof node === 'number') return String(node);
     if (Array.isArray(node)) return node.map(textFromNode).join('');
@@ -37,7 +67,27 @@ function languageFromCodeNode(node: ReactNode): string {
     return match?.[1] ?? 'text';
 }
 
+const NOOP_NAVIGATE = (_path: string): void => {};
+
 export function MarkdownRenderer(props: MarkdownRendererProps) {
+    const renderedMarkdown = useMemo(
+        () => splitPreviewFrontmatter(props.markdown).body,
+        [props.markdown],
+    );
+
+    const wikiCtx = useMemo<WikiLinkContext>(() => ({
+        lookup: buildWikiLinkLookup(props.outgoing),
+        outgoing: props.outgoing,
+        notes: props.notes,
+        onNavigate: props.onWikiLinkNavigate ?? NOOP_NAVIGATE,
+    }), [props.outgoing, props.notes, props.onWikiLinkNavigate]);
+
+    const wikiTransform = (tag: WikiContainerTag) => (containerProps: WikiContainerProps) => {
+        const { children, node: _node, className, id, style } = containerProps;
+        const transformed = splitChildrenWithWikiLinks(children, wikiCtx, tag);
+        return createElement(tag, { className, id, style }, transformed);
+    };
+
     return (
         <ReactMarkdown
             skipHtml
@@ -76,9 +126,23 @@ export function MarkdownRenderer(props: MarkdownRendererProps) {
                     if (!safeSrc) return null;
                     return <img {...imageProps} src={safeSrc} alt={alt ?? ''} loading="lazy" />;
                 },
+                p: wikiTransform('p'),
+                li: wikiTransform('li'),
+                h1: wikiTransform('h1'),
+                h2: wikiTransform('h2'),
+                h3: wikiTransform('h3'),
+                h4: wikiTransform('h4'),
+                h5: wikiTransform('h5'),
+                h6: wikiTransform('h6'),
+                blockquote: wikiTransform('blockquote'),
+                td: wikiTransform('td'),
+                th: wikiTransform('th'),
+                em: wikiTransform('em'),
+                strong: wikiTransform('strong'),
+                del: wikiTransform('del'),
             }}
         >
-            {props.markdown}
+            {renderedMarkdown}
         </ReactMarkdown>
     );
 }

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

@@ -1,4 +1,5 @@
 import { useEffect, useId, useState } from 'react';
+import { preprocessMermaid, sanitizeMermaidForRetry } from '../../../../js/render/mermaid-preprocess';
 
 type MermaidApi = {
     initialize(config: Record<string, unknown>): void;
@@ -40,7 +41,16 @@ export function MermaidBlock(props: MermaidBlockProps) {
             setState({ status: 'loading' });
             try {
                 const mermaid = await loadMermaid();
-                const { svg } = await mermaid.render(`notes-mermaid-${reactId}`, props.code);
+                const code = preprocessMermaid(props.code);
+                const id = `notes-mermaid-${reactId}`;
+                let svg: string;
+                try {
+                    ({ svg } = await mermaid.render(id, code));
+                } catch (firstErr: unknown) {
+                    const retryCode = sanitizeMermaidForRetry(code);
+                    if (!retryCode) throw firstErr;
+                    ({ svg } = await mermaid.render(`${id}-retry`, retryCode));
+                }
                 if (!cancelled) setState({ status: 'ready', svg });
             } catch (err) {
                 if (!cancelled) {