@kortix/ui 0.14.8 → 0.14.9

package/dist/workspace/home/access-requests-bell.d.ts

@@ -1,3 +1,4 @@
+import type { ProjectAccessRequest } from '@kortix/sdk';
 import { type HubTarget } from '../../internal/stores/account-panel-store.js';
 /**
  * The pending-access-requests control, floated over the hero's top-right
@@ -6,6 +7,11 @@ import { type HubTarget } from '../../internal/stores/account-panel-store.js';
  * (KRTX-1742), and two bells on one screen would read as one control. With
  * the flag off there is no inbox bell, and the glyph stays the bell.
  *
+ * It draws its count with the inbox's `BellMark`, in the yellow "needs you"
+ * tone: a request waits on the person, so it reads like the sidebar bell.
+ * Hover opens the people card of the session header's participant stack:
+ * who asked and when, with one way to review.
+ *
  * ## One button, not two
  *
  * The destination needs the project's `account_id`, which arrives on its own
@@ -23,8 +29,9 @@ import { type HubTarget } from '../../internal/stores/account-panel-store.js';
  * runs at 80% of the enter. Under reduced motion the scale is dropped and the
  * fade stays, because the fade is what says "this is new".
  */
-export declare function AccessRequestsBell({ count, to, notificationCenter, className, }: {
-    count: number;
+export declare function AccessRequestsBell({ requests, to, notificationCenter, className, }: {
+    /** The project's pending access requests, newest last as the API returns them. */
+    requests: ProjectAccessRequest[];
     /** The account hub's Access › Projects pane, scoped to this project.
      *  `null` while `account_id` is still loading — the bell renders inert. */
     to: HubTarget | null;

package/dist/workspace/home/access-requests-bell.js

@@ -1,11 +1,16 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BellIcon, UserPlusIcon } from '@phosphor-icons/react';
 import { AnimatePresence, m, useReducedMotion } from 'motion/react';
+import { useState } from 'react';
+import { BellMark } from '../../internal/notifications/notification-bell.js';
 import { HubLink } from '../../internal/account-hub/account-hub-location.js';
-import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
-import Hint from '../../primitives/hint.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 { useLocale, useTranslations } from '../../i18n/index.js';
+import { relativeTime } from '../../internal/lib/relative-time.js';
 import { cn } from '../../internal/lib/utils.js';
 /**
  * The pending-access-requests control, floated over the hero's top-right
@@ -14,6 +19,11 @@ import { cn } from '../../internal/lib/utils.js';
  * (KRTX-1742), and two bells on one screen would read as one control. With
  * the flag off there is no inbox bell, and the glyph stays the bell.
  *
+ * It draws its count with the inbox's `BellMark`, in the yellow "needs you"
+ * tone: a request waits on the person, so it reads like the sidebar bell.
+ * Hover opens the people card of the session header's participant stack:
+ * who asked and when, with one way to review.
+ *
  * ## One button, not two
  *
  * The destination needs the project's `account_id`, which arrives on its own
@@ -31,11 +41,15 @@ import { cn } from '../../internal/lib/utils.js';
  * runs at 80% of the enter. Under reduced motion the scale is dropped and the
  * fade stays, because the fade is what says "this is new".
  */
-export function AccessRequestsBell({ count, to, notificationCenter = false, className, }) {
+export function AccessRequestsBell({ requests, to, notificationCenter = false, className, }) {
+    const t = useTranslations('hardcodedUi.i18nComplete');
+    const locale = useLocale();
     const reduceMotion = useReducedMotion();
+    const [open, setOpen] = useState(false);
+    const count = requests.length;
     const label = `${count} pending access request${count === 1 ? '' : 's'}`;
     const Glyph = notificationCenter ? UserPlusIcon : BellIcon;
-    const body = (_jsxs(_Fragment, { children: [_jsx(Glyph, { className: "size-4" }), _jsx(Badge, { size: "xs", variant: "new", className: "absolute -top-1 -right-1 min-w-5 px-1 tabular-nums", children: count })] }));
+    const body = _jsx(BellMark, { count: count, needsYou: true, icon: Glyph });
     return (_jsx(AnimatePresence, { children: count > 0 && (_jsx(m.div, { initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.95 }, animate: {
                 opacity: 1,
                 scale: 1,
@@ -44,5 +58,5 @@ export function AccessRequestsBell({ count, to, notificationCenter = false, clas
                 opacity: 0,
                 scale: reduceMotion ? 1 : 0.95,
                 transition: { duration: 0.12, ease: [0.23, 1, 0.32, 1] },
-            }, className: cn('absolute top-4 right-4 z-20', className), children: _jsx(Hint, { label: label, children: _jsx(Button, { asChild: Boolean(to), type: "button", variant: "ghost", size: "icon", className: "bg-background/80 relative backdrop-blur-sm", "aria-label": label, children: to ? _jsx(HubLink, { to: to, children: body }) : body }) }) }, "access-requests-bell")) }));
+            }, className: cn('absolute top-2 right-2 z-20', className), children: _jsxs(HoverCard, { open: open, onOpenChange: setOpen, openDelay: 300, closeDelay: 100, children: [_jsx(HoverCardTrigger, { asChild: true, children: _jsx(Button, { asChild: Boolean(to), type: "button", variant: "ghost", size: "icon", className: "relative shrink-0", "aria-label": label, children: to ? _jsx(HubLink, { to: to, children: body }) : body }) }), _jsxs(HoverCardContent, { side: "bottom", align: "end", sideOffset: 6, animated: false, className: "w-80 overflow-hidden p-0", onEscapeKeyDown: () => setOpen(false), 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: t.raw('textf810ceed99d6') }), _jsx("span", { className: "tabular-nums", children: count })] }), _jsx(FadedScrollArea, { fadeColor: "from-popover", fadeSize: "6", className: "max-h-64 overscroll-contain", children: _jsx("ul", { className: "p-1 pt-0", children: requests.map((request) => (_jsx("li", { children: _jsxs("div", { className: "text-foreground flex min-h-9 items-center gap-2.5 px-2 py-1 text-sm", children: [_jsx(UserAvatar, { email: request.requester_email, size: "md" }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("span", { className: "truncate leading-tight", children: request.requester_email }), _jsxs("span", { className: "text-muted-foreground truncate text-xs leading-tight tabular-nums", children: [t.raw('text2d9e28289fac'), " ", relativeTime(request.created_at, locale)] })] })] }) }, request.request_id))) }) }), to ? (_jsx("div", { className: "border-border border-t p-1", children: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "w-full justify-center", children: _jsx(HubLink, { to: to, onClick: () => setOpen(false), children: t.raw('textaff0766a5290') }) }) })) : null] })] }) }, "access-requests-bell")) }));
 }

package/dist/workspace/home/first-chat.d.ts

@@ -1,5 +1,4 @@
 import { type ReactNode } from 'react';
-import type { HubTarget } from '../../internal/stores/account-panel-store.js';
 /**
  * "Your first chat with Kortix": what project home shows a new person instead
  * of its usual greeting, until they send their first message.
@@ -10,30 +9,18 @@ import type { HubTarget } from '../../internal/stores/account-panel-store.js';
  * composer already where it stays, so nothing jumps.
  *
  * The welcome is static text, and it stays: it is never replaced by a
- * session. Every send from here — typed, "Recommend tools", or "Update
- * memory" — starts a new session and opens it; coming back to project home
- * shows this welcome again.
+ * session. Every send from here starts a new session and opens it; coming
+ * back to project home shows this welcome again.
  *
- * The welcome reads as one short message: a greeting, one line of intro, then
- * the question as the label of the starter tiles it asks about. Two tiles act
- * in the product rather than filling the composer:
- * - "Invite teammate" opens the account hub's Access tab, only for someone who
- *   may manage members.
- * - "Connect Slack" runs the one-click Slack install in a popup and turns into
- *   a checked tile once the install lands.
+ * It reads as one short message: a greeting, one line of intro, then what
+ * Kortix can do — six items to read, not to click — and one line that points
+ * at the composer. A new project's composer holds "Onboard me" here
+ * (`project-home.tsx`); the agent's guided setup does the connecting and
+ * inviting the items describe.
  *
  * The welcome fades in once, over 300ms. It is opacity only, so reduced motion
  * needs no other variant.
  */
-export declare function FirstChat({ projectId, inviteTo, composer, busy, onRecommendTools, onUpdateMemory, }: {
-    projectId: string;
-    /** Where "Invite teammate" opens; `null` hides the tile (no permission, or
-     *  the project's account is still loading). */
-    inviteTo: HubTarget | null;
-    /** The docked composer. Project home owns its wiring. */
+export declare function FirstChat({ composer }: {
     composer: ReactNode;
-    /** A send is in flight: the starters wait with the composer. */
-    busy: boolean;
-    onRecommendTools: () => void;
-    onUpdateMemory: () => void;
 }): import("react").JSX.Element;

package/dist/workspace/home/first-chat.js

@@ -1,16 +1,21 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CheckCircleIcon, GrainsIcon, PlugsConnectedIcon, UserPlusIcon, } from '@phosphor-icons/react';
-import { useEffect, useId, useState } from 'react';
-import Loading from '../../primitives/loading.js';
-import { HubLink } from '../../internal/account-hub/account-hub-location.js';
-import { Slack } from '../../internal/icons/slack.js';
-import { useSlackInstall, useSlackMode } from '../../internal/hooks/channels/use-channels-installations.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AppWindowIcon, BriefcaseIcon, ChatsCircleIcon, ClockIcon, GrainsIcon, PlugsConnectedIcon, } from '@phosphor-icons/react';
+import { useId } from 'react';
 import { useUiViewer } from '../../providers/ui-provider.js';
 import { SESSION_TRANSCRIPT_CLASS } from '../../session/thread/session-transcript-class.js';
 import { useTranslations } from '../../i18n/index.js';
 import { cn } from '../../internal/lib/utils.js';
 import { firstNameOf } from './first-chat-name.js';
+/** What Kortix does, in the order a new person meets it. Keys under `firstChat.can`. */
+const CAPABILITIES = [
+    { key: 'work', icon: BriefcaseIcon },
+    { key: 'memory', icon: GrainsIcon },
+    { key: 'tools', icon: PlugsConnectedIcon },
+    { key: 'chat', icon: ChatsCircleIcon },
+    { key: 'schedule', icon: ClockIcon },
+    { key: 'apps', icon: AppWindowIcon },
+];
 /**
  * "Your first chat with Kortix": what project home shows a new person instead
  * of its usual greeting, until they send their first message.
@@ -21,81 +26,26 @@ import { firstNameOf } from './first-chat-name.js';
  * composer already where it stays, so nothing jumps.
  *
  * The welcome is static text, and it stays: it is never replaced by a
- * session. Every send from here — typed, "Recommend tools", or "Update
- * memory" — starts a new session and opens it; coming back to project home
- * shows this welcome again.
+ * session. Every send from here starts a new session and opens it; coming
+ * back to project home shows this welcome again.
  *
- * The welcome reads as one short message: a greeting, one line of intro, then
- * the question as the label of the starter tiles it asks about. Two tiles act
- * in the product rather than filling the composer:
- * - "Invite teammate" opens the account hub's Access tab, only for someone who
- *   may manage members.
- * - "Connect Slack" runs the one-click Slack install in a popup and turns into
- *   a checked tile once the install lands.
+ * It reads as one short message: a greeting, one line of intro, then what
+ * Kortix can do — six items to read, not to click — and one line that points
+ * at the composer. A new project's composer holds "Onboard me" here
+ * (`project-home.tsx`); the agent's guided setup does the connecting and
+ * inviting the items describe.
  *
  * The welcome fades in once, over 300ms. It is opacity only, so reduced motion
  * needs no other variant.
  */
-export function FirstChat({ projectId, inviteTo, composer, busy, onRecommendTools, onUpdateMemory, }) {
+export function FirstChat({ composer }) {
     const t = useTranslations('firstChat');
     const user = useUiViewer();
     const name = firstNameOf(user?.metadata);
     const headingId = useId();
-    const questionId = useId();
+    const canId = useId();
     return (_jsxs("div", { className: "relative z-10 flex min-h-0 flex-1 flex-col", children: [_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto", children: _jsxs("section", { "aria-labelledby": headingId, className: cn(SESSION_TRANSCRIPT_CLASS, 
                     // Below the floating sidebar toggle, and a little lower on wide
                     // screens where the column has room to breathe.
-                    'flex flex-col gap-10 pt-16 pb-8 lg:pt-24', 'transition-opacity duration-(--duration-slow) ease-out starting:opacity-0'), children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h1", { id: headingId, className: "text-foreground text-2xl font-medium tracking-tight text-balance", children: name ? t('greeting', { name }) : t('greetingNoName') }), _jsx("p", { className: "text-muted-foreground max-w-prose text-base leading-7 text-pretty", children: t('intro') })] }), _jsxs("div", { role: "group", "aria-labelledby": questionId, className: "flex flex-col gap-4", children: [_jsx("p", { id: questionId, className: "text-foreground text-base font-medium", children: t('question') }), _jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4", children: [_jsx(StarterTile, { icon: PlugsConnectedIcon, label: t('recommendTools'), disabled: busy, onClick: onRecommendTools }), _jsx(StarterTile, { icon: GrainsIcon, label: t('updateMemory'), disabled: busy, onClick: onUpdateMemory }), inviteTo && (_jsx(HubLink, { to: inviteTo, className: tileClass, children: _jsx(TileBody, { glyph: _jsx(UserPlusIcon, { className: "size-4" }), label: t('inviteTeammate') }) })), _jsx(SlackTile, { projectId: projectId })] })] })] }) }), composer] }));
-}
-const tileClass = cn('border-border bg-popover text-foreground relative flex h-30 w-auto flex-col justify-between rounded-md border p-4 text-left', 'transition-[background-color,border-color,scale] duration-(--duration-normal)', 'focus-visible:ring-kortix-base focus-visible:ring-[0.6px] focus-visible:outline-none', 'hover:border-primary/20  cursor-pointer active:scale-[0.97] motion-reduce:active:scale-100', 'disabled:pointer-events-none disabled:opacity-50', 'aria-disabled:pointer-events-none');
-/** The icon in its own chip at the top, the title at the bottom on one line. */
-function TileBody({ glyph, label, badge }) {
-    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "bg-muted text-foreground flex size-8 items-center justify-center rounded-sm", children: glyph }), _jsx("span", { className: "truncate text-sm leading-5 font-medium whitespace-nowrap", children: label }), badge && (_jsx("span", { "aria-hidden": true, className: "absolute top-4 right-4", children: badge }))] }));
-}
-/**
- * A square starter that fills the composer. The same tile shape as
- * onboarding's app grid, so the first screen after onboarding reads as its
- * continuation.
- */
-function StarterTile({ icon: Glyph, label, disabled, onClick, }) {
-    return (_jsx("button", { type: "button", disabled: disabled, onClick: onClick, className: tileClass, children: _jsx(TileBody, { glyph: _jsx(Glyph, { className: "size-4.5", "aria-hidden": true }), label: label }) }));
-}
-/** How long a popup install may take before the tile stops waiting on it. */
-const SLACK_WAIT_MS = 5 * 60_000;
-const SLACK_POLL_MS = 2_500;
-/**
- * One click installs Kortix into Slack: the popup opens inside the click, and
- * the tile polls the installation until it lands, then shows a check. With no
- * managed Slack app on this deployment (`oauth_available` false) the tile is
- * hidden; the custom-app setup lives on the Channels page.
- */
-function SlackTile({ projectId }) {
-    const t = useTranslations('firstChat');
-    const mode = useSlackMode(projectId);
-    const install = useSlackInstall(projectId);
-    const [waitingSince, setWaitingSince] = useState(null);
-    const connected = Boolean(install.data);
-    const waiting = waitingSince !== null && !connected;
-    const refetch = install.refetch;
-    useEffect(() => {
-        if (!waiting)
-            return;
-        const poll = setInterval(() => void refetch(), SLACK_POLL_MS);
-        const stop = setTimeout(() => setWaitingSince(null), SLACK_WAIT_MS);
-        return () => {
-            clearInterval(poll);
-            clearTimeout(stop);
-        };
-    }, [waiting, refetch]);
-    const installUrl = mode.data?.oauth_available ? mode.data.install_url : null;
-    if (!installUrl && !connected)
-        return null;
-    return (_jsx("button", { type: "button", "aria-disabled": connected || undefined, "aria-busy": waiting || undefined, "aria-label": connected ? t('slackConnected') : t('connectSlack'), onClick: () => {
-            if (connected || !installUrl)
-                return;
-            window.open(installUrl, 'kortix-slack-install', 'width=640,height=780,noopener');
-            setWaitingSince(Date.now());
-        }, className: cn(tileClass, connected && 'border-primary/40 bg-primary/[0.05] cursor-default'), children: _jsx(TileBody, { glyph: _jsx(Slack, { className: "size-4" }), label: connected ? t('slackConnected') : t('connectSlack'), badge: waiting ? (
-            // Inside a <button> the spinner defaults to `text-background`.
-            _jsx(Loading, { variant: "spokes", className: "text-foreground! size-4" })) : connected ? (_jsx(CheckCircleIcon, { weight: "fill", className: "text-foreground size-4" })) : null }) }));
+                    'flex flex-col gap-10 pt-16 pb-8 lg:pt-24', 'transition-opacity duration-(--duration-slow) ease-out starting:opacity-0'), children: [_jsxs("div", { className: "flex flex-col gap-3", children: [_jsx("h1", { id: headingId, className: "text-foreground text-2xl font-medium tracking-tight text-balance", children: name ? t('greeting', { name }) : t('greetingNoName') }), _jsx("p", { className: "text-muted-foreground max-w-prose text-base leading-7 text-pretty", children: t('intro') })] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx("h2", { id: canId, className: "text-foreground text-base font-medium", children: t('canTitle') }), _jsx("ul", { "aria-labelledby": canId, className: "grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3", children: CAPABILITIES.map(({ key, icon: Glyph }) => (_jsxs("li", { className: "border-border bg-popover flex flex-col gap-3 rounded-md border p-4", children: [_jsx("span", { className: "bg-muted text-foreground flex size-8 items-center justify-center rounded-sm", children: _jsx(Glyph, { className: "size-4", "aria-hidden": true }) }), _jsxs("span", { className: "flex flex-col gap-1", children: [_jsx("span", { className: "text-foreground text-sm leading-5 font-medium", children: t(`can.${key}.title`) }), _jsx("span", { className: "text-muted-foreground text-sm leading-5 text-pretty", children: t(`can.${key}.body`) })] })] }, key))) }), _jsx("p", { className: "text-muted-foreground text-sm leading-5 text-pretty", children: t('startHint') })] })] }) }), composer] }));
 }

package/dist/workspace/index.d.ts

@@ -20,6 +20,12 @@ export { useProjectHomeSend, type UseProjectHomeSendOptions } from './layout/use
 export { SavedSessionSkeleton } from './saved-session-skeleton.js';
 export { SessionLayout, SessionWorkspace, type SessionLayoutProps, type SessionWorkspaceProps, } from './session-workspace.js';
 export { ProjectSessionsView } from './sessions/project-sessions-view.js';
+export { SpaceView, type SpaceFolder, type SpaceTarget, type SpaceViewProps } from './spaces/space-view.js';
+export { ChannelGlyph } from './spaces/channel-glyph.js';
+export { agentLabel } from './spaces/space-timeline.js';
+export { MemoryView, type MemoryViewProps } from './memory/memory-view.js';
+export { type MemoryLayerRef, useMemoryPageHref } from '../internal/lib/memory-href.js';
+export { CompanyMemoryPage } from './memory/company-memory-page.js';
 export { ProjectSessionList } from './sidebar/project-session-list.js';
 export { ProjectSidebar } from './sidebar/project-sidebar.js';
 export { ShareSessionModal } from './sidebar/modal/share-session-modal.js';

package/dist/workspace/index.js

@@ -20,6 +20,12 @@ export { useProjectHomeSend } from './layout/use-project-home-send.js';
 export { SavedSessionSkeleton } from './saved-session-skeleton.js';
 export { SessionLayout, SessionWorkspace, } from './session-workspace.js';
 export { ProjectSessionsView } from './sessions/project-sessions-view.js';
+export { SpaceView } from './spaces/space-view.js';
+export { ChannelGlyph } from './spaces/channel-glyph.js';
+export { agentLabel } from './spaces/space-timeline.js';
+export { MemoryView } from './memory/memory-view.js';
+export { useMemoryPageHref } from '../internal/lib/memory-href.js';
+export { CompanyMemoryPage } from './memory/company-memory-page.js';
 export { ProjectSessionList } from './sidebar/project-session-list.js';
 export { ProjectSidebar } from './sidebar/project-sidebar.js';
 export { ShareSessionModal } from './sidebar/modal/share-session-modal.js';

package/dist/workspace/layout/project-home.d.ts

@@ -11,8 +11,14 @@ export interface ProjectHomeSendOptions extends ComposerOptions {
  * setup checklist.
  *
  * Until a new project's first message is sent, the column is the first chat
- * instead (`home/first-chat.tsx`, started by onboarding): the same composer,
- * docked at the bottom under a welcome from Kortix.
+ * instead (`home/first-chat.tsx`): the same composer, docked at the bottom
+ * under a welcome from Kortix.
+ *
+ * With `onboarding`, a project that is not onboarded yet redirects here, and
+ * the first chat's composer holds "Onboard me". It sends itself as soon as a
+ * model is usable; the agent runs the onboarding from there (the
+ * `kortix-onboarding` skill). Without a model the composer's tray offers
+ * Upgrade and Connect model.
  *
  * This component owns the composer's WIRING — which sandbox, which agent, what
  * a send carries, what a prefill does. Everything it renders is a component of
@@ -31,6 +37,12 @@ export type ProjectHomeProps = {
     busy?: boolean;
     /** With the default send: runs first; throw to refuse the send (the draft stays). */
     beforeSend?: () => Promise<void>;
+    /**
+     * A project that is not onboarded yet opens on the first chat, whose
+     * composer sends "Onboard me" once a model is usable. Off by default: a
+     * white-label or SDK host decides its own first run. Kortix web turns it on.
+     */
+    onboarding?: boolean;
 };
 /**
  * Self-contained: the composer and its pickers read the project from

package/dist/workspace/layout/project-home.js

@@ -1,21 +1,21 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { hubTarget } from '../../internal/stores/account-panel-store.js';
 import { useTranslations } from '../../i18n/index.js';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ComposerChatInput } from '../../session/composer/composer-chat-input.js';
 import { ComposerDropZone } from '../../session/composer/composer-drop-zone.js';
 import { SidebarToggle } from '../../internal/layout/sidebar-toggle.js';
 import { PROJECT_ACTIONS } from '../../internal/lib/project-actions.js';
 import { useIsMobile } from '../../internal/hooks/index.js';
-import { useProjectCan } from '../../internal/lib/use-project-can.js';
+import { useProjectCan, useProjectCans } from '../../internal/lib/use-project-can.js';
 import { useComposerPrefillStore } from '../../internal/stores/composer-prefill-store.js';
-import { isFirstChatRequested, useFirstChatPending } from '../../internal/stores/first-chat-store.js';
+import { firstChatHref, isFirstChatRequested, useFirstChatPending, useFirstChatStore, } from '../../internal/stores/first-chat-store.js';
 import { ProjectScope } from '../../internal/project-scope.js';
-import { useUiComponents, useUiSearchParams } from '../../providers/ui-provider.js';
-import { getProjectDetail, listProjectAccessRequests, listProjectSandboxes, } from '@kortix/sdk';
-import { contract, qk } from '@kortix/sdk/react';
+import { useUiComponents, useUiRouter, useUiSearchParams } from '../../providers/ui-provider.js';
+import { getProjectDetail, listProjectAccessRequests, listProjectSandboxes, setProjectOnboardingComplete, } from '@kortix/sdk';
+import { contract, invalidateProject, qk } from '@kortix/sdk/react';
 import { META_SANDBOX_SLUG, isMetaAgentName } from '../../_vendor/kortix-shared.js';
 import { AccessRequestsBell } from '../home/access-requests-bell.js';
 import { notificationCenterOn } from '../../internal/hooks/use-notification-center.js';
@@ -26,6 +26,11 @@ import { useProjectHomeSend } from './use-project-home-send.js';
 // This path is this view's public surface — the instant session shell and the
 // IAM tests already import from here, so the moved pieces keep their address.
 export { ProjectHomeWelcomeBody } from '../home/welcome-body.js';
+/** What finishing the onboarding takes. Module-level: the batch key needs a stable list. */
+const ONBOARDING_ACTIONS = [
+    PROJECT_ACTIONS.PROJECT_SETTINGS_WRITE,
+    PROJECT_ACTIONS.PROJECT_SESSION_START,
+];
 /**
  * Self-contained: the composer and its pickers read the project from
  * `SessionIdsProvider`, so the home provides it for its own subtree.
@@ -33,7 +38,7 @@ export { ProjectHomeWelcomeBody } from '../home/welcome-body.js';
 export function ProjectHome(props) {
     return (_jsx(ProjectScope, { projectId: props.projectId, children: _jsx(ProjectHomeView, { ...props }) }));
 }
-function ProjectHomeView({ projectId, onSend, busy, beforeSend, }) {
+function ProjectHomeView({ projectId, onSend, busy, beforeSend, onboarding: onboardingEnabled = false, }) {
     const defaultSend = useProjectHomeSend(projectId, { beforeSend });
     const { HomeAnnouncement } = useUiComponents();
     const send = onSend ?? defaultSend.send;
@@ -45,7 +50,9 @@ function ProjectHomeView({ projectId, onSend, busy, beforeSend, }) {
     // home, which "New session" opens, stays the normal home.
     const searchParams = useUiSearchParams();
     const firstChatPending = useFirstChatPending(projectId);
-    const firstChat = firstChatPending && isFirstChatRequested(searchParams);
+    const firstChatRequested = isFirstChatRequested(searchParams);
+    const router = useUiRouter();
+    const queryClient = useQueryClient();
     const [selectedSlug, setSelectedSlug] = useState(null);
     const [selectedAgent, setSelectedAgent] = useState(null);
     const [prefill, setPrefill] = useState(null);
@@ -83,7 +90,6 @@ function ProjectHomeView({ projectId, onSend, busy, beforeSend, }) {
         ...contract('inventory'),
         refetchOnWindowFocus: false,
     });
-    const pendingAccessCount = accessRequests.data?.requests.length ?? 0;
     // Same query key page.tsx (`ProjectIndexPage`) already fetches for this
     // project — this dedupes against that cache entry rather than firing a
     // second request. Needed here only to resolve `account_id` for the pending
@@ -97,10 +103,37 @@ function ProjectHomeView({ projectId, onSend, busy, beforeSend, }) {
         ...contract('config'),
     });
     const accountId = projectDetailQuery.data?.project?.account_id;
-    // The onboarding wizard opens over this page until the project is stamped
-    // (`project-shell.tsx`); the promo waits for the stamp (KRTX-2378).
+    // The promo waits for the onboarding stamp (KRTX-2378).
     const onboarded = Boolean(projectDetailQuery.data?.project?.metadata
         ?.onboarding_completed_at);
+    // Only someone who can finish the onboarding is sent into it: the kickoff
+    // starts a session (project.session.start) and the stamp,
+    // `PATCH /projects/:id/onboarding`, asserts project.settings.write. A role
+    // missing either would auto-send a kickoff whose stamp is refused, and get
+    // the onboarding again on every visit. `=== true`: an unresolved probe
+    // never redirects someone the onboarding is not for.
+    const onboardingCans = useProjectCans(projectId, ONBOARDING_ACTIONS);
+    const canSetUpProject = ONBOARDING_ACTIONS.every((action) => onboardingCans[action]?.allowed === true);
+    const onboarding = onboardingEnabled && projectDetailQuery.isSuccess && !onboarded && canSetUpProject;
+    // The onboarding lands on the first chat: it starts the chat (the sidebar
+    // row) and moves the address to it. Rendered as the first chat from this
+    // render on, so the usual home never paints in between.
+    useEffect(() => {
+        if (!onboarding)
+            return;
+        useFirstChatStore.getState().start(projectId);
+        if (!firstChatRequested)
+            router.replace(firstChatHref(projectId));
+    }, [onboarding, firstChatRequested, projectId, router]);
+    const firstChat = (firstChatPending && firstChatRequested) || onboarding;
+    // Once per mount: a second prefill id would send a second kickoff.
+    const kickoffQueuedRef = useRef(false);
+    useEffect(() => {
+        if (!onboarding || kickoffQueuedRef.current)
+            return;
+        kickoffQueuedRef.current = true;
+        setPrefill({ text: tFirstChat('kickoff'), id: Date.now(), submit: 'when-ready' });
+    }, [onboarding, tFirstChat]);
     // Resolved during render so the bell is an anchor and Next holds its payload
     // in the segment cache. `account_id` arrives on a different query than the
     // count, so the bell can paint before the destination exists.
@@ -108,16 +141,27 @@ function ProjectHomeView({ projectId, onSend, busy, beforeSend, }) {
         ? hubTarget(accountId, { tab: 'access-projects', project: projectId })
         : null;
     const handleSend = useCallback((text, files, options, attachments) => {
-        const sent = send(text, files, {
+        const sent = Promise.resolve(send(text, files, {
             ...options,
             ...(metaSelected
                 ? { sandbox_slug: META_SANDBOX_SLUG }
                 : selectedSlug
                     ? { sandbox_slug: selectedSlug }
                     : {}),
-        }, attachments);
+        }, attachments));
+        // The first send opened a session: the project is onboarded. Stamped
+        // only after the create resolves, so a refused send keeps the
+        // onboarding for the next visit.
+        if (onboarding) {
+            // Spent: a composer mounted later must not apply it again.
+            setPrefill(null);
+            void sent
+                .then(() => setProjectOnboardingComplete(projectId, true))
+                .then(() => invalidateProject(queryClient, projectId))
+                .catch(() => undefined);
+        }
         return sent;
-    }, [metaSelected, selectedSlug, send]);
+    }, [metaSelected, selectedSlug, send, onboarding, projectId, queryClient]);
     const isMobile = useIsMobile();
     const pendingPrefill = useComposerPrefillStore((s) => s.prefillByProject[projectId]);
     const consumePrefill = useComposerPrefillStore((s) => s.consume);
@@ -186,10 +230,5 @@ function ProjectHomeView({ projectId, onSend, busy, beforeSend, }) {
     return (
     // A file dropped anywhere on the page attaches to the composer, as on a
     // session page.
-    _jsxs(ComposerDropZone, { className: "bg-background relative flex min-h-0 flex-1 flex-col overflow-hidden lg:px-4.5", children: [_jsx(ProjectHomeWallpaper, {}), _jsx(SidebarToggle, { placement: "floating" }), _jsx(AccessRequestsBell, { count: pendingAccessCount, to: accessRequestsTo, notificationCenter: notificationCenterOn(projectDetailQuery.data?.project) }), firstChatPending || !onboarded || !HomeAnnouncement ? null : _jsx(HomeAnnouncement, {}), firstChat ? (_jsx(FirstChat, { projectId: projectId, inviteTo: canManageMembers ? accessRequestsTo : null, composer: composer, busy: creating, 
-                // Both starters send at once, each into a new session. Through the
-                // composer's own submit, not `sendOutsideComposer`: the send carries
-                // the agent and model the composer shows, and a missing model refuses
-                // it the same way a typed message is refused.
-                onRecommendTools: () => setPrefill({ text: tFirstChat('toolsPrompt'), id: Date.now(), submit: true }), onUpdateMemory: () => setPrefill({ text: tFirstChat('memoryPrompt'), id: Date.now(), submit: true }) })) : (_jsx(ProjectHomeWelcomeBody, { projectId: projectId, onPickSuggestion: applySuggestion, composer: composer }))] }));
+    _jsxs(ComposerDropZone, { className: "bg-background relative flex min-h-0 flex-1 flex-col overflow-hidden lg:px-4.5", children: [_jsx(ProjectHomeWallpaper, {}), _jsx(SidebarToggle, { placement: "floating" }), _jsx(AccessRequestsBell, { requests: accessRequests.data?.requests ?? [], to: accessRequestsTo, notificationCenter: notificationCenterOn(projectDetailQuery.data?.project) }), firstChatPending || !onboarded || !HomeAnnouncement ? null : _jsx(HomeAnnouncement, {}), firstChat ? (_jsx(FirstChat, { composer: composer })) : (_jsx(ProjectHomeWelcomeBody, { projectId: projectId, onPickSuggestion: applySuggestion, composer: composer }))] }));
 }

package/dist/workspace/layout/use-project-home-send.d.ts

@@ -7,6 +7,14 @@ export interface UseProjectHomeSendOptions {
      * apps/web checks the account's billing state here.
      */
     beforeSend?: () => Promise<void>;
+    /**
+     * A channel or DM composer: file each send in this space as a new thread.
+     * The page stays: `onOpen(sessionId)` runs instead of the navigation.
+     */
+    space?: {
+        spaceId: string;
+        onOpen: (sessionId: string) => void;
+    };
 }
 /**
  * The project home composer's send: create the session (with the prompt as
@@ -14,7 +22,7 @@ export interface UseProjectHomeSendOptions {
  * message on its first frame. `ProjectHome` uses it when the host passes no
  * `onSend`.
  */
-export declare function useProjectHomeSend(projectId: string, { beforeSend }?: UseProjectHomeSendOptions): {
+export declare function useProjectHomeSend(projectId: string, { beforeSend, space }?: UseProjectHomeSendOptions): {
     send: (text: string, files: AttachedFile[] | undefined, options?: ProjectHomeSendOptions, attachments?: AttachmentSubmission) => Promise<void>;
     sending: boolean;
 };