@kortix/ui 0.14.8 → 0.14.9

package/dist/workspace/spaces/space-links.js

@@ -0,0 +1,230 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ApiError } from '@kortix/sdk';
+import { safeHttpUrl } from '../../_vendor/kortix-shared.js';
+import { useAddProjectSpaceLink, usePinProjectSpaceLink, useProjectSpaceLinks, useRemoveProjectSpaceLink, } from '@kortix/sdk/react';
+import { ChatTeardropTextIcon, LinkSimpleIcon, MagnifyingGlassIcon, PlusIcon, PushPinIcon, PushPinSlashIcon, TrashIcon, XIcon, } from '@phosphor-icons/react';
+import { useId, useMemo, useState } from 'react';
+import { useLocale, useTranslations } from '../../i18n/index.js';
+import { Copy } from '../../icons/copy.js';
+import { useCopy } from '../../internal/hooks/use-copy.js';
+import { SolidCheckIcon } from '../../internal/icons/solid-check-icon.js';
+import { relativeTime } from '../../internal/lib/relative-time.js';
+import { Button } from '../../primitives/button.js';
+import { ButtonGroup } from '../../primitives/button-group.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import { DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator } from '../../primitives/dropdown-menu.js';
+import { EmptyArt } from '../../primitives/empty-art.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { Field, FieldDescription, FieldGroup, FieldLabel } from '../../primitives/field.js';
+import Hint from '../../primitives/hint.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 { FaviconAvatar } from '../../primitives/favicon-avatar.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { UserAvatar } from '../../primitives/user-avatar.js';
+import { useUiViewerId } from '../../providers/ui-provider.js';
+import { participantLabel } from '../../session/participants/session-participants.js';
+import { filterLinks, LINK_ADDED, linkFiltersFromParams, linkHost, linkTitle, } from './space-link-label.js';
+import { dayKind } from './space-timeline.js';
+import { Facet, FilterMenu, FilterSearch, FilterTokens } from './space-threads-tab.js';
+/** The API's limits: an http(s) URL of at most 2,048 characters, a title of at most 200. */
+const URL_MAX = 2048;
+const TITLE_MAX = 200;
+/** The URL keys of the search and the filters. */
+const FILTER_PARAMS = ['q', 'pinned', 'by', 'added'];
+/** The radio value of a facet's "Any" row (Radix needs a non-empty value). */
+const ANY = 'any';
+/** "example.com/x" becomes "https://example.com/x"; a value with a scheme is kept as typed. */
+function withScheme(value) {
+    return /^[a-z][a-z\d+.-]*:\/\//i.test(value) ? value : `https://${value}`;
+}
+/** An http(s) URL whose host has a dot ("localhost" and "foo" are not links). */
+function isWebUrl(value) {
+    try {
+        const { protocol, hostname } = new URL(value);
+        return (protocol === 'http:' || protocol === 'https:') && hostname.includes('.');
+    }
+    catch {
+        return false;
+    }
+}
+const personName = (name) => (name ? participantLabel({ name, email: null }) : '');
+/**
+ * A channel's Links tab, laid out like its Threads tab: one toolbar (search,
+ * the Filter menu, the active filters, "Add link"), then one list on one left
+ * edge. Pinned links come first under "Pinned"; the others follow by the day
+ * they were last shared (Today, Yesterday, Earlier). The channel's links all
+ * load at once, so search and filters read the loaded list. The URL holds
+ * them (`?q=&pinned=1&by=&added=`).
+ */
+export function SpaceLinks({ projectId, space, place, onOpenThread, params, setParams, }) {
+    const t = useTranslations('spaces.view');
+    const tf = useTranslations('spaces.view.threadFilter');
+    const viewerId = useUiViewerId();
+    const links = useProjectSpaceLinks(projectId, space.space_id);
+    const [adding, setAdding] = useState(false);
+    const [removing, setRemoving] = useState(null);
+    const remove = useRemoveProjectSpaceLink(projectId, space.space_id);
+    const pin = usePinProjectSpaceLink(projectId, space.space_id);
+    const filters = linkFiltersFromParams(params);
+    const setParam = (key, value) => setParams((next) => (value ? next.set(key, value) : next.delete(key)));
+    const clearAll = () => setParams((next) => FILTER_PARAMS.forEach((key) => next.delete(key)));
+    // Everyone who shared a link here, by name; the viewer is "Me".
+    const people = useMemo(() => {
+        const byId = new Map();
+        for (const link of links.data ?? []) {
+            if (link.created_by && link.created_by !== viewerId && !byId.has(link.created_by)) {
+                byId.set(link.created_by, personName(link.created_by_name) || t('authorFallback'));
+            }
+        }
+        return [...byId].map(([id, name]) => ({ id, name })).sort((a, b) => a.name.localeCompare(b.name));
+    }, [links.data, viewerId, t]);
+    const groups = useMemo(() => {
+        const now = new Date();
+        const shown = filterLinks(links.data ?? [], filters, viewerId, now);
+        const pinned = shown
+            .filter((link) => link.pinned)
+            .sort((a, b) => Date.parse(b.pinned_at ?? b.created_at) - Date.parse(a.pinned_at ?? a.created_at));
+        const result = pinned.length ? [{ key: 'pinned', label: t('links.pinnedLabel'), links: pinned }] : [];
+        for (const link of shown) {
+            if (link.pinned)
+                continue;
+            const kind = dayKind(new Date(link.last_shared_at), now);
+            let group = result.find((g) => g.key === kind);
+            if (!group) {
+                group = { key: kind, label: kind === 'earlier' ? t('links.earlier') : t(kind), links: [] };
+                result.push(group);
+            }
+            group.links.push(link);
+        }
+        return result;
+        // `filters` is rebuilt each render from the URL; its fields are the inputs.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [links.data, filters.q, filters.pinned, filters.by, filters.added, viewerId, t]);
+    const byLabel = (by) => by === 'me' || by === viewerId ? tf('me') : (people.find((p) => p.id === by)?.name ?? t('authorFallback'));
+    const addedLabel = (added) => tf(`activityValue.${added}`);
+    const tokens = [];
+    if (filters.pinned)
+        tokens.push({ key: 'pinned', facet: t('links.show'), label: t('links.pinnedLabel') });
+    if (filters.by)
+        tokens.push({ key: 'by', facet: t('links.sharedBy'), label: byLabel(filters.by) });
+    if (filters.added)
+        tokens.push({ key: 'added', facet: t('links.added'), label: addedLabel(filters.added) });
+    const pick = (key) => (value) => setParam(key, value === ANY ? null : value);
+    const setPinned = (link, next) => {
+        pin.mutate({ linkId: link.link_id, pinned: next }, {
+            onSuccess: (result) => 
+            // `null` only from an older server, where unpinning an added link removed it.
+            successToast(result === null ? t('links.removed') : next ? t('links.pinnedToast') : t('links.unpinnedToast')),
+            onError: (err) => errorToast(err instanceof ApiError && err.code === 'link_limit'
+                ? t('links.limit')
+                : next
+                    ? t('links.pinFailed')
+                    : t('links.unpinFailed')),
+        });
+    };
+    let body;
+    if (links.isError && !links.data) {
+        body = (_jsx("div", { className: "px-5 py-8", children: _jsx(ErrorState, { size: "sm", title: t('links.loadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => links.refetch(), children: t('retry') }) }) }));
+    }
+    else if (!links.data) {
+        body = null;
+    }
+    else if (links.data.length === 0) {
+        body = (_jsx(EmptyState, { className: "min-h-full", media: _jsx(EmptyArt, { icon: LinkSimpleIcon }), title: t('empty.links.title'), description: t('empty.links.description', { place }), action: _jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setAdding(true), children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), t('links.add')] }) }));
+    }
+    else if (groups.length === 0) {
+        body = (_jsx(EmptyState, { className: "min-h-full", media: _jsx(EmptyArt, { icon: MagnifyingGlassIcon }), title: t('links.noMatch'), description: tf('noMatchHint'), action: _jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: clearAll, children: [_jsx(XIcon, { className: "size-3.5 shrink-0" }), tf('clearFilters')] }) }));
+    }
+    else {
+        body = (_jsx("div", { className: "py-2", children: groups.map((group, index) => (_jsxs("section", { "aria-labelledby": `links-${group.key}`, children: [_jsx("h3", { id: `links-${group.key}`, className: `text-muted-foreground px-5 pb-1 text-xs font-medium ${index === 0 ? 'pt-1' : 'pt-4'}`, children: group.label }), _jsx("ul", { children: group.links.map((link) => (_jsx(LinkRow, { link: link, busy: pin.isPending, onPin: () => setPinned(link, !link.pinned), onOpenThread: link.session_id && onOpenThread ? () => onOpenThread(link.session_id) : undefined, onRemove: link.can_delete ? () => setRemoving(link) : undefined }, link.link_id))) })] }, group.key))) }));
+    }
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", children: [links.data?.length ? (_jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2 px-5 pt-3 pb-1", children: [_jsx(FilterSearch, { value: filters.q, placeholder: t('links.search'), onSearch: (q) => setParam('q', q || null) }), _jsxs(FilterMenu, { children: [_jsx(Facet, { label: t('links.show'), value: filters.pinned ? t('links.pinnedLabel') : t('links.all'), children: _jsxs(DropdownMenuRadioGroup, { value: filters.pinned ? '1' : ANY, onValueChange: pick('pinned'), children: [_jsx(DropdownMenuRadioItem, { value: ANY, children: t('links.all') }), _jsx(DropdownMenuRadioItem, { value: "1", children: t('links.pinnedLabel') })] }) }), _jsx(Facet, { label: t('links.sharedBy'), value: filters.by ? byLabel(filters.by) : tf('anyone'), wide: true, children: _jsxs(DropdownMenuRadioGroup, { value: filters.by ?? ANY, onValueChange: pick('by'), children: [_jsx(DropdownMenuRadioItem, { value: ANY, children: tf('anyone') }), _jsx(DropdownMenuRadioItem, { value: "me", children: tf('me') }), people.length > 0 ? _jsx(DropdownMenuSeparator, {}) : null, people.map((person) => (_jsxs(DropdownMenuRadioItem, { value: person.id, children: [_jsx(UserAvatar, { size: "xs", name: person.name, email: "" }), _jsx("span", { className: "min-w-0 truncate", children: person.name })] }, person.id)))] }) }), _jsx(Facet, { label: t('links.added'), value: filters.added ? addedLabel(filters.added) : tf('anyTime'), children: _jsxs(DropdownMenuRadioGroup, { value: filters.added ?? ANY, onValueChange: pick('added'), children: [_jsx(DropdownMenuRadioItem, { value: ANY, children: tf('anyTime') }), LINK_ADDED.map((added) => (_jsx(DropdownMenuRadioItem, { value: added, children: addedLabel(added) }, added)))] }) })] }), _jsx(FilterTokens, { tokens: tokens, onRemove: (key) => setParam(key, null), onClear: clearAll }), _jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto gap-1.5", onClick: () => setAdding(true), children: [_jsx(PlusIcon, { className: "size-3.5 shrink-0" }), t('links.add')] })] })) : null, _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: body }), _jsx(AddLinkModal, { projectId: projectId, space: space, place: place, open: adding, onOpenChange: setAdding }), _jsx(ConfirmDialog, { open: !!removing, onOpenChange: (open) => !open && setRemoving(null), title: t('links.removeTitle'), description: t('links.removeDescription', { link: removing ? linkTitle(removing) : '', place }), confirmLabel: t('links.remove'), confirmVariant: "destructive", isPending: remove.isPending, onConfirm: () => {
+                    if (!removing)
+                        return;
+                    remove.mutate(removing.link_id, {
+                        onSuccess: () => {
+                            setRemoving(null);
+                            successToast(t('links.removed'));
+                        },
+                        onError: () => errorToast(t('links.removeFailed')),
+                    });
+                } })] }));
+}
+/**
+ * One link on one line, at the Threads row's height and padding: the site's
+ * favicon (the app's favicon service, never the stored `icon_url`), the title, the site muted,
+ * and who shared it and when at the right. Hover or focus swaps that for the
+ * actions: Pin / Unpin, Copy link, Open thread, Remove. The row opens the link.
+ */
+function LinkRow({ link, busy, onPin, onOpenThread, onRemove, }) {
+    const t = useTranslations('spaces.view');
+    const locale = useLocale();
+    const { copy, copied } = useCopy({ successMessage: t('links.linkCopied') });
+    const host = linkHost(link.url);
+    const site = link.site_name && link.site_name.toLowerCase() !== host.toLowerCase() ? link.site_name : host;
+    const name = personName(link.created_by_name);
+    const when = relativeTime(link.last_shared_at, locale);
+    const pinLabel = link.pinned ? t('links.unpin') : t('links.pin');
+    const action = (label, hint, onClick, icon, disabled) => (_jsx(Hint, { label: hint, side: "top", children: _jsx(Button, { variant: "outline", size: "icon-xs", "aria-label": label, disabled: disabled, onClick: onClick, children: icon }) }));
+    return (_jsxs("li", { className: "group hover:bg-hover focus-within:bg-hover relative flex items-center gap-3 px-5 py-2", children: [_jsx(FaviconAvatar, { value: link.url, size: "xs", className: "shrink-0" }), _jsxs("div", { className: "flex min-w-0 flex-1 items-baseline gap-2", children: [_jsx("a", { 
+                        // A row another writer stored with a non-http(s) URL is shown, never linked.
+                        href: safeHttpUrl(link.url) ? link.url : undefined, target: "_blank", rel: "noopener noreferrer", title: link.url, className: "focus-visible:after:ring-ring min-w-0 truncate text-sm font-medium outline-none after:absolute after:inset-0 focus-visible:after:ring-2 focus-visible:after:ring-inset", children: linkTitle(link) }), _jsx("span", { className: "text-muted-foreground max-w-48 shrink-0 truncate text-xs", children: site })] }), _jsx("span", { className: "text-muted-foreground shrink-0 text-xs tabular-nums group-focus-within:invisible group-hover:invisible pointer-coarse:hidden", children: name ? `${name} · ${when}` : when }), _jsxs(ButtonGroup, { className: "absolute inset-y-0 right-5 z-10 my-auto hidden h-fit group-focus-within:flex group-hover:flex pointer-coarse:static pointer-coarse:flex", children: [action(pinLabel, link.pinned ? t('links.unpinHint') : t('links.pinHint'), onPin, link.pinned ? _jsx(PushPinSlashIcon, { className: "size-3.5 shrink-0" }) : _jsx(PushPinIcon, { className: "size-3.5 shrink-0" }), busy), action(t('links.copyLink'), copied ? t('links.linkCopied') : t('links.copyLink'), () => void copy(link.url), copied ? _jsx(SolidCheckIcon, { className: "size-3.5 shrink-0" }) : _jsx(Copy, { className: "size-3.5 shrink-0" })), onOpenThread
+                        ? action(t('links.openThread'), t('links.openThread'), onOpenThread, _jsx(ChatTeardropTextIcon, { className: "size-3.5 shrink-0" }))
+                        : null, onRemove
+                        ? action(t('links.remove'), t('links.remove'), onRemove, _jsx(TrashIcon, { className: "size-3.5 shrink-0" }))
+                        : null] })] }));
+}
+function AddLinkModal({ projectId, space, place, open, onOpenChange, }) {
+    const t = useTranslations('spaces.view');
+    const tI18nComplete = useTranslations('hardcodedUi.i18nComplete');
+    const id = useId();
+    const add = useAddProjectSpaceLink(projectId, space.space_id);
+    const [url, setUrl] = useState('');
+    const [title, setTitle] = useState('');
+    const [error, setError] = useState(null);
+    const close = () => {
+        if (add.isPending)
+            return;
+        setUrl('');
+        setTitle('');
+        setError(null);
+        onOpenChange(false);
+    };
+    const submit = () => {
+        if (add.isPending)
+            return;
+        const trimmed = withScheme(url.trim());
+        if (!isWebUrl(trimmed))
+            return setError('invalid');
+        add.mutate({ url: trimmed, ...(title.trim() ? { title: title.trim() } : {}) }, {
+            onSuccess: () => {
+                successToast(t('links.added'));
+                setUrl('');
+                setTitle('');
+                setError(null);
+                onOpenChange(false);
+            },
+            onError: (err) => setError(err instanceof ApiError && err.code === 'link_limit' ? 'limit' : 'failed'),
+        });
+    };
+    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('links.add') }), _jsx(ModalDescription, { children: t('links.addDescription', { place }) })] }), _jsxs("form", { 
+                    // The URL check below says what is wrong, in the viewer's language.
+                    noValidate: true, onSubmit: (event) => {
+                        event.preventDefault();
+                        submit();
+                    }, children: [_jsx(ModalBody, { children: _jsxs(FieldGroup, { className: "gap-5", children: [_jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { htmlFor: `${id}-url`, children: t('links.urlLabel') }), _jsx(Input, { id: `${id}-url`, type: "url", inputMode: "url", autoComplete: "off", spellCheck: false, autoFocus: true, value: url, maxLength: URL_MAX, placeholder: "https://", "aria-invalid": error === 'invalid' ? true : undefined, "aria-describedby": `${id}-url-hint`, onChange: (event) => {
+                                                    setUrl(event.target.value);
+                                                    if (error)
+                                                        setError(null);
+                                                } }), _jsx(FieldDescription, { id: `${id}-url-hint`, className: "text-destructive", children: _jsx("span", { "aria-live": "polite", children: error === 'invalid'
+                                                        ? t('links.invalidUrl')
+                                                        : error === 'limit'
+                                                            ? t('links.addLimit')
+                                                            : error === 'failed'
+                                                                ? t('links.addFailed')
+                                                                : null }) })] }), _jsxs(Field, { className: "gap-1.5", children: [_jsx(FieldLabel, { htmlFor: `${id}-title`, children: t('links.titleLabel') }), _jsx(Input, { id: `${id}-title`, autoComplete: "off", value: title, maxLength: TITLE_MAX, placeholder: t('links.titlePlaceholder'), onChange: (event) => setTitle(event.target.value) })] })] }) }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [_jsx(Button, { type: "button", variant: "outline-ghost", onClick: close, disabled: add.isPending, children: tI18nComplete.raw('text19766ed6ccb2') }), _jsxs(Button, { type: "submit", disabled: add.isPending, "aria-busy": add.isPending || undefined, children: [add.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, t('links.add')] })] })] })] }) }));
+}

package/dist/workspace/spaces/space-members.d.ts

@@ -0,0 +1,46 @@
+import type { ProjectSpace, ProjectSpaceMember } from '@kortix/sdk';
+/**
+ * The project's people, by display name: `#general`'s member list, which is
+ * every project member. `notIn`: the people not yet in that channel.
+ */
+export declare function useProjectPeople(projectId: string, notIn?: ProjectSpace): {
+    available: ProjectSpaceMember[];
+    isLoading: boolean;
+};
+/**
+ * Invite someone to the project by email: the project's own grant dialog
+ * (`AccessDialog`, the one Access → Projects opens), for a viewer who may
+ * manage the project's members. `dialog` is rendered by the caller.
+ */
+export declare function useInviteToProject(projectId: string): {
+    canInvite: boolean;
+    invite: () => void;
+    dialog: import("react").JSX.Element | null;
+};
+/** A person's face and display name, never an email. */
+export declare function MemberAvatar({ member, size }: {
+    member: ProjectSpaceMember;
+    size?: 'xs' | 'sm' | 'md';
+}): import("react").JSX.Element;
+/**
+ * "Add members": one checklist of the project's people and agents not yet in
+ * the channel, in the access picker's rows, People first. People show to
+ * whoever may add (`can_add`), agents to whoever may edit the channel
+ * (`can_edit`); an empty group is hidden. Each check adds a chip. Arrow keys
+ * move the highlight across both groups from the search field; Enter checks
+ * the highlighted row. The footer adds the people (one request) and appends
+ * the agents in pick order (one PATCH), in parallel: on an empty agent list
+ * the first agent picked becomes the default. "Invite by email" in the
+ * footer opens the project's invite dialog, for someone not in the project.
+ */
+export declare function AddChannelMembersDialog({ projectId, space, open, onOpenChange, }: {
+    projectId: string;
+    space: ProjectSpace;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+}): import("react").JSX.Element;
+/** "Join channel", in the header of a public channel the viewer is not in. */
+export declare function JoinChannelButton({ projectId, space }: {
+    projectId: string;
+    space: ProjectSpace;
+}): import("react").JSX.Element;

package/dist/workspace/spaces/space-members.js

@@ -0,0 +1,182 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAddProjectSpaceMembers, useJoinProjectSpace, useProjectSpaceMembers, useProjectAccountId, useProjectName, useProjectSpaces, useUpdateProjectSpace, useVisibleAgents, } from '@kortix/sdk/react';
+import { EnvelopeSimpleIcon, MagnifyingGlassIcon } from '@phosphor-icons/react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { AccessDialog } from '../../access/access/access-dialog.js';
+import { PickerRow } from '../../access/access/principal-picker.js';
+import { useTranslations } from '../../i18n/index.js';
+import { Close } from '../../icons/close.js';
+import { AgentMark } from '../../internal/components/agent-mark.js';
+import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
+import { useProjectCan } from '../../internal/lib/use-project-can.js';
+import { Badge } from '../../primitives/badge.js';
+import { Button } from '../../primitives/button.js';
+import { InputGroupSearch, InputGroupSearchClear, InputGroupSearchIcon, InputGroupSearchInput, } from '../../primitives/input-group.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 { UserAvatar } from '../../primitives/user-avatar.js';
+import { agentLabel } from './space-timeline.js';
+/**
+ * The project's people, by display name: `#general`'s member list, which is
+ * every project member. `notIn`: the people not yet in that channel.
+ */
+export function useProjectPeople(projectId, notIn) {
+    const spaces = useProjectSpaces(projectId);
+    const generalId = spaces.data?.find((space) => space.is_default)?.space_id;
+    const everyone = useProjectSpaceMembers(projectId, generalId);
+    const inChannel = useProjectSpaceMembers(projectId, notIn?.is_default ? null : notIn?.space_id);
+    const available = useMemo(() => {
+        const taken = new Set((inChannel.data?.members ?? []).map((member) => member.user_id));
+        return (everyone.data?.members ?? []).filter((member) => !taken.has(member.user_id));
+    }, [everyone.data, inChannel.data]);
+    return { available, isLoading: everyone.isLoading || inChannel.isLoading };
+}
+/**
+ * Invite someone to the project by email: the project's own grant dialog
+ * (`AccessDialog`, the one Access → Projects opens), for a viewer who may
+ * manage the project's members. `dialog` is rendered by the caller.
+ */
+export function useInviteToProject(projectId) {
+    const canInvite = useProjectCan(projectId, PROJECT_ACTIONS.PROJECT_MEMBERS_MANAGE).allowed === true;
+    const accountId = useProjectAccountId(canInvite ? projectId : undefined);
+    const projectName = useProjectName(canInvite ? projectId : undefined) ?? '';
+    const [open, setOpen] = useState(false);
+    const dialog = accountId ? (_jsx(AccessDialog, { open: open, onOpenChange: setOpen, accountId: accountId, scope: { kind: 'project', projectId, projectName }, mode: { kind: 'grant' } })) : null;
+    return { canInvite: canInvite && !!accountId, invite: () => setOpen(true), dialog };
+}
+/** A person's face and display name, never an email. */
+export function MemberAvatar({ member, size = 'md' }) {
+    return _jsx(UserAvatar, { email: "", name: member.name, avatarUrl: member.avatar_url, size: size });
+}
+const candidateKey = (candidate) => `${candidate.kind}:${candidate.id}`;
+/**
+ * "Add members": one checklist of the project's people and agents not yet in
+ * the channel, in the access picker's rows, People first. People show to
+ * whoever may add (`can_add`), agents to whoever may edit the channel
+ * (`can_edit`); an empty group is hidden. Each check adds a chip. Arrow keys
+ * move the highlight across both groups from the search field; Enter checks
+ * the highlighted row. The footer adds the people (one request) and appends
+ * the agents in pick order (one PATCH), in parallel: on an empty agent list
+ * the first agent picked becomes the default. "Invite by email" in the
+ * footer opens the project's invite dialog, for someone not in the project.
+ */
+export function AddChannelMembersDialog({ projectId, space, open, onOpenChange, }) {
+    const invite = useInviteToProject(projectId);
+    return (_jsxs(_Fragment, { children: [_jsx(Modal, { open: open, onOpenChange: onOpenChange, children: _jsx(ModalContent, { className: "lg:max-w-md", children: open ? (_jsx(AddMembersForm, { projectId: projectId, space: space, onDone: () => onOpenChange(false), onInvite: invite.canInvite
+                            ? () => {
+                                onOpenChange(false);
+                                invite.invite();
+                            }
+                            : null })) : null }) }), invite.dialog] }));
+}
+function AddMembersForm({ projectId, space, onDone, onInvite, }) {
+    const t = useTranslations('spaces.addMembers');
+    const canAdd = useProjectSpaceMembers(projectId, space.space_id).data?.can_add === true;
+    // Its creator or a project manager; an older API sends no `can_edit`.
+    const editable = space.can_edit !== false;
+    const outside = space.visibility === 'private' && space.is_member === false;
+    const people = useProjectPeople(projectId, canAdd ? space : undefined);
+    const agents = useVisibleAgents({ projectId });
+    const add = useAddProjectSpaceMembers(projectId, space.space_id);
+    const update = useUpdateProjectSpace(projectId);
+    const [picked, setPicked] = useState([]);
+    const [query, setQuery] = useState('');
+    const [highlight, setHighlight] = useState(0);
+    const listRef = useRef(null);
+    const pending = add.isPending || update.isPending;
+    const name = space.slug ?? space.name;
+    const current = useMemo(() => space.agents ?? [], [space.agents]);
+    const personRows = useMemo(() => canAdd
+        ? people.available
+            // A manager outside a private channel adds others, never themself (D1).
+            .filter((person) => !(outside && person.is_viewer))
+            .map((person) => ({ kind: 'person', id: person.user_id, label: person.name, person }))
+        : [], [canAdd, outside, people.available]);
+    const agentRows = useMemo(() => editable
+        ? agents.filter((agent) => !current.includes(agent.name)).map((agent) => ({ kind: 'agent', id: agent.name, label: agentLabel(agent.name) }))
+        : [], [editable, agents, current]);
+    const needle = query.trim().toLowerCase();
+    // A person by display name; an agent by its label or its slug.
+    const matches = (row) => !needle || row.label.toLowerCase().includes(needle) || (row.kind === 'agent' && row.id.toLowerCase().includes(needle));
+    const shownPeople = personRows.filter(matches);
+    const shownAgents = agentRows.filter(matches);
+    // One list for the arrow keys: People, then Agents.
+    const shown = [...shownPeople, ...shownAgents];
+    const pickedKeys = new Set(picked.map(candidateKey));
+    const toggle = (row) => setPicked((list) => (list.some((item) => candidateKey(item) === candidateKey(row)) ? list.filter((item) => candidateKey(item) !== candidateKey(row)) : [...list, row]));
+    // The highlighted row stays in view as the arrow keys move it.
+    useEffect(() => {
+        listRef.current?.querySelector(`[data-row="${highlight}"]`)?.scrollIntoView({ block: 'nearest' });
+    }, [highlight]);
+    const onKeyDown = (event) => {
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            const step = event.key === 'ArrowDown' ? 1 : -1;
+            setHighlight((index) => (shown.length === 0 ? 0 : (index + step + shown.length) % shown.length));
+        }
+        else if (event.key === 'Enter') {
+            event.preventDefault();
+            const row = shown[Math.min(highlight, shown.length - 1)];
+            if (row)
+                toggle(row);
+        }
+    };
+    /** "1 person", "2 agents", "1 person and 2 agents". */
+    const summary = (personCount, agentCount) => {
+        const who = personCount > 0 ? t('peopleCount', { count: personCount }) : null;
+        const what = agentCount > 0 ? t('agentsCount', { count: agentCount }) : null;
+        return who && what ? t('both', { people: who, agents: what }) : (who ?? what ?? '');
+    };
+    const pickedPeople = picked.filter((row) => row.kind === 'person').map((row) => row.id);
+    const pickedAgents = picked.filter((row) => row.kind === 'agent').map((row) => row.id);
+    const submit = async () => {
+        if (picked.length === 0 || pending)
+            return;
+        const [peopleResult, agentsResult] = await Promise.allSettled([
+            pickedPeople.length > 0 ? add.mutateAsync(pickedPeople) : null,
+            pickedAgents.length > 0 ? update.mutateAsync({ spaceId: space.space_id, input: { agents: [...current, ...pickedAgents] } }) : null,
+        ]);
+        const peopleFailed = peopleResult.status === 'rejected';
+        const agentsFailed = agentsResult.status === 'rejected';
+        if (!peopleFailed && !agentsFailed) {
+            successToast(t('added', { what: summary(pickedPeople.length, pickedAgents.length), name }));
+            onDone();
+            return;
+        }
+        // Keep the part that failed selected, so a second click retries only it.
+        setPicked((list) => list.filter((row) => (row.kind === 'person' ? peopleFailed : agentsFailed)));
+        if (peopleFailed && agentsFailed)
+            errorToast(t('failed'));
+        else if (peopleFailed)
+            errorToast(pickedAgents.length > 0 ? t('peopleFailedAgentsAdded', { what: summary(0, pickedAgents.length), name }) : t('peopleFailed'));
+        else
+            errorToast(pickedPeople.length > 0 ? t('agentsFailedPeopleAdded', { what: summary(pickedPeople.length, 0), name }) : t('agentsFailed'));
+    };
+    const loading = canAdd && people.isLoading;
+    const empty = loading
+        ? null
+        : personRows.length + agentRows.length === 0
+            ? t('allAdded')
+            : shown.length === 0
+                ? t('noMatches', { query: query.trim() })
+                : null;
+    const group = (label, rows, offset) => rows.length === 0 ? null : (_jsxs("div", { role: "group", "aria-label": label, children: [_jsx("h3", { className: "text-muted-foreground px-2 pt-2 pb-1 text-xs font-medium", children: label }), rows.map((row, index) => (_jsx("div", { "data-row": offset + index, children: _jsx(PickerRow, { selection: "multi", selected: pickedKeys.has(candidateKey(row)), highlighted: offset + index === highlight, disabled: pending, onSelect: () => toggle(row), 
+                    // The 28px tile, as in the Members list: a person row and an agent row share one height.
+                    leading: row.kind === 'person' ? _jsx(MemberAvatar, { member: row.person }) : _jsx(AgentMark, { slug: row.id, size: 21 }), label: row.label }) }, candidateKey(row))))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(ModalHeader, { children: [_jsx(ModalTitle, { children: t('title', { name }) }), _jsx(ModalDescription, { children: t('description') })] }), _jsxs(ModalBody, { className: "space-y-3", children: [picked.length > 0 ? (_jsx("ul", { className: "flex flex-wrap gap-1.5", "aria-label": t('selected'), children: picked.map((row) => (_jsx("li", { children: _jsxs(Badge, { variant: "outline", size: "sm", className: "gap-1.5 py-0.5 pr-0.5 pl-1 font-sans text-xs tracking-normal", children: [row.kind === 'person' ? _jsx(MemberAvatar, { member: row.person, size: "xs" }) : _jsx(AgentMark, { slug: row.id, size: 14, tile: 18 }), row.label, _jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", className: "text-muted-foreground size-5", "aria-label": t('unpick', { member: row.label }), disabled: pending, onClick: () => toggle(row), children: _jsx(Close, { className: "size-3" }) })] }) }, candidateKey(row)))) })) : null, _jsxs("div", { className: "border-border overflow-hidden rounded-md border", children: [_jsxs(InputGroupSearch, { className: "border-b", children: [_jsx(InputGroupSearchIcon, { children: _jsx(MagnifyingGlassIcon, {}) }), _jsx(InputGroupSearchInput, { value: query, onChange: (event) => {
+                                            setQuery(event.target.value);
+                                            setHighlight(0);
+                                        }, onKeyDown: onKeyDown, placeholder: t('search'), "aria-label": t('search'), autoFocus: true }), query ? _jsx(InputGroupSearchClear, { onClick: () => setQuery('') }) : null] }), _jsx("div", { ref: listRef, className: "max-h-72 overflow-y-auto p-1", children: loading ? (_jsx("div", { className: "flex justify-center py-6", children: _jsx(Loading, { className: "size-4 shrink-0" }) })) : empty ? (_jsxs("div", { className: "flex flex-col items-center gap-3 px-3 py-6", children: [_jsx("p", { className: "text-muted-foreground text-center text-xs", children: empty }), onInvite && !needle ? (_jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "gap-1.5", onClick: onInvite, children: [_jsx(EnvelopeSimpleIcon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), t('inviteByEmail')] })) : null] })) : (_jsxs(_Fragment, { children: [group(t('people'), shownPeople, 0), group(t('agents'), shownAgents, shownPeople.length)] })) })] })] }), _jsxs(ModalFooter, { className: "sm:justify-between", children: [onInvite ? (_jsx(Button, { type: "button", variant: "transparent", size: "sm", className: "text-muted-foreground hover:text-foreground h-auto p-0 text-xs font-normal", onClick: onInvite, children: t('inviteByEmail') })) : (_jsx("span", {})), _jsxs("div", { className: "flex w-full flex-col-reverse gap-2 sm:w-auto sm:flex-row", children: [_jsx(Button, { type: "button", variant: "outline-ghost", onClick: onDone, disabled: pending, children: t('cancel') }), _jsxs(Button, { type: "button", onClick: submit, disabled: picked.length === 0 || pending, "aria-busy": pending || undefined, children: [pending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, picked.length === 0 ? t('confirmEmpty') : t('confirm', { what: summary(pickedPeople.length, pickedAgents.length) })] })] })] })] }));
+}
+/** "Join channel", in the header of a public channel the viewer is not in. */
+export function JoinChannelButton({ projectId, space }) {
+    const t = useTranslations('spaces.view');
+    const join = useJoinProjectSpace(projectId, space.space_id);
+    const name = space.slug ?? space.name;
+    return (_jsxs(Button, { size: "sm", variant: "secondary", className: "shrink-0", disabled: join.isPending, "aria-busy": join.isPending || undefined, onClick: () => join.mutate(undefined, {
+            onSuccess: () => successToast(t('joined', { name })),
+            onError: () => errorToast(t('joinFailed')),
+        }), children: [join.isPending ? _jsx(Loading, { className: "size-4 shrink-0" }) : null, t('join')] }));
+}

package/dist/workspace/spaces/space-roster.d.ts

@@ -0,0 +1,15 @@
+import { type spaceRoster } from './space-timeline.js';
+type Roster = ReturnType<typeof spaceRoster>;
+/**
+ * Who is in the channel, in its header: its members' faces, a hairline, its
+ * agents' tiles. The same for every viewer (the channel's member list and
+ * agent list, not the threads a viewer can load). People and agents never mix, so a glance tells them apart.
+ * Hover, or a click, opens the session header's people card
+ * (`SessionParticipantStack`): People, then Agents, each a label, a count and
+ * plain rows. Its one action, "View all members", opens the Members tab.
+ */
+export declare function SpaceRosterButton({ roster, onViewAll }: {
+    roster: Roster;
+    onViewAll: () => void;
+}): import("react").JSX.Element;
+export {};

package/dist/workspace/spaces/space-roster.js

@@ -0,0 +1,44 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTranslations } from '../../i18n/index.js';
+import { AgentMark } from '../../internal/components/agent-mark.js';
+import { AvatarGroup, AvatarGroupCount } from '../../primitives/avatar.js';
+import { Button } from '../../primitives/button.js';
+import { FadedScrollArea } from '../../primitives/faded-scroll-area.js';
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '../../primitives/hover-card.js';
+import { UserAvatar } from '../../primitives/user-avatar.js';
+import { participantLabel } from '../../session/participants/session-participants.js';
+import { agentLabel } from './space-timeline.js';
+/** Faces before the rest collapse into "+N": two people, three agents. */
+const PEOPLE_SHOWN = 2;
+const AGENTS_SHOWN = 3;
+/**
+ * Who is in the channel, in its header: its members' faces, a hairline, its
+ * agents' tiles. The same for every viewer (the channel's member list and
+ * agent list, not the threads a viewer can load). People and agents never mix, so a glance tells them apart.
+ * Hover, or a click, opens the session header's people card
+ * (`SessionParticipantStack`): People, then Agents, each a label, a count and
+ * plain rows. Its one action, "View all members", opens the Members tab.
+ */
+export function SpaceRosterButton({ roster, onViewAll }) {
+    const t = useTranslations('spaces.view');
+    const [open, setOpen] = useState(false);
+    const { people, agents } = roster;
+    const morePeople = people.length - PEOPLE_SHOWN;
+    const moreAgents = agents.length - AGENTS_SHOWN;
+    const label = t('roster', {
+        people: t('rosterPeople', { count: people.length }),
+        agents: t('rosterAgents', { count: agents.length }),
+    });
+    return (_jsxs(HoverCard, { open: open, onOpenChange: setOpen, openDelay: 300, closeDelay: 100, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsxs("button", { type: "button", "aria-label": label, "aria-expanded": open, onClick: () => setOpen((value) => !value), className: "hover:bg-hover focus-visible:ring-ring data-[state=open]:bg-hover flex h-8 shrink-0 cursor-pointer items-center gap-2 rounded-md border px-1.5 outline-none focus-visible:ring-2", children: [people.length > 0 ? (_jsxs(AvatarGroup, { className: "-space-x-1", children: [people.slice(0, PEOPLE_SHOWN).map((person) => (_jsx(UserAvatar, { email: person.email ?? '', name: participantLabel(person), avatarUrl: person.avatarUrl, size: "xs", ring: true }, person.id))), morePeople > 0 ? (_jsxs(AvatarGroupCount, { className: "h-5 w-auto min-w-5 rounded-full px-1 text-xs tabular-nums", children: ["+", morePeople] })) : null] })) : null, people.length > 0 && agents.length > 0 ? _jsx("span", { "aria-hidden": true, className: "bg-border h-4 w-px shrink-0" }) : null, agents.length > 0 ? (_jsxs("span", { className: "flex -space-x-1", children: [agents.slice(0, AGENTS_SHOWN).map((agent) => (
+                                // 18px tile: the people's `xs` faces and the `+N` chip are `h-5`.
+                                _jsx(AgentMark, { slug: agent, size: 14, tile: 18, className: "ring-background ring-2" }, agent))), moreAgents > 0 ? (_jsxs("span", { className: "bg-muted text-muted-foreground ring-background flex h-5 min-w-5 items-center justify-center rounded-sm px-1 text-xs font-medium tabular-nums ring-2", children: ["+", moreAgents] })) : null] })) : null] }) }), _jsxs(HoverCardContent, { side: "bottom", align: "end", sideOffset: 6, animated: false, className: "w-72 overflow-hidden p-0", onEscapeKeyDown: () => setOpen(false), children: [_jsxs(FadedScrollArea, { fadeColor: "from-popover", fadeSize: "6", className: "max-h-80 overscroll-contain", children: [people.length > 0 ? (_jsx(RosterGroup, { title: t('rosterTitlePeople'), count: people.length, children: people.map((person) => (_jsxs("li", { className: "text-foreground flex min-h-9 items-center gap-2.5 px-2 py-1 text-sm", children: [_jsx(UserAvatar, { email: person.email ?? '', name: participantLabel(person), avatarUrl: person.avatarUrl, size: "md" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: participantLabel(person) })] }, person.id))) })) : null, agents.length > 0 ? (_jsx(RosterGroup, { title: t('rosterTitleAgents'), count: agents.length, children: agents.map((agent) => (_jsxs("li", { className: "text-foreground flex min-h-9 items-center gap-2.5 px-2 py-1 text-sm", children: [_jsx(AgentMark, { slug: agent, size: 21 }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate leading-tight", children: agentLabel(agent) }), _jsx("span", { className: "text-muted-foreground truncate text-xs leading-tight tabular-nums", children: t('agentThreads', { count: roster.agentThreads[agent] ?? 0 }) })] })] }, agent))) })) : null] }), _jsx("div", { className: "border-t p-1", children: _jsx(Button, { variant: "ghost", size: "sm", className: "w-full justify-start font-normal", onClick: () => {
+                                setOpen(false);
+                                onViewAll();
+                            }, children: t('viewAllMembers') }) })] })] }));
+}
+/** "People 6", then the rows: the session card's header line, once per group. */
+function RosterGroup({ title, count, children }) {
+    return (_jsxs("section", { children: [_jsxs("div", { className: "text-muted-foreground flex items-center justify-between px-3.5 pt-2.5 pb-1 text-xs", children: [_jsx("span", { children: title }), _jsx("span", { className: "tabular-nums", children: count })] }), _jsx("ul", { className: "p-1 pt-0", children: children })] }));
+}

package/dist/workspace/spaces/space-threads-tab.d.ts

@@ -0,0 +1,56 @@
+import type { ProjectSpace } from '@kortix/sdk';
+import { type ReactNode } from 'react';
+import { type SpaceThreads } from './space-timeline-view.js';
+/**
+ * The Threads tab of a channel or DM: a search over titles and first prompts,
+ * one Filter menu (Status, Started by, Agent, Activity), the active filters
+ * as removable tokens, and the rows. Search, person, agent and activity run
+ * on the server; Status reads the loaded rows, as on the Sessions page. The
+ * URL holds every value (`?q=&status=&by=&agent=&active=`).
+ */
+export declare function SpaceThreadsTab({ projectId, space, threads, selectedId, onOpenThread, params, setParams, }: {
+    projectId: string;
+    space: ProjectSpace;
+    /** The space's unfiltered threads (the Chat tab's list): the people and agents the menu offers. */
+    threads: SpaceThreads;
+    selectedId: string | null;
+    onOpenThread: (sessionId: string) => void;
+    params: {
+        get(name: string): string | null;
+    };
+    setParams: (change: (params: URLSearchParams) => void) => void;
+}): import("react").JSX.Element;
+/**
+ * The search field of a channel tab's toolbar (Threads, Links). The text is
+ * local while typing; `onSearch` gets the settled query ('' below `minChars`),
+ * and Esc clears it. A new `value` (Clear, the back button) replaces the text.
+ */
+export declare function FilterSearch({ value, placeholder, minChars, onSearch, }: {
+    value: string;
+    placeholder: string;
+    minChars?: number;
+    onSearch: (q: string) => void;
+}): import("react").JSX.Element;
+/** The quiet "Filter" button and its menu; the children are `Facet` rows. */
+export declare function FilterMenu({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export type FilterToken<K extends string> = {
+    key: K;
+    facet: string;
+    label: string;
+    icon?: ReactNode;
+};
+/** The active filters as removable tokens, then Clear. */
+export declare function FilterTokens<K extends string>({ tokens, onRemove, onClear, }: {
+    tokens: readonly FilterToken<K>[];
+    onRemove: (key: K) => void;
+    onClear: () => void;
+}): import("react").JSX.Element | null;
+/** A facet row: its name, its current value muted on the right, its choices in a submenu. */
+export declare function Facet({ label, value, wide, children }: {
+    label: string;
+    value: string;
+    wide?: boolean;
+    children: ReactNode;
+}): import("react").JSX.Element;