@kortix/ui 0.14.8 → 0.14.9

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

@@ -0,0 +1,123 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useDeleteProjectMemoryPage } from '@kortix/sdk/react';
+import { CaretLeftIcon, ClockCounterClockwiseIcon, PencilSimpleIcon, TrashIcon } from '@phosphor-icons/react';
+import { useEffect, useRef, useState } from 'react';
+import { useLocale, useTranslations } from '../../i18n/index.js';
+import { relativeTime } from '../../internal/lib/relative-time.js';
+import { Button } from '../../primitives/button.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { Alert, AlertActions, AlertContent, AlertDescription, AlertMedia, AlertTitle } from '../../primitives/alert.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { cn } from '../../lib/utils.js';
+import { hasOpenFloatingLayer } from '../../lib/z-stack.js';
+import { hasMemoryAuthor, useMemoryAuthorName } from './memory-labels.js';
+import { MemoryBody } from './memory-body.js';
+import { useMemoryVersions, useRestoreMemoryVersion } from './memory-history.js';
+import { SourceList } from './source-mark.js';
+/** The reader's three quiet bordered buttons: Edit, History, Delete. */
+const ACTION = 'text-muted-foreground hover:text-foreground font-normal';
+/**
+ * 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 function MemoryReader({ projectId, summary, page, pageError, pages, editing, editorRun, onRetry, onSelectPage, onBack, onEdit, onHistory, onEditDone, onReload, onRemoved, previewId = null, previewFocus = false, onPreviewEnd, }) {
+    const t = useTranslations('spaces.memory');
+    const locale = useLocale();
+    const authorName = useMemoryAuthorName();
+    const remove = useDeleteProjectMemoryPage(projectId);
+    const [deleting, setDeleting] = useState(false);
+    const { versions } = useMemoryVersions(projectId, previewId && page ? page.page_id : undefined);
+    const preview = (previewId && versions.find((version) => version.version_id === previewId)) || null;
+    const historyRef = useRef(null);
+    const focusedPreview = useRef(false);
+    useEffect(() => {
+        if (preview && previewFocus)
+            focusedPreview.current = true;
+        else if (!preview && focusedPreview.current) {
+            focusedPreview.current = false;
+            historyRef.current?.focus({ preventScroll: true });
+        }
+    }, [preview, previewFocus]);
+    const confirmDelete = () => remove.mutate(summary.page_id, {
+        onSuccess: () => {
+            setDeleting(false);
+            onRemoved();
+            successToast(t('deleted'));
+        },
+        onError: () => errorToast(t('deleteFailed')),
+    });
+    return (_jsxs("div", { className: "@container/reader min-h-0 flex-1 overflow-y-auto", children: [_jsxs("article", { className: "flex flex-col px-6 py-8 @2xl/reader:px-16 @2xl/reader:py-10", children: [_jsxs(Button, { variant: "ghost", size: "toolbar", className: "text-muted-foreground mb-4 -ml-2 self-start @md/memory:hidden", onClick: onBack, children: [_jsx(CaretLeftIcon, { "aria-hidden": true }), t('allPages')] }), preview && page ? _jsx(PreviewBar, { projectId: projectId, page: page, version: preview, focus: previewFocus, onEnd: onPreviewEnd }) : null, _jsxs("header", { className: "flex flex-col items-start gap-3 @xl/reader:flex-row @xl/reader:justify-between @xl/reader:gap-6", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1.5", children: [_jsx("h2", { className: "text-2xl leading-tight font-semibold tracking-tight text-balance [overflow-wrap:anywhere]", children: preview ? preview.snapshot.title : summary.title }), _jsx("p", { hidden: !!preview, className: "text-muted-foreground text-xs leading-snug", children: hasMemoryAuthor(summary.updated_by)
+                                            ? t('updated', { time: relativeTime(summary.updated_at, locale), author: authorName(summary.updated_by) })
+                                            : t('updatedAt', { time: relativeTime(summary.updated_at, locale) }) })] }), !page || preview ? null : (_jsxs("div", { className: cn('flex shrink-0 flex-wrap items-center gap-1.5 pt-0.5', editing && 'invisible'), "aria-hidden": editing || undefined, inert: editing || undefined, children: [page.can_edit ? (_jsxs(Button, { variant: "outline", size: "toolbar", className: ACTION, onClick: onEdit, children: [_jsx(PencilSimpleIcon, { "aria-hidden": true }), t('edit')] })) : null, _jsxs(Button, { ref: historyRef, variant: "outline", size: "toolbar", className: ACTION, onClick: onHistory, children: [_jsx(ClockCounterClockwiseIcon, { "aria-hidden": true }), t('history.title')] }), page.can_delete ? (_jsxs(Button, { variant: "outline", size: "toolbar", className: ACTION, onClick: () => setDeleting(true), children: [_jsx(TrashIcon, { "aria-hidden": true }), t('delete')] })) : null] }))] }), pageError && !page ? (_jsx("div", { className: "pt-8", children: _jsx(ErrorState, { size: "sm", title: t('pageLoadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: onRetry, children: t('retry') }) }) })) : page && preview ? (_jsx(MemoryBody, { projectId: projectId, page: { ...page, body: preview.snapshot.body }, pages: pages, editing: false, onSelectPage: onSelectPage, onDone: () => { }, onReload: () => { } }, `preview:${preview.version_id}`)) : page ? (_jsxs(_Fragment, { children: [_jsx(MemoryBody, { projectId: projectId, page: page, pages: pages, editing: editing, onSelectPage: onSelectPage, onDone: onEditDone, onReload: onReload }, `${page.page_id}:${page.version_no}:${editorRun}`), _jsx(PageFooter, { projectId: projectId, page: page, onSelectPage: onSelectPage })] })) : (_jsx(DelayedBodySkeleton, {}))] }), _jsx(ConfirmDialog, { open: deleting, onOpenChange: setDeleting, title: t('deleteTitle', { title: summary.title }), description: t('deleteDescription'), confirmLabel: t('delete'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: confirmDelete })] }));
+}
+/**
+ * Above the title while a version is previewed: when and by whom, then
+ * "Restore this version" and "Back to current". Esc outside the History
+ * sheet also returns (the sheet handles its own Esc).
+ */
+function PreviewBar({ projectId, page, version, focus, onEnd, }) {
+    const t = useTranslations('spaces.memory');
+    const locale = useLocale();
+    const authorName = useMemoryAuthorName();
+    const { restore, restoring } = useRestoreMemoryVersion(projectId, page, () => onEnd?.());
+    const backRef = useRef(null);
+    useEffect(() => {
+        if (focus)
+            backRef.current?.focus({ preventScroll: true });
+    }, [focus, version.version_id]);
+    useEffect(() => {
+        if (!onEnd)
+            return;
+        const onKey = (event) => {
+            if (event.key !== 'Escape' || event.defaultPrevented || hasOpenFloatingLayer())
+                return;
+            event.preventDefault();
+            onEnd();
+        };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [onEnd]);
+    // Narrow reader: the actions wrap under the text, to the right.
+    return (_jsxs(Alert, { className: "mb-6 flex-wrap", children: [_jsx(AlertMedia, { children: _jsx(ClockCounterClockwiseIcon, { className: "text-kortix-blue", "aria-hidden": true }) }), _jsxs(AlertContent, { className: "basis-40", children: [_jsx(AlertTitle, { children: t('history.viewing', { time: relativeTime(version.created_at, locale) }) }), hasMemoryAuthor(version.author) ? (_jsx(AlertDescription, { children: t('history.viewingBy', { author: authorName(version.author) }) })) : null] }), _jsxs(AlertActions, { className: "ml-auto", children: [_jsx(Button, { ref: backRef, variant: "ghost", size: "sm", onClick: onEnd, children: t('history.backToCurrent') }), page.can_edit ? (_jsx(Button, { variant: "outline", size: "sm", disabled: restoring, "aria-busy": restoring || undefined, onClick: () => restore(version), children: t('history.restore') })) : null] })] }));
+}
+/** 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 function Line({ line, className }) {
+    return (_jsx("div", { className: line, children: _jsx(Skeleton, { className: cn('inline-block rounded-sm py-0 align-middle', className) }) }));
+}
+/** The body's placeholder: three paragraphs at the body's type, line height and gap. */
+function BodySkeleton() {
+    const BODY = 'text-base leading-relaxed';
+    return (_jsxs("div", { "aria-busy": true, className: "flex flex-col gap-4 pt-8", children: [_jsxs("div", { children: [_jsx(Line, { line: BODY, className: "h-3.5 w-full" }), _jsx(Line, { line: BODY, className: "h-3.5 w-1/2" })] }), _jsxs("div", { children: [_jsx(Line, { line: BODY, className: "h-3.5 w-full" }), _jsx(Line, { line: BODY, className: "h-3.5 w-2/3" })] }), _jsx(Line, { line: BODY, className: "h-3.5 w-5/6" })] }));
+}
+/** The body's placeholder after 150 ms: a page that loads faster shows none (no flash). */
+function DelayedBodySkeleton() {
+    const [shown, setShown] = useState(false);
+    useEffect(() => {
+        const timer = setTimeout(() => setShown(true), 150);
+        return () => clearTimeout(timer);
+    }, []);
+    return shown ? _jsx(BodySkeleton, {}) : null;
+}
+/**
+ * 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 function MemoryReaderSkeleton({ className }) {
+    return (_jsx("div", { className: cn('@container/reader min-h-0 flex-1 overflow-hidden', className), children: _jsxs("div", { className: "flex flex-col px-6 py-8 @2xl/reader:px-16 @2xl/reader:py-10", children: [_jsx("div", { className: "mb-4 h-7 @md/memory:hidden" }), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Line, { line: "text-2xl leading-tight", className: "h-5 w-56" }), _jsx(Line, { line: "text-xs leading-snug", className: "h-2.5 w-36" })] }), _jsx(BodySkeleton, {})] }) }));
+}
+/** Under the body: the numbered sources and the related pages. */
+function PageFooter({ projectId, page, onSelectPage, }) {
+    const t = useTranslations('spaces.memory');
+    return (_jsxs(_Fragment, { children: [page.sources.length > 0 ? _jsx(SourceList, { sources: page.sources, projectId: projectId }) : null, page.related.length > 0 ? (_jsxs("div", { className: "flex flex-col gap-2.5 pt-8", children: [_jsx("h3", { className: "text-muted-foreground text-xs leading-snug", children: t('relatedPages') }), _jsx("div", { className: "flex flex-wrap gap-2", children: page.related.map((related) => (_jsx(Button, { variant: "outline", size: "sm", className: "max-w-full px-3.5 text-xs font-normal", onClick: () => onSelectPage(related.page_id), children: _jsx("span", { className: "truncate", children: related.title }) }, related.page_id))) })] })) : null] }));
+}

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

@@ -0,0 +1,21 @@
+/** The open page, in the URL so a page can be linked (the thread's "Saved to memory · View" uses it). */
+export declare const MEMORY_PAGE_PARAM = "page";
+/** Set with `page`: the page opens with its History beside it. */
+export declare const MEMORY_HISTORY_PARAM = "history";
+/** `1`: "Remember this…" opens on arrival (#general's "Get started"); the view then drops it. */
+export declare const MEMORY_REMEMBER_PARAM = "remember";
+export interface MemoryViewProps {
+    projectId: string;
+    /** `company`, or the space id of a channel or DM. */
+    layerKey: string;
+    /** "#marketing", the DM's agent, or "Company": the copy's name for the layer. */
+    place: string;
+}
+/**
+ * A layer's memory: the flat page list
+ * on the left, the open page on the right (its History in a sheet beside
+ * it; its body edited in place). A layer with no pages says what memory is
+ * and offers "Remember this…". The same view serves a channel, a DM and the
+ * Company page.
+ */
+export declare function MemoryView({ projectId, layerKey, place }: MemoryViewProps): import("react").JSX.Element;

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

@@ -0,0 +1,124 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useProjectMemoryLayer, useProjectMemoryPage, useProjectMemoryPages } from '@kortix/sdk/react';
+import { SunDimIcon } from '@phosphor-icons/react';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../../primitives/button.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { Skeleton } from '../../primitives/skeleton.js';
+import { SplitSheet, SplitSheetMain } from '../../primitives/split-sheet.js';
+import { useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
+import { MemoryEmpty } from './memory-empty.js';
+import { MemoryAll, MemoryAllSkeleton } from './memory-all.js';
+import { MemoryHistory } from './memory-history.js';
+import { MemoryPageList, sortMemoryPages } from './memory-page-list.js';
+import { MemoryReader, MemoryReaderSkeleton } from './memory-reader.js';
+import { RememberPopover } from './remember-popover.js';
+/** The open page, in the URL so a page can be linked (the thread's "Saved to memory · View" uses it). */
+export const MEMORY_PAGE_PARAM = 'page';
+/** Set with `page`: the page opens with its History beside it. */
+export const MEMORY_HISTORY_PARAM = 'history';
+/** `1`: "Remember this…" opens on arrival (#general's "Get started"); the view then drops it. */
+export const MEMORY_REMEMBER_PARAM = 'remember';
+/**
+ * A layer's memory: the flat page list
+ * on the left, the open page on the right (its History in a sheet beside
+ * it; its body edited in place). A layer with no pages says what memory is
+ * and offers "Remember this…". The same view serves a channel, a DM and the
+ * Company page.
+ */
+export function MemoryView({ projectId, layerKey, place }) {
+    const t = useTranslations('spaces.memory');
+    const router = useUiRouter();
+    const pathname = useUiPathname();
+    const searchParams = useUiSearchParams();
+    const layer = useProjectMemoryLayer(projectId, layerKey);
+    const list = useProjectMemoryPages(projectId, layerKey);
+    // `?remember=1` opens "Remember this…" once its trigger mounts.
+    const [remembering, setRemembering] = useState(() => searchParams.get(MEMORY_REMEMBER_PARAM) === '1');
+    const [editing, setEditing] = useState(false);
+    // Bumped by the editor's Reload: a fresh form on the newest version. Not the
+    // version itself: a save bumps it too, and a remount would drop the save's
+    // own onSuccess (TanStack skips call-time callbacks of an unmounted caller).
+    const [editorRun, setEditorRun] = useState(0);
+    // History: `versionId` is the version picked in it (null: the current page).
+    // `sheet`: the sheet is open and the reader previews `versionId`.
+    // `preview`: the sheet covered the reader (a narrow container), so Preview
+    //   closed it; the reader shows `versionId` under its preview bar.
+    // `closed`: back to the current page from `preview`; History reopens on `versionId`.
+    // `?history=1` (the thread line's "open History") opens it on arrival.
+    const [history, setHistory] = useState(() => searchParams.get(MEMORY_HISTORY_PARAM) ? { versionId: null, mode: 'sheet' } : null);
+    // A page this view just deleted (or whose creation it undid) leaves the list
+    // at once, until the list refetches (an Undo may bring it back after that).
+    const [gone, setGone] = useState(null);
+    const pages = useMemo(() => {
+        const all = list.data ?? [];
+        return sortMemoryPages(gone && gone.list === list.data ? all.filter((page) => page.page_id !== gone.pageId) : all);
+    }, [list.data, gone]);
+    const requested = searchParams.get(MEMORY_PAGE_PARAM);
+    const explicit = pages.find((page) => page.page_id === requested);
+    // No page in the URL (or one that is gone): the All view.
+    const selected = explicit;
+    const page = useProjectMemoryPage(projectId, selected?.page_id);
+    const setPage = (pageId) => {
+        setEditing(false);
+        if (pageId !== selected?.page_id)
+            setHistory(null);
+        const params = new URLSearchParams(searchParams.toString());
+        if (pageId)
+            params.set(MEMORY_PAGE_PARAM, pageId);
+        else
+            params.delete(MEMORY_PAGE_PARAM);
+        params.delete(MEMORY_HISTORY_PARAM);
+        const query = params.toString();
+        router.replace(query ? `${pathname}?${query}` : pathname, {
+            scroll: false,
+        });
+    };
+    const focusRemember = searchParams.get(MEMORY_REMEMBER_PARAM) === '1';
+    const loaded = !!layer.data && !!list.data;
+    useEffect(() => {
+        if (!focusRemember || !loaded)
+            return;
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete(MEMORY_REMEMBER_PARAM);
+        const query = params.toString();
+        router.replace(query ? `${pathname}?${query}` : pathname, {
+            scroll: false,
+        });
+    }, [focusRemember, loaded, pathname, router, searchParams]);
+    if ((layer.isError && !layer.data) || (list.isError && !list.data)) {
+        return (_jsx("div", { className: "flex min-h-0 flex-1 items-center justify-center px-5 py-16", children: _jsx(ErrorState, { size: "sm", title: t('loadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => {
+                        void layer.refetch();
+                        void list.refetch();
+                    }, children: t('retry') }) }) }));
+    }
+    if (!layer.data || !list.data) {
+        // First load: a ghost of the list and the reader at their real line boxes, so nothing moves when the data lands.
+        return (
+        // Shown after 150 ms: a load faster than that draws no skeleton at all.
+        _jsxs("div", { "aria-busy": true, className: "@container/memory animate-in fade-in-0 fill-mode-backwards flex min-h-0 w-full min-w-0 flex-1 delay-150 motion-reduce:animate-none", children: [_jsxs("div", { className: cn('flex w-72 shrink-0 flex-col border-r px-3.5 pt-5 pb-4 @max-md/memory:w-full', requested && '@max-md/memory:hidden'), children: [_jsxs("div", { className: "mb-1.5 flex h-8 shrink-0 items-center justify-between pr-1 pl-2", children: [_jsx("div", { className: "text-xs", children: _jsx(Skeleton, { className: "inline-block h-2.5 w-12 rounded-sm py-0 align-middle" }) }), _jsx("div", { className: "flex size-6 items-center justify-center", children: _jsx(Skeleton, { className: "size-3.5 rounded-sm py-0" }) })] }), ['w-3/5', 'w-4/5', 'w-1/2', 'w-2/3', 'w-2/5', 'w-3/4'].map((width, index) => (_jsx("div", { className: "flex h-8 shrink-0 items-center px-2 text-sm", children: _jsx(Skeleton, { className: cn('inline-block h-3 rounded-sm py-0', width) }) }, index)))] }), requested ? _jsx(MemoryReaderSkeleton, {}) : _jsx(MemoryAllSkeleton, { className: "@max-md/memory:hidden" })] }));
+    }
+    const canWrite = layer.data.can_write && !layer.data.read_only;
+    const kind = layer.data.scope;
+    const rememberProps = {
+        projectId,
+        layerKey,
+        place,
+        open: remembering,
+        onOpenChange: setRemembering,
+    };
+    if (pages.length === 0) {
+        return (_jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: _jsx(MemoryEmpty, { projectId: projectId, kind: kind, place: place, action: canWrite ? (_jsx(RememberPopover, { ...rememberProps, children: _jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", children: [_jsx(SunDimIcon, { className: "size-3.5 shrink-0" }), t('remember.open')] }) })) : undefined }) }));
+    }
+    return (_jsxs("div", { className: "@container/memory flex min-h-0 w-full min-w-0 flex-1", children: [_jsx(MemoryPageList, { projectId: projectId, layerKey: layerKey, pages: pages, selectedId: selected?.page_id ?? null, onSelect: setPage, 
+                // `?remember=1` (#general's "Get started"): "Remember this…" opens under the header.
+                anchor: canWrite && remembering
+                    ? (header) => (_jsx(RememberPopover, { ...rememberProps, anchor: true, children: header }))
+                    : undefined, className: cn('@max-md/memory:w-full', explicit && '@max-md/memory:hidden') }), selected ? (_jsxs(SplitSheet, { size: "lg", open: history?.mode === 'sheet' && !!page.data, onOpenChange: (open) => !open && setHistory(null), className: cn('min-w-0 flex-1', !explicit && '@max-md/memory:hidden'), children: [_jsx(SplitSheetMain, { className: "flex flex-col", children: _jsx(MemoryReader, { projectId: projectId, summary: selected, page: page.data?.page_id === selected.page_id ? page.data : undefined, pageError: page.isError, pages: pages, editing: editing && !!page.data, editorRun: editorRun, onRetry: () => void page.refetch(), onSelectPage: setPage, onBack: () => setPage(null), onEdit: () => setEditing(true), onHistory: () => setHistory((open) => ({ versionId: open?.versionId ?? null, mode: 'sheet' })), onEditDone: () => setEditing(false), onReload: () => void page.refetch().then(() => setEditorRun((run) => run + 1)), onRemoved: () => {
+                                setGone({ pageId: selected.page_id, list: list.data });
+                                setPage(null);
+                            }, previewId: history && history.mode !== 'closed' ? history.versionId : null, previewFocus: history?.mode === 'preview', onPreviewEnd: () => setHistory((open) => open?.mode === 'preview' ? { ...open, mode: 'closed' } : open && { versionId: null, mode: 'sheet' }) }) }), history?.mode === 'sheet' && page.data ? (_jsx(MemoryHistory, { projectId: projectId, page: page.data, previewId: history.versionId, onPreview: (versionId, covered) => setHistory({ versionId, mode: covered && versionId ? 'preview' : 'sheet' }), onRestored: () => setHistory({ versionId: null, mode: 'sheet' }) })) : null] })) : (_jsx(MemoryAll, { kind: kind, place: place, pages: pages, onSelect: setPage, className: "@max-md/memory:hidden" }))] }));
+}

package/dist/workspace/memory/remember-popover.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+/**
+ * "Remember this…": one sentence for the layer, saved as a page with the
+ * person as its source. Enter saves, Shift+Enter starts a new line. The host
+ * owns `open`, so a link (`?remember=1`, #general's "Get started") can open
+ * it on arrival. `anchor`: `children` is not a trigger, only where it opens.
+ */
+export declare function RememberPopover({ projectId, layerKey, place, open, onOpenChange, anchor, children, }: {
+    projectId: string;
+    layerKey: string;
+    /** "#marketing", the DM's agent, or "Company". */
+    place: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** `children` only places it: the link is the one way to open it. */
+    anchor?: boolean;
+    /** The trigger, or the anchor. */
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/workspace/memory/remember-popover.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ApiError } from '@kortix/sdk';
+import { useAddProjectMemoryNote } from '@kortix/sdk/react';
+import { useId, useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { Button } from '../../primitives/button.js';
+import { Field, FieldDescription } from '../../primitives/field.js';
+import Loading from '../../primitives/loading.js';
+import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '../../primitives/popover.js';
+import { Textarea } from '../../primitives/textarea.js';
+import { successToast } from '../../primitives/toast.js';
+/** The API's cap on a note (`MEMORY_LIMITS.note_chars`). */
+const NOTE_MAX = 1000;
+const FAILURE_BY_CODE = {
+    secret_detected: 'secret',
+    layer_read_only: 'readOnly',
+};
+/**
+ * "Remember this…": one sentence for the layer, saved as a page with the
+ * person as its source. Enter saves, Shift+Enter starts a new line. The host
+ * owns `open`, so a link (`?remember=1`, #general's "Get started") can open
+ * it on arrival. `anchor`: `children` is not a trigger, only where it opens.
+ */
+export function RememberPopover({ projectId, layerKey, place, open, onOpenChange, anchor, children, }) {
+    const t = useTranslations('spaces.memory');
+    const id = useId();
+    const add = useAddProjectMemoryNote(projectId, layerKey);
+    const [text, setText] = useState('');
+    const [failure, setFailure] = useState(null);
+    const save = () => {
+        const note = text.trim();
+        if (!note || add.isPending)
+            return;
+        // `mutateAsync`, not `mutate`'s callbacks: the first note turns the empty
+        // state into the page list, which unmounts this popover, and TanStack drops
+        // the call-time callbacks of an unmounted caller. The popover then stayed
+        // open (an empty copy, under the list's header).
+        add.mutateAsync({ text: note }).then(() => {
+            setText('');
+            onOpenChange(false);
+            successToast(t('rememberThis.saved'));
+        }, (err) => setFailure((err instanceof ApiError && err.code && FAILURE_BY_CODE[err.code]) || 'failed'));
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: (next) => {
+            if (next)
+                setFailure(null);
+            onOpenChange(next);
+        }, children: [anchor ? _jsx(PopoverAnchor, { asChild: true, children: children }) : _jsx(PopoverTrigger, { asChild: true, children: children }), _jsx(PopoverContent, { align: "start", className: "w-96 p-4", children: _jsxs("form", { className: "flex flex-col gap-4", onSubmit: (event) => {
+                        event.preventDefault();
+                        save();
+                    }, children: [_jsxs(Field, { className: "gap-1.5", children: [_jsx(Textarea, { value: text, maxLength: NOTE_MAX, minHeight: 80, maxHeight: 240, autoFocus: true, "aria-label": t('remember.label', { place }), placeholder: t('remember.placeholder', { place }), "aria-invalid": failure ? true : undefined, "aria-describedby": `${id}-hint`, onChange: (event) => {
+                                        setText(event.target.value);
+                                        setFailure(null);
+                                    }, onKeyDown: (event) => {
+                                        if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {
+                                            event.preventDefault();
+                                            save();
+                                        }
+                                    } }), _jsx(FieldDescription, { id: `${id}-hint`, role: failure ? 'alert' : undefined, className: failure ? 'text-destructive' : undefined, children: failure ? t(`remember.status.${failure}`) : t('remember.hint') })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "outline-ghost", size: "sm", onClick: () => onOpenChange(false), children: t('editor.cancel') }), _jsxs(Button, { type: "submit", size: "sm", disabled: !text.trim() || add.isPending, "aria-busy": add.isPending || undefined, children: [add.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, t('remember.send')] })] })] }) })] }));
+}

package/dist/workspace/memory/remember-this.d.ts

@@ -0,0 +1,12 @@
+import { type ProjectSession, type ProjectSpace } from '@kortix/sdk';
+/**
+ * "Remember this" in a thread's hover toolbar: the thread's first prompt,
+ * editable, saved as a note in this channel's (or DM's) memory or the
+ * Company's, with the thread as its source. Only layers the viewer may write
+ * are offered (`can_write`, not `read_only`: an archived channel never is);
+ * with none, there is no button. The button shows a check for 2 s after a save.
+ */
+export declare function RememberThisButton({ session, space }: {
+    session: ProjectSession;
+    space: ProjectSpace;
+}): import("react").JSX.Element | null;

package/dist/workspace/memory/remember-this.js

@@ -0,0 +1,89 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ApiError } from '@kortix/sdk';
+import { useAddProjectMemoryNote, useProjectMemoryLayer } from '@kortix/sdk/react';
+import { SunDimIcon } from '@phosphor-icons/react';
+import { useEffect, useId, useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { SolidCheckIcon } from '../../internal/icons/solid-check-icon.js';
+import { Button } from '../../primitives/button.js';
+import { Field, FieldDescription, FieldGroup, FieldLabel } from '../../primitives/field.js';
+import Hint from '../../primitives/hint.js';
+import Loading from '../../primitives/loading.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../primitives/select.js';
+import { Textarea } from '../../primitives/textarea.js';
+import { agentLabel, threadMessageText } from '../spaces/space-timeline.js';
+/** The API's cap on a note (`MEMORY_LIMITS.note_chars`). */
+const NOTE_MAX = 1000;
+/** How long the button shows its check after a save. */
+const SAVED_MS = 2000;
+const FAILURE_BY_CODE = {
+    secret_detected: 'secret',
+    layer_read_only: 'readOnly',
+};
+/**
+ * "Remember this" in a thread's hover toolbar: the thread's first prompt,
+ * editable, saved as a note in this channel's (or DM's) memory or the
+ * Company's, with the thread as its source. Only layers the viewer may write
+ * are offered (`can_write`, not `read_only`: an archived channel never is);
+ * with none, there is no button. The button shows a check for 2 s after a save.
+ */
+export function RememberThisButton({ session, space }) {
+    const t = useTranslations('spaces.memory');
+    const id = useId();
+    const projectId = session.project_id;
+    const [open, setOpen] = useState(false);
+    const [text, setText] = useState('');
+    const [layer, setLayer] = useState('space');
+    const [failure, setFailure] = useState(null);
+    const [saved, setSaved] = useState(false);
+    // Same reads as the Memory tab and the Company page: shared cache entries.
+    const spaceLayer = useProjectMemoryLayer(projectId, space.space_id).data;
+    const companyLayer = useProjectMemoryLayer(projectId, 'company').data;
+    const writable = (data) => !!data && data.can_write && !data.read_only;
+    const targets = [...(writable(spaceLayer) ? ['space'] : []), ...(writable(companyLayer) ? ['company'] : [])];
+    const toSpace = useAddProjectMemoryNote(projectId, space.space_id);
+    const toCompany = useAddProjectMemoryNote(projectId, 'company');
+    const add = layer === 'company' ? toCompany : toSpace;
+    const place = space.kind === 'channel' ? `#${space.slug}` : t('rememberThis.dm', { agent: agentLabel(space.dm_agent_name ?? '') });
+    const label = saved ? t('rememberThis.saved') : t('rememberThis.label');
+    useEffect(() => {
+        if (!saved)
+            return;
+        const timer = setTimeout(() => setSaved(false), SAVED_MS);
+        return () => clearTimeout(timer);
+    }, [saved]);
+    const openChange = (next) => {
+        if (next) {
+            setText(threadMessageText(session).slice(0, NOTE_MAX));
+            setLayer(targets[0] ?? 'space');
+            setFailure(null);
+        }
+        setOpen(next);
+    };
+    const save = () => {
+        const note = text.trim();
+        if (!note || add.isPending)
+            return;
+        add.mutate({ text: note, source_session_id: session.session_id }, {
+            onSuccess: () => {
+                setOpen(false);
+                setSaved(true);
+            },
+            onError: (err) => setFailure((err instanceof ApiError && err.code && FAILURE_BY_CODE[err.code]) || 'failed'),
+        });
+    };
+    if (targets.length === 0)
+        return null;
+    return (_jsxs(Popover, { open: open, onOpenChange: openChange, children: [_jsx(Hint, { label: label, side: "top", children: _jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": label, children: saved ? _jsx(SolidCheckIcon, { className: "size-3.5 shrink-0" }) : _jsx(SunDimIcon, { className: "size-3.5 shrink-0" }) }) }) }), _jsx(PopoverContent, { align: "end", className: "w-96 p-4", children: _jsxs("form", { className: "flex flex-col gap-4", onSubmit: (event) => {
+                        event.preventDefault();
+                        save();
+                    }, children: [_jsxs(FieldGroup, { className: "gap-4", children: [_jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { htmlFor: `${id}-text`, children: t('rememberThis.label') }), _jsx(Textarea, { id: `${id}-text`, value: text, maxLength: NOTE_MAX, minHeight: 80, maxHeight: 240, autoFocus: true, "aria-invalid": failure ? true : undefined, "aria-describedby": `${id}-hint`, onChange: (event) => {
+                                                setText(event.target.value);
+                                                setFailure(null);
+                                            } }), _jsx(FieldDescription, { id: `${id}-hint`, role: failure ? 'alert' : undefined, className: failure ? 'text-destructive' : undefined, children: failure ? t(`remember.status.${failure}`) : t('remember.hint') })] }), _jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { htmlFor: `${id}-layer`, children: t('rememberThis.saveTo') }), _jsxs(Select, { value: layer, onValueChange: (value) => {
+                                                setLayer(value);
+                                                setFailure(null);
+                                            }, children: [_jsx(SelectTrigger, { id: `${id}-layer`, className: "w-full cursor-pointer text-sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: targets.map((target) => (_jsx(SelectItem, { value: target, className: "cursor-pointer", children: target === 'space' ? place : t('used.company') }, target))) })] })] })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { type: "button", variant: "outline-ghost", size: "sm", onClick: () => setOpen(false), children: t('editor.cancel') }), _jsxs(Button, { type: "submit", size: "sm", disabled: !text.trim() || add.isPending, "aria-busy": add.isPending || undefined, children: [add.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, t('editor.save')] })] })] }) }), _jsx("span", { id: `${id}-saved`, role: "status", "aria-live": "polite", className: "sr-only", children: saved ? t('rememberThis.saved') : '' })] }));
+}

package/dist/workspace/memory/source-mark.d.ts

@@ -0,0 +1,18 @@
+import type { ProjectMemorySource } from '@kortix/sdk';
+/**
+ * The page's numbered sources under its text: "1  Launch plan · thread". A
+ * thread opens beside the page, an outside source opens its URL in a new
+ * tab; the others are text.
+ */
+export declare function SourceList({ sources, projectId }: {
+    sources: readonly ProjectMemorySource[];
+    projectId: string;
+}): import("react").JSX.Element;
+/**
+ * A fact's ⟦n⟧ token: a small superscript number. Hover or focus names the
+ * source; a thread opens, an outside source opens its URL in a new tab.
+ */
+export declare function SourceMark({ source, projectId }: {
+    source: ProjectMemorySource;
+    projectId: string;
+}): import("react").JSX.Element;

package/dist/workspace/memory/source-mark.js

@@ -0,0 +1,79 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { safeHttpUrl } from '../../_vendor/kortix-shared.js';
+import { useTranslations } from '../../i18n/index.js';
+import { uiRoutes } from '../../lib/routes.js';
+import Hint from '../../primitives/hint.js';
+import { UiLink as Link, useUiPathname, useUiSearchParams } from '../../providers/ui-provider.js';
+import { participantLabel } from '../../session/participants/session-participants.js';
+import { superscript } from './body-doc.js';
+/** A source number as superscript digits in the text's colour; the padding widens its hit area without moving the text. */
+const MARK = 'text-foreground hover:text-muted-foreground focus-visible:ring-ring -mx-0.5 -my-1 rounded-sm px-0.5 py-1 outline-none transition-colors duration-fast focus-visible:ring-2';
+/** The API's name for a person without a display name (`apps/api/src/memory/serialize.ts`). */
+const MEMBER_FALLBACK = 'A member';
+/** The hint of a mark that opens nothing: a person, an import, a deleted thread, an outside source without a URL. */
+const STATIC_HINT = { thread: 'threadGone', outside: 'outsideText', person: 'person', import: 'import' };
+/**
+ * Where a source thread opens: its channel or DM with `?thread=`. A thread of
+ * the page the reader is on opens beside it and keeps the other params (the
+ * Memory tab stays open).
+ */
+function useSourceThreadHref(projectId) {
+    const pathname = useUiPathname();
+    const searchParams = useUiSearchParams();
+    return (source) => {
+        const hint = source.thread_href_hint;
+        if (!source.session_id || !hint)
+            return null;
+        const path = hint.space_kind === 'channel' ? uiRoutes().channel(projectId, hint.slug) : uiRoutes().dm(projectId, hint.agent);
+        const here = pathname.endsWith(path);
+        const params = new URLSearchParams(here ? searchParams.toString() : '');
+        params.set('thread', source.session_id);
+        return `${here ? pathname : path}?${params.toString()}`;
+    };
+}
+/** A person source's name: the display name, or the API's neutral "A member" in the reader's language. */
+function useSourceName() {
+    const t = useTranslations('spaces.memory');
+    return (source) => source.kind === 'person'
+        ? source.label === MEMBER_FALLBACK
+            ? t('author.unknown')
+            : participantLabel({ name: source.label, email: null })
+        : source.label;
+}
+/**
+ * The page's numbered sources under its text: "1  Launch plan · thread". A
+ * thread opens beside the page, an outside source opens its URL in a new
+ * tab; the others are text.
+ */
+export function SourceList({ sources, projectId }) {
+    const t = useTranslations('spaces.memory.sourceKind');
+    const threadHref = useSourceThreadHref(projectId);
+    const name = useSourceName();
+    return (_jsx("ol", { className: "flex flex-col gap-2 pt-8", children: sources.map((source) => {
+            const text = `${name(source)} · ${t(source.kind)}`;
+            const href = threadHref(source);
+            const LINE = 'text-muted-foreground min-w-0 text-xs [overflow-wrap:anywhere]';
+            return (_jsxs("li", { className: "flex gap-2", children: [_jsx("span", { className: "text-muted-foreground w-3 shrink-0 text-xs tabular-nums", children: source.number }), href ? (_jsx(Link, { href: href, className: `${LINE} hover:text-foreground transition-colors duration-fast`, children: text })) : source.kind === 'outside' && source.url && safeHttpUrl(source.url) ? (_jsx("a", { href: source.url, target: "_blank", rel: "noopener noreferrer", className: `${LINE} hover:text-foreground transition-colors duration-fast`, children: text })) : (_jsx("span", { className: LINE, children: text }))] }, source.number));
+        }) }));
+}
+/**
+ * A fact's ⟦n⟧ token: a small superscript number. Hover or focus names the
+ * source; a thread opens, an outside source opens its URL in a new tab.
+ */
+export function SourceMark({ source, projectId }) {
+    const t = useTranslations('spaces.memory');
+    const threadHref = useSourceThreadHref(projectId)(source);
+    const text = useSourceName()(source);
+    const number = superscript(source.number);
+    if (threadHref) {
+        const label = source.kind === 'person' ? t('source.person', { label: text }) : t('source.thread', { label: source.label });
+        return (_jsx(Hint, { side: "top", label: label, children: _jsx(Link, { href: threadHref, "aria-label": label, className: MARK, children: number }) }));
+    }
+    if (source.kind === 'outside' && source.url && safeHttpUrl(source.url)) {
+        const label = t('source.outside', { label: source.label });
+        return (_jsx(Hint, { side: "top", label: label, children: _jsx("a", { href: source.url, target: "_blank", rel: "noopener noreferrer", "aria-label": label, className: MARK, children: number }) }));
+    }
+    const label = t(`source.${STATIC_HINT[source.kind]}`, { label: text });
+    return (_jsx(Hint, { side: "top", label: label, children: _jsx("span", { tabIndex: 0, "aria-label": label, className: MARK, children: number }) }));
+}

package/dist/workspace/memory/used-memory-chip.d.ts

@@ -0,0 +1,14 @@
+/**
+ * "Used #marketing memory · 3 pages ›" under a thread's first prompt: the
+ * pages its agent was given at the first turn. It reads the record only once
+ * `ready` (a turn has finished): before that the record is empty, and nothing
+ * polls it. A turn that ends while the record is still empty reads it again.
+ * Hidden when the thread loaded no page.
+ */
+export declare function UsedMemoryChip({ projectId, sessionId, ready, className, }: {
+    projectId: string;
+    sessionId: string;
+    /** A turn of the thread has finished. */
+    ready: boolean;
+    className?: string;
+}): import("react").JSX.Element | null;