@kortix/ui 0.14.8 → 0.14.9

package/dist/workspace/sidebar/session-group-sections.js

@@ -0,0 +1,267 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Session groups in the sidebar (`session_groups` flag): the project's shared,
+ * named folders of sessions, between Pinned and the rest of the list.
+ *
+ * Each group is a section. Its rows load when it is open (one paged list per
+ * group, any starter, any depth), and its open state is the viewer's own,
+ * beside the other sections in the session-filter store. A session moves into
+ * a group from its `⋯` menu or by dragging its row onto the group; a group
+ * moves by dragging its header onto another group, or with Move up / Move
+ * down. Dragging a row onto the rest of the list takes it out of its group.
+ */
+import { ApiError } from '@kortix/sdk';
+import { findCachedProjectSession, useCreateProjectSessionGroup, useDeleteProjectSessionGroup, useProjectSessions, useRenameProjectSessionGroup, useReorderProjectSessionGroups, useSetProjectSessionGroup, } from '@kortix/sdk/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { ArrowDownIcon, ArrowUpIcon, CaretRightIcon, DotsThreeIcon, FolderSimpleIcon, PencilSimpleIcon, TrashIcon, } from '@phosphor-icons/react';
+import { useMemo, useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../../internal/lib/utils.js';
+import { Button } from '../../primitives/button.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { Disclosure, DisclosureContent, DisclosureTrigger } from '../../primitives/disclosure.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from '../../primitives/dropdown-menu.js';
+import { Input } from '../../primitives/input.js';
+import Loading from '../../primitives/loading.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, } from '../../primitives/modal.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { moveGroupBy, moveGroupTo } from './session-group-order.js';
+import { SESSION_MENU_TRIGGER_CLASS, SESSION_ROW_HEIGHT_CLASS, SIDEBAR_PAGE_SIZE, ShowMoreButton, } from './session-list-chrome.js';
+/** A dragged session row carries its id under this type. */
+const SESSION_DRAG_TYPE = 'application/x-kortix-session';
+/** A dragged group header carries its id under this type. */
+const GROUP_DRAG_TYPE = 'application/x-kortix-session-group';
+/** Mirrors `SESSION_GROUP_NAME_MAX` in `@kortix/api-contract`: the server refuses a longer name. */
+const GROUP_NAME_MAX = 80;
+/**
+ * The group header being dragged in this window, if any. `dataTransfer` data is
+ * unreadable during `dragover`, and the drop line needs to know whether the
+ * dragged group lands above or below the one under the pointer.
+ */
+let draggingGroupId = null;
+/** Keeps a click or key inside a group's menu or dialog (portals bubble through React) off the header's toggle. */
+const stopAtMenu = (event) => event.stopPropagation();
+/** The collapsed-sections id of one group. */
+export function sessionGroupSectionId(groupId) {
+    return `group:${groupId}`;
+}
+/** `onDragStart` of a session row: the row's link drag also carries the session id. */
+export function startSessionDrag(event, sessionId) {
+    event.dataTransfer.setData(SESSION_DRAG_TYPE, sessionId);
+    // A link drag allows only copy and link by default; a drop here is a move.
+    event.dataTransfer.effectAllowed = 'all';
+}
+function dragCarries(event, type) {
+    return Array.from(event.dataTransfer.types).includes(type);
+}
+/**
+ * A drop target for dragged session rows (and, with `onDropGroup`, dragged
+ * group headers). `over` is what is over it right now, for the highlight.
+ */
+function useDropTarget(handlers) {
+    const [over, setOver] = useState(null);
+    const kindOf = (event) => handlers.onDropSession && dragCarries(event, SESSION_DRAG_TYPE)
+        ? 'session'
+        : handlers.onDropGroup && dragCarries(event, GROUP_DRAG_TYPE)
+            ? 'group'
+            : null;
+    const props = {
+        onDragOver: (event) => {
+            const kind = kindOf(event);
+            if (!kind)
+                return;
+            event.preventDefault();
+            event.dataTransfer.dropEffect = 'move';
+            if (over !== kind)
+                setOver(kind);
+        },
+        onDragLeave: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setOver(null);
+        },
+        onDrop: (event) => {
+            const kind = kindOf(event);
+            setOver(null);
+            if (!kind)
+                return;
+            event.preventDefault();
+            if (kind === 'session')
+                handlers.onDropSession?.(event.dataTransfer.getData(SESSION_DRAG_TYPE));
+            else
+                handlers.onDropGroup?.(event.dataTransfer.getData(GROUP_DRAG_TYPE));
+        },
+    };
+    return { over, props };
+}
+/** Filing and reordering, with their result toasts. One instance per list. */
+export function useSessionGroupActions(projectId, groups) {
+    const t = useTranslations('sidebar.sessionGroups');
+    const queryClient = useQueryClient();
+    const { mutateAsync: file } = useSetProjectSessionGroup(projectId);
+    const { mutateAsync: reorder } = useReorderProjectSessionGroups(projectId);
+    return useMemo(() => {
+        const nameOf = (groupId) => groupId ? (groups.find((group) => group.group_id === groupId)?.name ?? '') : t('noGroup');
+        return {
+            /** `toast`: a menu move reports where the row went; a drop shows it in place. */
+            move: async (sessionId, groupId, options) => {
+                // A drop on the row's own group (or of an ungrouped row on the list) changes nothing.
+                const cached = findCachedProjectSession(queryClient, projectId, (session) => session.session_id === sessionId);
+                if (cached && (cached.group_id ?? null) === groupId)
+                    return;
+                try {
+                    await file({ sessionId, groupId });
+                    if (options?.toast)
+                        successToast(t('moved'), { description: nameOf(groupId) });
+                }
+                catch {
+                    errorToast(t('moveFailed'));
+                }
+            },
+            reorder: async (groupIds) => {
+                if (!groupIds)
+                    return;
+                try {
+                    await reorder(groupIds);
+                }
+                catch {
+                    errorToast(t('reorderFailed'));
+                }
+            },
+        };
+    }, [file, reorder, groups, t, queryClient, projectId]);
+}
+/**
+ * Create a group (`group` null) or rename one. A taken name and the group
+ * limit show in the dialog; the dialog closes with a toast once the list holds
+ * the change. `onCreated` receives the new group (a row's "New group…" files
+ * its session into it).
+ */
+export function SessionGroupNameModal({ projectId, group, open, onOpenChange, onCreated, }) {
+    const t = useTranslations('sidebar.sessionGroups');
+    const create = useCreateProjectSessionGroup(projectId);
+    const rename = useRenameProjectSessionGroup(projectId);
+    const [value, setValue] = useState('');
+    const [problem, setProblem] = useState(null);
+    const [syncedFor, setSyncedFor] = useState([open, group?.group_id ?? null]);
+    if (syncedFor[0] !== open || syncedFor[1] !== (group?.group_id ?? null)) {
+        setSyncedFor([open, group?.group_id ?? null]);
+        if (open) {
+            setValue(group?.name ?? '');
+            setProblem(null);
+        }
+    }
+    const pending = create.isPending || rename.isPending;
+    const name = value.trim();
+    const unchanged = group !== null && name === group.name;
+    const submit = async () => {
+        if (!name || unchanged || pending)
+            return;
+        setProblem(null);
+        try {
+            if (group) {
+                await rename.mutateAsync({ groupId: group.group_id, name });
+                successToast(t('renamed'));
+            }
+            else {
+                const created = await create.mutateAsync({ name });
+                successToast(t('created'));
+                onCreated?.(created);
+            }
+            onOpenChange(false);
+        }
+        catch (error) {
+            const code = error instanceof ApiError ? error.code : undefined;
+            setProblem(code === 'group_name_taken'
+                ? t('nameTaken')
+                : code === 'group_limit'
+                    ? t('limit')
+                    : t(group ? 'renameFailed' : 'createFailed'));
+        }
+    };
+    return (_jsx(Modal, { open: open, onOpenChange: (next) => !pending && onOpenChange(next), children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: group ? t('rename') : t('createTitle') }), group ? null : _jsx(ModalDescription, { children: t('createDescription') })] }), _jsxs(ModalBody, { className: "space-y-2", children: [_jsx(Input, { autoFocus: true, value: value, maxLength: GROUP_NAME_MAX, placeholder: t('namePlaceholder'), "aria-label": t('namePlaceholder'), "aria-invalid": problem ? true : undefined, onChange: (event) => {
+                                setValue(event.target.value);
+                                setProblem(null);
+                            }, onKeyDown: (event) => {
+                                if (event.nativeEvent.isComposing)
+                                    return;
+                                if (event.key === 'Enter') {
+                                    event.preventDefault();
+                                    void submit();
+                                }
+                            } }), problem ? (_jsx("p", { className: "text-destructive text-xs", role: "alert", children: problem })) : null] }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { variant: "outline-ghost", size: "sm", className: "w-full sm:w-auto", onClick: () => onOpenChange(false), disabled: pending, children: t('cancel') }), _jsxs(Button, { size: "sm", className: "w-full sm:w-auto", onClick: () => void submit(), disabled: !name || unchanged || pending, children: [pending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, group ? t('save') : t('create')] })] })] }) }));
+}
+/** Every group of the project, in order. */
+export function SessionGroupSections({ groups, ...rest }) {
+    const groupIds = groups.map((group) => group.group_id);
+    return (_jsx(_Fragment, { children: groups.map((group) => (_jsx(SessionGroupSection, { group: group, groupIds: groupIds, ...rest }, group.group_id))) }));
+}
+function SessionGroupSection({ projectId, group, groupIds, labels, collapsedSectionIds, onToggleSection, passesFacets, renderNode, actions, onRename, }) {
+    const t = useTranslations('sidebar');
+    const tGroups = useTranslations('sidebar.sessionGroups');
+    const sectionId = sessionGroupSectionId(group.group_id);
+    const open = !collapsedSectionIds.has(sectionId);
+    // Any starter and any depth, like Pinned: a session is in a group because
+    // someone put it there. Loaded only while the group is open.
+    const query = useProjectSessions(projectId, {
+        group: group.group_id,
+        labels,
+        limit: SIDEBAR_PAGE_SIZE,
+        enabled: open,
+        // No focus refetch: a new session never starts inside a group, and a
+        // project with dozens of open groups would refetch every one of them.
+        refetchOnWindowFocus: false,
+    });
+    // A pinned row shows under Pinned only. The `group_id` check drops a row the
+    // viewer just moved out, before the refetch lands.
+    const rows = query.sessions.filter((session) => session.group_id === group.group_id && !session.pinned_at && passesFacets(session));
+    const index = groupIds.indexOf(group.group_id);
+    const drop = useDropTarget({
+        onDropSession: (sessionId) => void actions.move(sessionId, group.group_id),
+        onDropGroup: (groupId) => void actions.reorder(moveGroupTo(groupIds, groupId, index)),
+    });
+    return (_jsx("div", { ...drop.props, "data-session-group": group.group_id, children: _jsxs(Disclosure, { open: open, onOpenChange: () => onToggleSection(sectionId), className: "group/section space-y-1", transition: { duration: 0.15, ease: 'easeOut' }, children: [_jsx(DisclosureTrigger, { children: _jsxs("div", { draggable: true, onDragStart: (event) => {
+                            event.dataTransfer.setData(GROUP_DRAG_TYPE, group.group_id);
+                            event.dataTransfer.effectAllowed = 'move';
+                            draggingGroupId = group.group_id;
+                        }, onDragEnd: () => {
+                            draggingGroupId = null;
+                        }, className: cn('group/section-header text-muted-foreground relative flex items-center gap-1 rounded-md px-2 text-sm font-medium', SESSION_ROW_HEIGHT_CLASS, drop.over === 'session' && 'bg-sidebar-row text-sidebar-foreground', 
+                        // A group dropped here takes this place: a line marks the side it
+                        // lands on (below this group when it comes from above).
+                        drop.over === 'group' &&
+                            'before:bg-foreground/40 before:absolute before:inset-x-2 before:h-0.5 before:rounded-full', drop.over === 'group' &&
+                            (groupIds.indexOf(draggingGroupId ?? '') < index ? 'before:bottom-0' : 'before:top-0')), children: [_jsx(FolderSimpleIcon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: group.name }), _jsx(CaretRightIcon, { "aria-hidden": true, className: "duration-normal size-3 shrink-0 opacity-0 transition-transform ease-out group-hover/section-header:opacity-100 group-data-[state=open]/section:rotate-90" }), _jsx(SessionGroupMenu, { group: group, onRename: () => onRename(group), onMoveUp: moveGroupBy(groupIds, group.group_id, -1), onMoveDown: moveGroupBy(groupIds, group.group_id, 1), onReorder: (ids) => void actions.reorder(ids), projectId: projectId })] }) }), _jsxs(DisclosureContent, { contentClassName: "space-y-px", children: [rows.map(renderNode), query.data !== undefined && rows.length === 0 && !query.hasNextPage ? (_jsx("p", { className: "text-muted-foreground px-2 py-1 text-xs", children: tGroups('empty') })) : null, query.hasNextPage && (_jsx(ShowMoreButton, { loading: query.isFetchingNextPage, failed: query.isFetchNextPageError, label: t('loadMore'), onClick: () => query.fetchNextPage() }))] })] }) }));
+}
+/**
+ * The group header's `⋯`: Rename, Move up, Move down, Delete. Hover-revealed
+ * like a section header's; click and Enter/Space stop propagation so opening
+ * it never toggles the group.
+ */
+function SessionGroupMenu({ projectId, group, onRename, onMoveUp, onMoveDown, onReorder, }) {
+    const tGroups = useTranslations('sidebar.sessionGroups');
+    const [menuOpen, setMenuOpen] = useState(false);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const remove = useDeleteProjectSessionGroup(projectId);
+    const afterClose = (fn) => {
+        setMenuOpen(false);
+        requestAnimationFrame(fn);
+    };
+    return (
+    // `contents`: the trigger stays a flex item of the header (`ml-auto`).
+    _jsxs("span", { className: "contents", onClick: stopAtMenu, onKeyDown: stopAtMenu, children: [_jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon-xs", type: "button", "aria-label": `${tGroups('groupOptions')}: ${group.name}`, className: cn(SESSION_MENU_TRIGGER_CLASS, 'relative ml-auto opacity-0', 'before:absolute before:-inset-1', 'group-hover/section-header:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100'), children: _jsx(DotsThreeIcon, { className: "size-4" }) }) }), _jsxs(DropdownMenuContent, { align: "start", side: "right", className: "w-44", children: [_jsxs(DropdownMenuItem, { className: "cursor-pointer", onSelect: () => afterClose(onRename), children: [_jsx(PencilSimpleIcon, {}), tGroups('rename')] }), _jsxs(DropdownMenuItem, { className: "cursor-pointer", disabled: !onMoveUp, onSelect: () => onMoveUp && onReorder(onMoveUp), children: [_jsx(ArrowUpIcon, {}), tGroups('moveUp')] }), _jsxs(DropdownMenuItem, { className: "cursor-pointer", disabled: !onMoveDown, onSelect: () => onMoveDown && onReorder(onMoveDown), children: [_jsx(ArrowDownIcon, {}), tGroups('moveDown')] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { className: "cursor-pointer", variant: "destructive", onSelect: () => afterClose(() => setConfirmOpen(true)), children: [_jsx(TrashIcon, {}), tGroups('delete')] })] })] }), _jsx(ConfirmDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, title: tGroups('deleteTitle'), description: tGroups('deleteDescription', { name: group.name }), confirmLabel: tGroups('delete'), cancelLabel: tGroups('cancel'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => remove.mutate(group.group_id, {
+                    onSuccess: () => {
+                        setConfirmOpen(false);
+                        successToast(tGroups('deleted'));
+                    },
+                    onError: () => errorToast(tGroups('deleteFailed')),
+                }) })] }));
+}
+/**
+ * The rest of the list as a drop target: a session row dropped here leaves
+ * its group. Highlights only while a row is over it.
+ */
+export function UngroupDropArea({ onDropSession, children, }) {
+    const drop = useDropTarget({ onDropSession });
+    return (_jsx("div", { ...drop.props, className: cn('space-y-px rounded-md', drop.over === 'session' && 'bg-sidebar-row/50'), children: children }));
+}

package/dist/workspace/sidebar/session-list-chrome.d.ts

@@ -0,0 +1,28 @@
+/** The one `⋯` box. All three menus in the session list — the `Sessions` header, every
+ *  section header, and every session row — render `Button variant="ghost"
+ *  size="icon-xs"` with THIS class, so the glyph sits on a single vertical
+ *  axis at every level of the tree.
+ *
+ *  The geometry, given every row is `px-2` inside the same column: the trigger
+ *  is flush to the right edge of that padded box, so its 24px square spans
+ *  `[W-32, W-8]` and the 16px glyph inside spans `[W-28, W-12]` — identical for
+ *  all three, at any sidebar width.
+ *
+ *  Do NOT rebuild this from `SidebarMenuButton`. That primitive's base carries
+ *  `p-2 w-full h-8 gap-2 overflow-hidden`; `size-6` only beats `w-full`/`h-8`
+ *  through tailwind-merge, and `p-2` survives outright — leaving a 16px icon
+ *  overflowing an 8px content box, centered by coincidence rather than by
+ *  layout, with a different hover fill than the other two. */
+export declare const SESSION_MENU_TRIGGER_CLASS: string;
+/** Every row that can carry a `⋯` is this tall, so the trigger's 24px square is
+ *  centered in an identical 32px line at all three levels. */
+export declare const SESSION_ROW_HEIGHT_CLASS = "h-8";
+/** Rows per page of an expanded parent, and per page of the Shared,
+ *  Automated and group sections. */
+export declare const SIDEBAR_PAGE_SIZE = 20;
+export declare function ShowMoreButton({ loading, failed, label, onClick, }: {
+    loading: boolean;
+    failed: boolean;
+    label: string;
+    onClick: () => void;
+}): import("react").JSX.Element;

package/dist/workspace/sidebar/session-list-chrome.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+// Chrome shared by the session list (`project-session-list.tsx`) and its group
+// sections (`session-group-sections.tsx`): one `⋯` box, one row height, one
+// page size, one Load more.
+import { useTranslations } from '../../i18n/index.js';
+import { cn } from '../../internal/lib/utils.js';
+import { Button } from '../../primitives/button.js';
+/** The one `⋯` box. All three menus in the session list — the `Sessions` header, every
+ *  section header, and every session row — render `Button variant="ghost"
+ *  size="icon-xs"` with THIS class, so the glyph sits on a single vertical
+ *  axis at every level of the tree.
+ *
+ *  The geometry, given every row is `px-2` inside the same column: the trigger
+ *  is flush to the right edge of that padded box, so its 24px square spans
+ *  `[W-32, W-8]` and the 16px glyph inside spans `[W-28, W-12]` — identical for
+ *  all three, at any sidebar width.
+ *
+ *  Do NOT rebuild this from `SidebarMenuButton`. That primitive's base carries
+ *  `p-2 w-full h-8 gap-2 overflow-hidden`; `size-6` only beats `w-full`/`h-8`
+ *  through tailwind-merge, and `p-2` survives outright — leaving a 16px icon
+ *  overflowing an 8px content box, centered by coincidence rather than by
+ *  layout, with a different hover fill than the other two. */
+export const SESSION_MENU_TRIGGER_CLASS = cn('text-muted-foreground shrink-0 transition-none', 
+// An OPAQUE hover fill, and the reason it has to be opaque:
+//
+// `variant="ghost"` hovers to `bg-foreground/10`. `background-color` is one
+// property, so on the row trigger that 10% tint did not sit on top of the
+// `bg-(--session-row-surface)` mask — it REPLACED it. The mask exists to hide
+// the truncated session title running underneath the glyph, so hovering
+// punched a translucent hole in it and the title bled through: the washed-out
+// grey square in the bug report, with a muted `⋯` floating in it.
+//
+// `sidebar-row-control` is one opaque step above the row's own fill
+// (`--sidebar-row`) on hover, in both themes. The square reads as lifted, stays a solid
+// mask, and needs no pseudo-element to stack a tint above a fill.
+'hover:bg-sidebar-row-control data-[state=open]:bg-sidebar-row-control', 
+// Full contrast once the pointer is on it — the glyph is a control now, not a
+// marker.
+'hover:text-foreground data-[state=open]:text-foreground');
+/** Every row that can carry a `⋯` is this tall, so the trigger's 24px square is
+ *  centered in an identical 32px line at all three levels. */
+export const SESSION_ROW_HEIGHT_CLASS = 'h-8';
+/** Rows per page of an expanded parent, and per page of the Shared,
+ *  Automated and group sections. */
+export const SIDEBAR_PAGE_SIZE = 20;
+export function ShowMoreButton({ loading, failed, label, onClick, }) {
+    const t = useTranslations('sidebar');
+    return (_jsx(Button, { variant: "ghost", size: "sm", className: "text-muted-foreground hover:text-foreground h-8 w-full justify-start px-2 text-xs", disabled: loading, onClick: onClick, children: loading ? t('loadingMore') : failed ? t('retry') : label }));
+}

package/dist/workspace/spaces/channel-glyph.d.ts

@@ -0,0 +1,5 @@
+import { type IconProps } from '@phosphor-icons/react';
+/** A channel's leading glyph: `#` for a public channel, a lock for a private one (only its members see it). */
+export declare function ChannelGlyph({ visibility, ...props }: IconProps & {
+    visibility?: 'public' | 'private';
+}): import("react").JSX.Element;

package/dist/workspace/spaces/channel-glyph.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HashIcon, LockSimpleIcon } from '@phosphor-icons/react';
+/** A channel's leading glyph: `#` for a public channel, a lock for a private one (only its members see it). */
+export function ChannelGlyph({ visibility, ...props }) {
+    return visibility === 'private' ? _jsx(LockSimpleIcon, { ...props }) : _jsx(HashIcon, { ...props });
+}

package/dist/workspace/spaces/channel-setup.d.ts

@@ -0,0 +1,16 @@
+import type { ProjectSpace } from '@kortix/sdk';
+/**
+ * A channel's one setup block, top of its Chat: only the steps the viewer can
+ * take, each checked off from real state. Add agents (creator or manager): the
+ * channel has an agent. Invite members (whoever may add people or invite to the
+ * project): the channel has a second person. Remember something: the channel's
+ * memory has a page. `#general` adds Create a channel. It hides when every step
+ * is done or the viewer dismisses it: in `#general` through the server's
+ * `get_started.dismissed` mark, elsewhere per channel in this browser.
+ */
+export declare function ChannelSetup({ projectId, space, onOpenMembers, }: {
+    projectId: string;
+    space: ProjectSpace;
+    /** For a viewer who may add no one: the Members tab. */
+    onOpenMembers: () => void;
+}): import("react").JSX.Element;

package/dist/workspace/spaces/channel-setup.js

@@ -0,0 +1,105 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useChannelsOnboarding, useMarkChannelsOnboarding, useProjectMemoryLayer, useProjectSpaceMembers, } from '@kortix/sdk/react';
+import { CircleIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { Close } from '../../icons/close.js';
+import { SolidCheckIcon } from '../../internal/icons/solid-check-icon.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../../primitives/button.js';
+import Hint from '../../primitives/hint.js';
+import { useUiPathname, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
+import { MEMORY_REMEMBER_PARAM } from '../memory/memory-view.js';
+import { CreateChannelDialog } from './create-channel-dialog.js';
+import { AddChannelMembersDialog, useInviteToProject, useProjectPeople } from './space-members.js';
+const dismissKey = (spaceId) => `kortix:channel-setup-dismissed:${spaceId}`;
+function readDismissed(spaceId) {
+    try {
+        return window.localStorage.getItem(dismissKey(spaceId)) === '1';
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * A channel's one setup block, top of its Chat: only the steps the viewer can
+ * take, each checked off from real state. Add agents (creator or manager): the
+ * channel has an agent. Invite members (whoever may add people or invite to the
+ * project): the channel has a second person. Remember something: the channel's
+ * memory has a page. `#general` adds Create a channel. It hides when every step
+ * is done or the viewer dismisses it: in `#general` through the server's
+ * `get_started.dismissed` mark, elsewhere per channel in this browser.
+ */
+export function ChannelSetup({ projectId, space, onOpenMembers, }) {
+    const t = useTranslations('spaces.view.setup');
+    const tStart = useTranslations('spaces.onboarding.getStarted');
+    const router = useUiRouter();
+    const pathname = useUiPathname();
+    const searchParams = useUiSearchParams();
+    const general = space.is_default === true;
+    const members = useProjectSpaceMembers(projectId, space.space_id);
+    const people = useProjectPeople(projectId, general ? undefined : space);
+    const layer = useProjectMemoryLayer(projectId, space.space_id);
+    const onboarding = useChannelsOnboarding(projectId, { enabled: general });
+    const mark = useMarkChannelsOnboarding(projectId);
+    const invite = useInviteToProject(projectId);
+    const [dismissed, setDismissed] = useState(() => (general ? false : readDismissed(space.space_id)));
+    const [picking, setPicking] = useState(false);
+    const [creating, setCreating] = useState(false);
+    const canAdd = members.data?.can_add === true;
+    const editable = space.can_edit !== false;
+    const place = `#${space.slug ?? space.name}`;
+    const openRemember = () => {
+        const params = new URLSearchParams(searchParams.toString());
+        params.delete('thread');
+        params.set('tab', 'memory');
+        params.set(MEMORY_REMEMBER_PARAM, '1');
+        router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    };
+    // People not in the channel yet are picked; with nobody left (and always in #general), invite by email.
+    const openInvite = () => {
+        if (!general && canAdd && people.available.length > 0)
+            setPicking(true);
+        else if (invite.canInvite)
+            invite.invite();
+        else
+            onOpenMembers();
+    };
+    const state = onboarding.data?.get_started;
+    const loading = members.isLoading || layer.isLoading || (general && onboarding.isLoading);
+    const steps = [];
+    if (editable) {
+        steps.push({ key: 'agents', label: t('addAgents'), hint: t('addAgentsHint'), done: (space.agents?.length ?? 0) > 0, onClick: () => setPicking(true) });
+    }
+    if (general ? invite.canInvite : canAdd || invite.canInvite) {
+        steps.push({ key: 'invite', label: t('invite'), hint: t('inviteHint'), done: (members.data?.members.length ?? 0) > 1, onClick: openInvite });
+    }
+    // Memory off (no layer) or read-only: no step.
+    if (layer.data && layer.data.can_write !== false) {
+        const pages = Object.values(layer.data.counts).reduce((sum, count) => sum + count, 0);
+        steps.push({ key: 'remember', label: t('remember'), hint: t('rememberHint'), done: pages > 0 || state?.remember === true, onClick: openRemember });
+    }
+    if (general && state) {
+        steps.push({ key: 'channel', label: tStart('channel'), done: state.create_channel, onClick: () => setCreating(true) });
+    }
+    const hidden = loading || dismissed || (general && state?.visible === false) || steps.every((step) => step.done);
+    const dismiss = () => {
+        setDismissed(true);
+        if (general) {
+            mark.mutate('get_started.dismissed');
+            return;
+        }
+        try {
+            window.localStorage.setItem(dismissKey(space.space_id), '1');
+        }
+        catch {
+            // Storage blocked: dismissed for this visit only.
+        }
+    };
+    return (_jsxs(_Fragment, { children: [hidden ? null : (_jsx("section", { "aria-label": t('label', { name: place }), className: "shrink-0 px-5 pt-4", children: _jsxs("div", { className: "bg-popover max-w-xl rounded-md border", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 py-1.5 pr-1.5 pl-4", children: [_jsx("h2", { className: "truncate text-sm font-medium", children: t('label', { name: place }) }), _jsx(Hint, { label: tStart('dismiss'), side: "bottom", children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": tStart('dismiss'), className: "text-muted-foreground", onClick: dismiss, children: _jsx(Close, { className: "size-4" }) }) })] }), _jsx("ul", { className: "flex flex-col px-1.5 pb-1.5", children: steps.map((step) => (_jsx("li", { children: _jsx(StepButton, { step: step, doneLabel: tStart('done') }) }, step.key))) })] }) })), editable || canAdd ? _jsx(AddChannelMembersDialog, { projectId: projectId, space: space, open: picking, onOpenChange: setPicking }) : null, general ? _jsx(CreateChannelDialog, { projectId: projectId, open: creating, onOpenChange: setCreating }) : null, invite.dialog] }));
+}
+/** One step: a done check (or an open circle), the step and its hint; the whole row is its action. */
+function StepButton({ step, doneLabel }) {
+    return (_jsxs("button", { type: "button", onClick: step.onClick, className: cn('hover:bg-hover focus-visible:ring-ring flex h-8 w-full items-center gap-2.5 rounded-sm px-2.5 text-left text-sm transition-colors duration-(--duration-fast) outline-none focus-visible:ring-2', step.done ? 'text-muted-foreground' : 'text-foreground'), children: [step.done ? (_jsx(SolidCheckIcon, { "aria-hidden": true, className: "text-kortix-green size-4 shrink-0" })) : (_jsx(CircleIcon, { "aria-hidden": true, className: "text-muted-foreground size-4 shrink-0" })), _jsx("span", { className: "shrink-0", children: step.label }), step.hint ? _jsx("span", { className: "text-muted-foreground min-w-0 flex-1 truncate text-xs", children: step.hint }) : _jsx("span", { className: "flex-1" }), step.done ? _jsx("span", { className: "sr-only", children: doneLabel }) : null] }));
+}

package/dist/workspace/spaces/channels-onboarding.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The member intro, once per member and project: the first channel or DM page
+ * after Channels was turned on. Any close ("Got it", Escape, outside) records
+ * `channels_intro`, so it never comes back. Turning Channels on again records
+ * it for every member, so a second switch shows nothing.
+ */
+export declare function ChannelsIntro({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element;
+/** The top of `#general`'s Chat: the "turned on again" line while the server reports one. */
+export declare function GeneralChatHead({ projectId }: {
+    projectId: string;
+}): import("react").JSX.Element | null;

package/dist/workspace/spaces/channels-onboarding.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useChannelsOnboarding, useMarkChannelsOnboarding, useProjectSpaceGeneralNotice } from '@kortix/sdk/react';
+import { ChatCircleIcon, HashIcon, SunDimIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { Button } from '../../primitives/button.js';
+import { Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle } from '../../primitives/modal.js';
+/**
+ * The member intro, once per member and project: the first channel or DM page
+ * after Channels was turned on. Any close ("Got it", Escape, outside) records
+ * `channels_intro`, so it never comes back. Turning Channels on again records
+ * it for every member, so a second switch shows nothing.
+ */
+export function ChannelsIntro({ projectId }) {
+    const t = useTranslations('spaces.onboarding.intro');
+    const onboarding = useChannelsOnboarding(projectId);
+    const mark = useMarkChannelsOnboarding(projectId);
+    const [closed, setClosed] = useState(false);
+    const open = !closed && onboarding.data?.intro_seen === false;
+    const close = () => {
+        setClosed(true);
+        mark.mutate('channels_intro');
+    };
+    const lines = [
+        { icon: HashIcon, text: t('channels') },
+        { icon: ChatCircleIcon, text: t('threads') },
+        { icon: SunDimIcon, text: t('memory') },
+    ];
+    return (_jsx(Modal, { open: open, onOpenChange: (next) => !next && close(), children: _jsxs(ModalContent, { className: "lg:max-w-md", children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('title') }), _jsx(ModalDescription, { className: "sr-only", children: t('title') })] }), _jsx(ModalBody, { children: _jsx("ul", { className: "flex flex-col gap-3", children: lines.map(({ icon: Glyph, text }) => (_jsxs("li", { className: "flex items-start gap-3 text-sm", children: [_jsx(Glyph, { "aria-hidden": true, className: "text-muted-foreground mt-0.5 size-4 shrink-0" }), _jsx("span", { children: text })] }, text))) }) }), _jsx(ModalFooter, { children: _jsx(Button, { autoFocus: true, onClick: close, children: t('gotIt') }) })] }) }));
+}
+/** The top of `#general`'s Chat: the "turned on again" line while the server reports one. */
+export function GeneralChatHead({ projectId }) {
+    const t = useTranslations('spaces.onboarding');
+    const notice = useProjectSpaceGeneralNotice(projectId);
+    return notice.data ? _jsx("p", { className: "text-muted-foreground shrink-0 px-5 pt-3 text-xs", children: t('reenabled') }) : null;
+}

package/dist/workspace/spaces/create-channel-dialog.d.ts

@@ -0,0 +1,16 @@
+import { type ProjectSpace } from '@kortix/sdk';
+/**
+ * "Create a channel": a name with a live `#slug` preview, an optional
+ * description and "Private" (only the people added to it see it), shown
+ * only where the spaces list says `private_channels_available`. Every error stays in the dialog (the SDK call does not toast).
+ * On success the dialog closes and the new channel opens.
+ *
+ * With `space` it renames that channel instead: the same fields, filled in,
+ * and the page follows the new slug.
+ */
+export declare function CreateChannelDialog({ projectId, open, onOpenChange, space, }: {
+    projectId: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    space?: ProjectSpace;
+}): import("react").JSX.Element;