@kortix/ui 0.14.8 → 0.14.10

package/dist/workspace/memory/memory-body.js

@@ -0,0 +1,139 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ApiError } from '@kortix/sdk';
+import { useUpdateProjectMemoryPage } from '@kortix/sdk/react';
+import { WarningCircleIcon } from '@phosphor-icons/react';
+import { EditorContent, NodeViewWrapper, ReactNodeViewRenderer, useEditor, useEditorState, } from '@tiptap/react';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { Button } from '../../primitives/button.js';
+import { InfoBanner } from '../../primitives/info-banner.js';
+import Loading from '../../primitives/loading.js';
+import { successToast } from '../../primitives/toast.js';
+import { docToMarkdown, markdownToDoc, memoryLinkTarget, superscript } from './body-doc.js';
+import { BODY_CLASS, memoryBodyExtensions } from './body-extensions.js';
+import { SourceMark } from './source-mark.js';
+const ERROR_BY_CODE = {
+    version_conflict: 'conflict',
+    page_too_large: 'tooLarge',
+    secret_detected: 'secret',
+    layer_read_only: 'readOnly',
+};
+/** What a source number's view needs: the page's sources and the project. */
+const SourcesContext = createContext(null);
+/** A source number: `SourceMark` (its hint, its link) while reading; a plain superscript while editing. */
+function SourceNode({ node, editor }) {
+    const ctx = useContext(SourcesContext);
+    const editable = useEditorState({ editor, selector: (state) => state.editor.isEditable });
+    const number = Number(node.attrs.number);
+    const source = ctx?.sources.get(number);
+    return (_jsx(NodeViewWrapper, { as: "span", children: !source ? null : editable || !ctx ? (_jsx("span", { className: BODY_CLASS.source, children: superscript(number) })) : (_jsx(SourceMark, { source: source, projectId: ctx.projectId })) }));
+}
+/**
+ * The page's body, read and edited with one renderer: the reader's look is
+ * the editor's, so Edit changes nothing but the caret. While editing: Markdown
+ * shortcuts, no toolbar, Cancel and Save under it; Esc cancels, ⌘Enter saves.
+ * A link opens while reading: a URL in a new tab, a relative path as the
+ * memory page it names. Save sends the version it started from; a page
+ * changed meanwhile answers `version_conflict`, and Reload loads it.
+ */
+export function MemoryBody({ projectId, page, pages, editing, onSelectPage, onDone, onReload, }) {
+    const t = useTranslations('spaces.memory');
+    const update = useUpdateProjectMemoryPage(projectId);
+    const [error, setError] = useState(null);
+    const [initial] = useState(() => markdownToDoc(page.body));
+    const [sources] = useState(() => new Map(page.sources.map((source) => [source.number, source])));
+    // Handlers bound once by the editor: they read the newest props.
+    const latest = useRef({
+        save: () => { },
+        cancel: () => { },
+        open: () => false,
+    });
+    const editor = useEditor({
+        extensions: memoryBodyExtensions({
+            known: new Set(sources.keys()),
+            view: ReactNodeViewRenderer(SourceNode, { as: 'span' }),
+        }),
+        content: initial,
+        editable: false,
+        immediatelyRender: true,
+        editorProps: {
+            attributes: { class: BODY_CLASS.root, 'aria-label': t('editor.body') },
+            handleKeyDown: (view, event) => {
+                if (!view.editable)
+                    return false;
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    latest.current.cancel();
+                    return true;
+                }
+                if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
+                    event.preventDefault();
+                    latest.current.save();
+                    return true;
+                }
+                return false;
+            },
+            handleDOMEvents: {
+                click: (view, event) => {
+                    if (view.editable)
+                        return false;
+                    const anchor = event.target.closest('a');
+                    const href = anchor?.getAttribute('href');
+                    if (!anchor || !href || anchor.closest('[data-node-view-wrapper]'))
+                        return false;
+                    if (!latest.current.open(href))
+                        return false;
+                    event.preventDefault();
+                    return true;
+                },
+            },
+        },
+        onUpdate: () => setError(null),
+    });
+    // Edit turns the same document editable; Cancel puts the page back as it was.
+    useEffect(() => {
+        if (!editor)
+            return;
+        editor.setEditable(editing);
+        if (editing)
+            editor.commands.focus('end', { scrollIntoView: false });
+        else
+            editor.commands.setContent(initial, { emitUpdate: false });
+    }, [editor, editing, initial]);
+    const save = () => {
+        if (update.isPending || !editor)
+            return;
+        const body = docToMarkdown(editor.getJSON());
+        if (body === docToMarkdown(initial))
+            return onDone();
+        // `mutateAsync`, not `mutate`'s callbacks: the save bumps the page's
+        // version, which remounts this body (its key), and TanStack drops the
+        // call-time callbacks of an unmounted caller, so the editor stayed open.
+        update.mutateAsync({ pageId: page.page_id, input: { base_version: page.version_no, body } }).then(() => {
+            successToast(t('editor.saved'));
+            onDone();
+        }, (err) => setError((err instanceof ApiError && err.code && ERROR_BY_CODE[err.code]) || 'failed'));
+    };
+    const open = (href) => {
+        const target = memoryLinkTarget(href, page.path);
+        if (!target)
+            return false;
+        if ('url' in target)
+            window.open(target.url, '_blank', 'noopener,noreferrer');
+        else {
+            const linked = pages.find((p) => p.path === target.path);
+            if (linked)
+                onSelectPage(linked.page_id);
+        }
+        return true;
+    };
+    useEffect(() => {
+        latest.current = { save, cancel: onDone, open };
+    });
+    return (_jsx(SourcesContext.Provider, { value: { sources, projectId }, children: _jsxs("form", { className: "flex flex-col gap-4 pt-8", onSubmit: (event) => {
+                event.preventDefault();
+                save();
+            }, children: [!editing && !page.body.trim() ? _jsx("p", { className: "text-muted-foreground text-sm", children: t('emptyPage') }) : null, _jsx(EditorContent, { editor: editor, className: !editing && !page.body.trim() ? 'hidden' : undefined }), editing && error === 'conflict' ? (_jsx(InfoBanner, { tone: "warning", icon: WarningCircleIcon, title: t('editor.conflict'), action: _jsx(Button, { type: "button", variant: "outline", size: "toolbar", onClick: onReload, children: t('editor.reload') }) })) : editing && error ? (_jsx("p", { role: "alert", className: "text-destructive text-xs", children: t(`editor.error.${error}`) })) : null, editing ? (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onDone, disabled: update.isPending, children: t('editor.cancel') }), _jsxs(Button, { type: "submit", size: "sm", disabled: update.isPending, "aria-busy": update.isPending || undefined, children: [update.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, t('editor.save')] })] })) : null] }) }));
+}

package/dist/workspace/memory/memory-empty.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+/**
+ * A layer with no pages: the empty-folder layout of Files, with what memory
+ * is in one sentence. `action` is "Remember this…" for a writer; a channel or
+ * DM adds "Open Company memory", the layer its agent also reads.
+ */
+export declare function MemoryEmpty({ projectId, kind, place, action, }: {
+    projectId: string;
+    kind: 'company' | 'channel' | 'dm';
+    /** "#marketing" or the DM's agent. */
+    place: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;

package/dist/workspace/memory/memory-empty.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProjectMemoryPages } from '@kortix/sdk/react';
+import { BuildingsIcon, SunDimIcon } from '@phosphor-icons/react';
+import { useTranslations } from '../../i18n/index.js';
+import { uiRoutes } from '../../lib/routes.js';
+import { Button } from '../../primitives/button.js';
+import { EmptyArt } from '../../primitives/empty-art.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { UiLink } from '../../providers/ui-provider.js';
+/**
+ * A layer with no pages: the empty-folder layout of Files, with what memory
+ * is in one sentence. `action` is "Remember this…" for a writer; a channel or
+ * DM adds "Open Company memory", the layer its agent also reads.
+ */
+export function MemoryEmpty({ projectId, kind, place, action, }) {
+    const t = useTranslations('spaces.memory.empty');
+    return (_jsx(EmptyState, { className: "min-h-full", media: _jsx(EmptyArt, { icon: SunDimIcon }), title: t(kind === 'dm' ? 'titleDm' : kind === 'company' ? 'titleCompany' : 'title', { place }), description: t('description'), action: action, secondaryAction: kind === 'company' ? undefined : _jsx(CompanyMemoryButton, { projectId: projectId }) }));
+}
+/** "Open Company memory · 16 pages": hidden until the count loads. */
+function CompanyMemoryButton({ projectId }) {
+    const t = useTranslations('spaces.memory');
+    const company = useProjectMemoryPages(projectId, 'company');
+    const href = uiRoutes().memory(projectId);
+    if (!href || !company.data)
+        return null;
+    return (_jsx(Button, { asChild: true, variant: "outline", size: "sm", className: "gap-1.5 tabular-nums", title: t('companyLinkHint'), children: _jsxs(UiLink, { href: href, children: [_jsx(BuildingsIcon, { className: "size-3.5 shrink-0" }), t('empty.openCompany', { count: company.data.length })] }) }));
+}

package/dist/workspace/memory/memory-history.d.ts

@@ -0,0 +1,27 @@
+import type { ProjectMemoryPage, ProjectMemoryVersion } from '@kortix/sdk';
+/** The versions History shows; the reader reads the same cache for the one it previews. */
+export declare function useMemoryVersions(projectId: string, pageId: string | undefined): {
+    history: import("@tanstack/react-query").UseQueryResult<import("@kortix/sdk").ProjectMemoryVersionList, Error>;
+    versions: ProjectMemoryVersion[];
+};
+/** "Restore this version": the version's body comes back as a new edit (the title is the file's and does not change). */
+export declare function useRestoreMemoryVersion(projectId: string, page: ProjectMemoryPage, onRestored: () => void): {
+    restore: (version: ProjectMemoryVersion) => void;
+    restoring: boolean;
+};
+/**
+ * The page's History in a sheet beside the reader: every version, newest
+ * first. Preview shows a version in the reader, as the page looked then;
+ * Restore makes it the current version. `previewId` is the previewed
+ * version (null: the current page). Esc while previewing returns to the
+ * current page; a second Esc closes the sheet. Where the sheet covers the
+ * reader (a narrow container), Preview passes `covered`: the view closes the
+ * sheet so the reader can show the version.
+ */
+export declare function MemoryHistory({ projectId, page, previewId, onPreview, onRestored, }: {
+    projectId: string;
+    page: ProjectMemoryPage;
+    previewId: string | null;
+    onPreview: (versionId: string | null, covered?: boolean) => void;
+    onRestored: () => void;
+}): import("react").JSX.Element;

package/dist/workspace/memory/memory-history.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProjectMemoryHistory, useUpdateProjectMemoryPage } from '@kortix/sdk/react';
+import { diffLines } from 'diff';
+import { useMemo } from 'react';
+import { useLocale, useTranslations } from '../../i18n/index.js';
+import { relativeTime } from '../../internal/lib/relative-time.js';
+import { cn } from '../../lib/utils.js';
+import { hasOpenFloatingLayer } from '../../lib/z-stack.js';
+import { Badge } from '../../primitives/badge.js';
+import { Button } from '../../primitives/button.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import Loading from '../../primitives/loading.js';
+import { SplitSheetBody, SplitSheetContent, SplitSheetDescription, SplitSheetHeader, SplitSheetTitle, } from '../../primitives/split-sheet.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { hasMemoryAuthor, MemoryAuthorAvatar, useMemoryAuthorName } from './memory-labels.js';
+/** The row's quiet bordered buttons, as the reader's Edit · History · Delete. */
+const ACTION = 'text-muted-foreground hover:text-foreground font-normal';
+/** A version as one text, so a title or summary change counts with the body. */
+function versionText(version) {
+    if (!version)
+        return '';
+    const { title, summary, body } = version.snapshot;
+    return `${[`# ${title}`, summary, body].filter(Boolean).join('\n\n')}\n`;
+}
+/** Lines a version added and removed against the one before it. */
+function lineChanges(version, previous) {
+    let added = 0;
+    let removed = 0;
+    for (const part of diffLines(versionText(previous), versionText(version))) {
+        if (part.added)
+            added += part.count ?? 0;
+        else if (part.removed)
+            removed += part.count ?? 0;
+    }
+    return { added, removed };
+}
+/**
+ * The sheet covers the reader: the split sheet's container is too narrow for
+ * two columns (`@max-3xl/split-sheet`), so its main cell is `invisible`. A
+ * preview shown behind the sheet would then show nothing.
+ */
+function coversReader(from) {
+    const main = from
+        .closest('[data-slot="split-sheet-grid"]')
+        ?.querySelector(':scope > [data-slot="split-sheet-main"]');
+    return !!main && getComputedStyle(main).visibility === 'hidden';
+}
+/** The versions History shows; the reader reads the same cache for the one it previews. */
+export function useMemoryVersions(projectId, pageId) {
+    const history = useProjectMemoryHistory(projectId, pageId);
+    return { history, versions: history.data?.versions ?? [] };
+}
+/** "Restore this version": the version's body comes back as a new edit (the title is the file's and does not change). */
+export function useRestoreMemoryVersion(projectId, page, onRestored) {
+    const t = useTranslations('spaces.memory');
+    const update = useUpdateProjectMemoryPage(projectId);
+    const restore = (version) => update.mutate({ pageId: page.page_id, input: { base_version: page.version_no, body: version.snapshot.body } }, {
+        onSuccess: () => {
+            successToast(t('history.restored'));
+            onRestored();
+        },
+        onError: () => errorToast(t('history.restoreFailed')),
+    });
+    return { restore, restoring: update.isPending };
+}
+/**
+ * The page's History in a sheet beside the reader: every version, newest
+ * first. Preview shows a version in the reader, as the page looked then;
+ * Restore makes it the current version. `previewId` is the previewed
+ * version (null: the current page). Esc while previewing returns to the
+ * current page; a second Esc closes the sheet. Where the sheet covers the
+ * reader (a narrow container), Preview passes `covered`: the view closes the
+ * sheet so the reader can show the version.
+ */
+export function MemoryHistory({ projectId, page, previewId, onPreview, onRestored, }) {
+    const t = useTranslations('spaces.memory');
+    const { history, versions } = useMemoryVersions(projectId, page.page_id);
+    const { restore, restoring } = useRestoreMemoryVersion(projectId, page, onRestored);
+    return (_jsxs(SplitSheetContent, { onKeyDown: (event) => {
+            if (event.key !== 'Escape' || !previewId || hasOpenFloatingLayer())
+                return;
+            // Handled here, so the sheet stays open.
+            event.preventDefault();
+            onPreview(null);
+        }, children: [_jsxs(SplitSheetHeader, { closeLabel: t('close'), children: [_jsx(SplitSheetTitle, { children: t('history.title') }), _jsx(SplitSheetDescription, { children: t('history.description', { title: page.title }) })] }), _jsx(SplitSheetBody, { className: "px-2 py-2", children: history.isError && !history.data ? (_jsx(ErrorState, { size: "sm", title: t('history.loadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => history.refetch(), children: t('retry') }) })) : !history.data ? (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Loading, { className: "size-4 shrink-0" }) })) : (_jsx("ol", { className: "flex flex-col gap-0.5", children: versions.map((version, index) => (_jsx(VersionRow, { version: version, previous: versions[index + 1], current: index === 0, previewed: version.version_id === previewId, canRestore: page.can_edit && index > 0 && !version.snapshot.deleted, restoring: restoring, onPreview: (event) => {
+                            // Covered: Preview always shows the version (the reader is hidden, so a second press is not "back").
+                            const covered = coversReader(event.currentTarget);
+                            const toggleOff = !covered && version.version_id === previewId;
+                            onPreview(toggleOff ? null : version.version_id, covered);
+                        }, onRestore: () => restore(version) }, version.version_id))) })) })] }));
+}
+function VersionRow({ version, previous, current, previewed, canRestore, restoring, onPreview, onRestore, }) {
+    const t = useTranslations('spaces.memory');
+    const locale = useLocale();
+    const authorName = useMemoryAuthorName();
+    const name = authorName(version.author);
+    const changes = useMemo(() => lineChanges(version, previous), [version, previous]);
+    const meta = [
+        relativeTime(version.created_at, locale),
+        changes.added ? t('history.added', { count: changes.added }) : null,
+        changes.removed ? t('history.removed', { count: changes.removed }) : null,
+    ].filter(Boolean);
+    const canPreview = !current && !version.snapshot.deleted;
+    return (_jsxs("li", { "aria-current": previewed || undefined, className: cn('flex items-start gap-2.5 rounded-md px-2.5 py-2', previewed && 'bg-active'), children: [_jsx(MemoryAuthorAvatar, { author: version.author, name: name }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [_jsxs("span", { className: "flex items-center gap-1.5 text-xs", children: [_jsx("span", { className: "truncate font-medium", children: hasMemoryAuthor(version.author)
+                                    ? t(`history.op.${version.op}`, { author: name })
+                                    : t(version.op === 'create' ? 'history.created' : 'history.edited') }), current ? _jsx(Badge, { variant: "muted", children: t('history.current') }) : null] }), _jsx("span", { className: "text-muted-foreground truncate text-xs tabular-nums", children: meta.join(' · ') }), canPreview || canRestore ? (_jsxs("div", { className: "flex flex-wrap items-center gap-1.5 pt-1.5", children: [canPreview ? (_jsx(Button, { variant: "outline", size: "toolbar", className: ACTION, "aria-pressed": previewed, onClick: onPreview, children: t('history.preview') })) : null, canRestore ? (_jsx(Button, { variant: "outline", size: "toolbar", className: ACTION, disabled: restoring, "aria-busy": restoring || undefined, onClick: onRestore, children: t('history.restoreShort') })) : null] })) : null] })] }));
+}

package/dist/workspace/memory/memory-labels.d.ts

@@ -0,0 +1,16 @@
+import type { ProjectMemoryAuthor, ProjectMemoryPageType } from '@kortix/sdk';
+import { type Icon } from '@phosphor-icons/react';
+export declare const MEMORY_TYPE_ICON: Record<ProjectMemoryPageType, Icon>;
+/**
+ * A named person or agent wrote the change. A file with no front-matter author
+ * (a Remember note, a Drive sync) has none: the reader shows no "by …" and
+ * History shows the change without an author, never an invented "A member".
+ */
+export declare function hasMemoryAuthor(author: ProjectMemoryAuthor): boolean;
+/** Who wrote a change, as a name: the agent, the person (the app's `participantLabel` rule), or "Kortix" for an import. */
+export declare function useMemoryAuthorName(): (author: ProjectMemoryAuthor) => string;
+/** The author's tile: an agent's pixel mark, a person's initials, a page glyph when nobody is named. */
+export declare function MemoryAuthorAvatar({ author, name }: {
+    author: ProjectMemoryAuthor;
+    name: string;
+}): import("react").JSX.Element;

package/dist/workspace/memory/memory-labels.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BookOpenIcon, BriefcaseIcon, FileTextIcon, NoteIcon, SignpostIcon, UserIcon } from '@phosphor-icons/react';
+import { AgentMark } from '../../internal/components/agent-mark.js';
+import { useTranslations } from '../../i18n/index.js';
+import { UserAvatar } from '../../primitives/user-avatar.js';
+import { participantLabel } from '../../session/participants/session-participants.js';
+import { agentLabel } from '../spaces/space-timeline.js';
+export const MEMORY_TYPE_ICON = {
+    people: UserIcon,
+    decisions: SignpostIcon,
+    workstreams: BriefcaseIcon,
+    playbooks: BookOpenIcon,
+    note: NoteIcon,
+    other: FileTextIcon,
+};
+/**
+ * A named person or agent wrote the change. A file with no front-matter author
+ * (a Remember note, a Drive sync) has none: the reader shows no "by …" and
+ * History shows the change without an author, never an invented "A member".
+ */
+export function hasMemoryAuthor(author) {
+    return author.kind === 'agent' ? !!author.agent : author.kind === 'person' && !!author.name;
+}
+/** Who wrote a change, as a name: the agent, the person (the app's `participantLabel` rule), or "Kortix" for an import. */
+export function useMemoryAuthorName() {
+    const t = useTranslations('spaces.memory');
+    return (author) => {
+        if (author.kind === 'agent' && author.agent)
+            return agentLabel(author.agent);
+        if (author.kind === 'person' && author.name)
+            return participantLabel({ name: author.name, email: null });
+        if (author.kind === 'agent')
+            return t('author.agent');
+        return author.kind === 'system' ? t('author.system') : t('author.unknown');
+    };
+}
+/** The author's tile: an agent's pixel mark, a person's initials, a page glyph when nobody is named. */
+export function MemoryAuthorAvatar({ author, name }) {
+    if (author.kind === 'agent' && author.agent)
+        return _jsx(AgentMark, { slug: author.agent, label: name });
+    if (!hasMemoryAuthor(author)) {
+        // Neutral, not `EntityAvatar`: its hashed pastel would read as a person.
+        return (_jsx("span", { className: "bg-muted text-muted-foreground flex size-5 shrink-0 items-center justify-center rounded-sm border", children: _jsx(FileTextIcon, { className: "size-3", "aria-hidden": true }) }));
+    }
+    return _jsx(UserAvatar, { email: author.user_id ?? name, name: name, size: "xs" });
+}

package/dist/workspace/memory/memory-page-list.d.ts

@@ -0,0 +1,34 @@
+import type { ProjectMemoryPageSummary, ProjectMemoryPageType } from '@kortix/sdk';
+import { type ReactElement, type ReactNode } from 'react';
+/** The layer's pages, newest updated first. */
+export declare function sortMemoryPages(pages: readonly ProjectMemoryPageSummary[]): ProjectMemoryPageSummary[];
+/** Sorted pages split into their type's group, in `MEMORY_GROUP_ORDER`, without empty groups. */
+export declare function groupMemoryPages(pages: readonly ProjectMemoryPageSummary[]): {
+    type: ProjectMemoryPageType;
+    pages: ProjectMemoryPageSummary[];
+}[];
+/**
+ * The Memory tab's middle column: "5 pages" with a search button (it turns
+ * the header into a search field), "All" (the layer at a glance), then the
+ * page titles in groups by type
+ * (About, People, Decisions, Projects, How we work, Notes), newest first in
+ * each. A search of 2 characters or more shows the server's hits as one
+ * flat list.
+ */
+export declare function MemoryPageList({ projectId, layerKey, pages, selectedId, onSelect, anchor, className, }: {
+    projectId: string;
+    layerKey: string;
+    /** Sorted by `sortMemoryPages`. */
+    pages: readonly ProjectMemoryPageSummary[];
+    /** null: the All view. */
+    selectedId: string | null;
+    /** null: the All view. */
+    onSelect: (pageId: string | null) => void;
+    /** Wraps the header row: "Remember this…" anchors to it when a link opens it. */
+    anchor?: (header: ReactElement) => ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+/** A channel's or DM's list ends with the Company memory its agent also reads; hidden until its count loads. */
+export declare function CompanyMemoryLink({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element | null;

package/dist/workspace/memory/memory-page-list.js

@@ -0,0 +1,156 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProjectMemoryPages, useProjectMemorySearch } from '@kortix/sdk/react';
+import { CaretRightIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
+import { useReducedMotion } from 'motion/react';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { useDebounce } from '../../internal/hooks/use-debounced-value.js';
+import { uiRoutes } from '../../lib/routes.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../../primitives/button.js';
+import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../primitives/disclosure.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import Loading from '../../primitives/loading.js';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.js';
+import { UiLink } from '../../providers/ui-provider.js';
+/** The layer's pages, newest updated first. */
+export function sortMemoryPages(pages) {
+    return [...pages].sort((a, b) => Date.parse(b.updated_at) - Date.parse(a.updated_at));
+}
+/** The list's groups, in this order. Empty groups are not shown. */
+const MEMORY_GROUP_ORDER = [
+    'other',
+    'people',
+    'decisions',
+    'workstreams',
+    'playbooks',
+    'note',
+];
+/** Sorted pages split into their type's group, in `MEMORY_GROUP_ORDER`, without empty groups. */
+export function groupMemoryPages(pages) {
+    return MEMORY_GROUP_ORDER.map((type) => ({ type, pages: pages.filter((page) => page.type === type) })).filter((group) => group.pages.length > 0);
+}
+/** The collapsed groups of one layer, per viewer. Storage can be absent or throw: then every group starts open. */
+function readCollapsed(key) {
+    try {
+        const value = JSON.parse(window.localStorage.getItem(key) ?? '[]');
+        return Array.isArray(value) ? value.filter((type) => typeof type === 'string') : [];
+    }
+    catch {
+        return [];
+    }
+}
+function writeCollapsed(key, collapsed) {
+    try {
+        window.localStorage.setItem(key, JSON.stringify(collapsed));
+    }
+    catch {
+        // Private mode or blocked storage: the state lasts until reload.
+    }
+}
+/** Collapsed groups, remembered per project and layer; the selected page's group opens when it is collapsed. */
+function useCollapsedGroups(projectId, layerKey, selected) {
+    const key = `kortix:memory-groups-collapsed:${projectId}:${layerKey}`;
+    const [state, setState] = useState(() => ({ key, collapsed: readCollapsed(key) }));
+    let collapsed = state.key === key ? state.collapsed : readCollapsed(key);
+    const [openedFor, setOpenedFor] = useState(null);
+    if ((selected?.id ?? null) !== openedFor) {
+        // Adjusting state during render: a page chosen elsewhere (a link, the palette) shows inside an open group.
+        setOpenedFor(selected?.id ?? null);
+        if (selected && collapsed.includes(selected.type))
+            collapsed = collapsed.filter((type) => type !== selected.type);
+    }
+    if (state.key !== key || state.collapsed !== collapsed)
+        setState({ key, collapsed });
+    // A toggle and an auto-open both persist, so a reload shows what the viewer last saw.
+    useEffect(() => writeCollapsed(state.key, state.collapsed), [state]);
+    const toggle = (type) => {
+        setState({ key, collapsed: collapsed.includes(type) ? collapsed.filter((item) => item !== type) : [...collapsed, type] });
+    };
+    return { collapsed, toggle };
+}
+const ROW = 'focus-visible:ring-ring flex h-8 w-full shrink-0 items-center gap-2 rounded-md px-2 text-left text-sm outline-none focus-visible:ring-2';
+/**
+ * The Memory tab's middle column: "5 pages" with a search button (it turns
+ * the header into a search field), "All" (the layer at a glance), then the
+ * page titles in groups by type
+ * (About, People, Decisions, Projects, How we work, Notes), newest first in
+ * each. A search of 2 characters or more shows the server's hits as one
+ * flat list.
+ */
+export function MemoryPageList({ projectId, layerKey, pages, selectedId, onSelect, anchor, className, }) {
+    const t = useTranslations('spaces.memory');
+    const [searchOpen, setSearchOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    // 2 characters or more: the server's search (titles, summaries and text).
+    // 1 character: the titles, filtered here.
+    const trimmed = query.trim();
+    const searching = trimmed.length >= 2;
+    const debounced = useDebounce(trimmed, 250);
+    const search = useProjectMemorySearch(projectId, { q: debounced, layer: layerKey }, { enabled: searching });
+    const needle = searching ? '' : trimmed.toLowerCase();
+    const shown = useMemo(() => (needle ? pages.filter((page) => page.title.toLowerCase().includes(needle)) : pages), [pages, needle]);
+    const groups = useMemo(() => groupMemoryPages(shown), [shown]);
+    const selectedPage = pages.find((page) => page.page_id === selectedId);
+    const { collapsed, toggle } = useCollapsedGroups(projectId, layerKey, selectedPage ? { id: selectedPage.page_id, type: selectedPage.type } : null);
+    const closeSearch = () => {
+        setQuery('');
+        setSearchOpen(false);
+    };
+    // One box in both states (the rows' height, `mb-1.5` above the first group), so opening search moves nothing below.
+    const headerBox = 'mb-1.5 flex h-8 shrink-0 items-center';
+    const header = searchOpen ? (_jsx("div", { className: headerBox, children: _jsxs(InputGroupSearch, { className: "flex-1", children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { size: "xs", autoFocus: true, placeholder: t('search'), "aria-label": t('search'), value: query, onChange: (event) => setQuery(event.target.value), onBlur: () => !query && setSearchOpen(false), onKeyDown: (event) => {
+                        if (event.key === 'Escape') {
+                            event.stopPropagation();
+                            closeSearch();
+                        }
+                    } }), _jsx(InputGroupSearchClear, { onClick: closeSearch })] }) })) : (_jsxs("div", { className: cn(headerBox, 'justify-between pr-1 pl-2'), children: [_jsx("p", { className: "text-muted-foreground text-xs tabular-nums", children: t('pageCount', { count: pages.length }) }), _jsx(Button, { variant: "ghost", size: "icon-xs", "aria-label": t('search'), className: "text-muted-foreground hover:text-foreground", onClick: () => setSearchOpen(true), children: _jsx(MagnifyingGlassIcon, { className: "size-3.5" }) })] }));
+    return (_jsxs("nav", { "aria-label": t('pagesLabel'), className: cn('flex w-72 shrink-0 flex-col border-r px-3.5 pt-5 pb-4', className), children: [anchor ? anchor(header) : header, searching ? (_jsx(SearchResults, { query: trimmed, search: search, ready: debounced.length >= 2, selectedId: selectedId, onSelect: onSelect })) : (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-1.5 overflow-y-auto", children: [needle ? null : (_jsx("button", { type: "button", "aria-current": selectedId === null ? 'page' : undefined, onClick: () => onSelect(null), className: cn(ROW, selectedId === null
+                            ? 'bg-active text-foreground font-medium'
+                            : 'text-muted-foreground hover:bg-hover hover:text-foreground transition-colors duration-fast'), children: t('all.title') })), groups.map((group) => (_jsx(MemoryPageGroup, { label: t(`group.${group.type}`), open: !collapsed.includes(group.type), onToggle: () => toggle(group.type), children: group.pages.map((page) => (_jsx("li", { children: _jsx("button", { type: "button", "aria-current": page.page_id === selectedId ? 'page' : undefined, onClick: () => onSelect(page.page_id), title: page.title, className: cn(ROW, page.page_id === selectedId
+                                    ? 'bg-active text-foreground font-medium'
+                                    : 'text-muted-foreground hover:bg-hover hover:text-foreground transition-colors duration-fast'), children: _jsx("span", { className: "min-w-0 flex-1 truncate", children: page.title }) }) }, page.page_id))) }, group.type))), needle && shown.length === 0 ? (_jsx("p", { className: "text-muted-foreground px-2 py-8 text-xs", children: t('noMatches', { query: trimmed }) })) : null] })), layerKey === 'company' ? null : _jsx(CompanyMemoryLink, { projectId: projectId })] }));
+}
+/**
+ * One type's pages under a ghost header row: the muted label on the page
+ * titles' text edge (same `h-8 px-2 rounded-md` box as the rows), the caret
+ * at the far right, pointing down while open. Hover fills it with
+ * `bg-secondary`. Height and opacity fold in 200ms ease-out; with reduced
+ * motion the height snaps and only the fade stays.
+ */
+function MemoryPageGroup({ label, open, onToggle, children, }) {
+    const reduceMotion = useReducedMotion();
+    return (_jsxs(Disclosure, { open: open, onOpenChange: onToggle, className: "group/memory-group flex shrink-0 flex-col gap-px", transition: { duration: 0.2, ease: 'easeOut', ...(reduceMotion ? { height: { duration: 0 } } : null) }, children: [_jsx(DisclosureTrigger, { children: _jsxs(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground hover:bg-secondary hover:text-foreground focus-visible:ring-ring duration-fast h-8 w-full justify-between gap-2 px-2 text-left text-xs font-normal transition-colors focus-visible:ring-2 has-[>svg]:px-2", children: [_jsx("span", { className: "min-w-0 truncate", children: label }), _jsx(CaretRightIcon, { "aria-hidden": true, className: "duration-moderate size-3.5 shrink-0 transition-[rotate] ease-out group-data-[state=open]/memory-group:rotate-90 motion-reduce:transition-none" })] }) }), _jsx(DisclosureContent, { children: _jsx("ul", { className: "flex flex-col", children: children }) })] }));
+}
+/** A channel's or DM's list ends with the Company memory its agent also reads; hidden until its count loads. */
+export function CompanyMemoryLink({ projectId }) {
+    const t = useTranslations('spaces.memory');
+    const company = useProjectMemoryPages(projectId, 'company');
+    const href = uiRoutes().memory(projectId);
+    if (!href || !company.data)
+        return null;
+    return (_jsx(UiLink, { href: href, title: t('companyLinkHint'), className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring mt-3 shrink-0 truncate rounded-md px-2 text-xs tabular-nums outline-none transition-colors duration-fast focus-visible:ring-2", children: t('companyLink', { count: company.data.length }) }));
+}
+/**
+ * The server's hits for the search field, best first: title and summary. The
+ * hits of the previous query stay while the next one loads.
+ */
+function SearchResults({ query, search, ready, selectedId, onSelect, }) {
+    const t = useTranslations('spaces.memory');
+    const hits = ready ? search.data?.hits : undefined;
+    let body;
+    if (search.isError && !hits) {
+        body = (_jsx(ErrorState, { size: "sm", title: t('searchError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => search.refetch(), children: t('retry') }) }));
+    }
+    else if (!hits) {
+        body = (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Loading, { className: "size-4 shrink-0" }) }));
+    }
+    else if (hits.length === 0) {
+        body = _jsx("p", { className: "text-muted-foreground px-2 py-8 text-xs", children: t('noMatches', { query }) });
+    }
+    else {
+        body = (_jsx("ul", { "aria-label": t('searchResults'), className: "flex flex-col", children: hits.map((hit) => (_jsx("li", { children: _jsxs("button", { type: "button", "aria-current": hit.page_id === selectedId ? 'page' : undefined, onClick: () => onSelect(hit.page_id), className: cn('focus-visible:ring-ring flex w-full flex-col gap-0.5 rounded-md px-2 py-1.5 text-left text-sm outline-none focus-visible:ring-2', hit.page_id === selectedId ? 'bg-active' : 'hover:bg-hover'), children: [_jsx("span", { className: "text-foreground truncate font-medium", children: hit.title }), hit.summary || hit.snippet ? (_jsx("span", { className: "text-muted-foreground line-clamp-2 text-xs", children: hit.summary || hit.snippet })) : null] }) }, hit.page_id))) }));
+    }
+    return _jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: body });
+}

package/dist/workspace/memory/memory-reader.d.ts

@@ -0,0 +1,58 @@
+import type { ProjectMemoryPage, ProjectMemoryPageSummary } from '@kortix/sdk';
+/**
+ * One page, across the reader's width: the title and "Updated 2h ago by
+ * Writer" top left, Edit · History · Delete top right, then the body with its
+ * source numbers, the numbered sources and the related pages. `editor`
+ * replaces the body while it is edited (the buttons hide; Cancel and Save sit
+ * under it). Delete asks once and deletes for good. The header draws from
+ * the list's summary at once; the body arrives with the page. `previewId`
+ * (a version picked in History) shows that version instead, read-only, under
+ * a bar with "Restore this version" and "Back to current" (Esc). Where the
+ * History sheet covers the reader (a narrow container), Preview closes the
+ * sheet first, so the version shows here; History reopens it on that version.
+ */
+export declare function MemoryReader({ projectId, summary, page, pageError, pages, editing, editorRun, onRetry, onSelectPage, onBack, onEdit, onHistory, onEditDone, onReload, onRemoved, previewId, previewFocus, onPreviewEnd, }: {
+    projectId: string;
+    summary: ProjectMemoryPageSummary;
+    page: ProjectMemoryPage | undefined;
+    pageError: boolean;
+    /** The layer's pages: where a relative link in the body goes. */
+    pages: readonly ProjectMemoryPageSummary[];
+    /** The body is being edited in place. */
+    editing: boolean;
+    /** Bumped by the editor's Reload: a fresh body on the newest version. */
+    editorRun: number;
+    onRetry: () => void;
+    onSelectPage: (pageId: string) => void;
+    /** Back to the list, on a container too narrow to show both. */
+    onBack: () => void;
+    onEdit: () => void;
+    onHistory: () => void;
+    /** Editing ended: saved or cancelled. */
+    onEditDone: () => void;
+    /** Reload after `version_conflict`. */
+    onReload: () => void;
+    /** The page is gone: leave it. */
+    onRemoved: () => void;
+    /** A version picked in History to preview; null: the current page. */
+    previewId?: string | null;
+    /**
+     * The preview replaced a History sheet that covered the reader: focus goes
+     * to "Back to current", and back to History when the preview ends.
+     */
+    previewFocus?: boolean;
+    /** Back to the current page. */
+    onPreviewEnd?: () => void;
+}): import("react").JSX.Element;
+/** A text line's placeholder inside the line box of `line` (its font size and line height), so the real line lands where it sat. */
+export declare function Line({ line, className }: {
+    line: string;
+    className: string;
+}): import("react").JSX.Element;
+/**
+ * The reader before the layer has loaded: the title's and "Updated …"'s line
+ * boxes, then the body. No Edit, History or Delete: they come with the page.
+ */
+export declare function MemoryReaderSkeleton({ className }: {
+    className?: string;
+}): import("react").JSX.Element;