@kortix/ui 0.14.8 → 0.14.9

package/dist/workspace/spaces/space-timeline-view.js

@@ -0,0 +1,235 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useProjectSessions } from '@kortix/sdk/react';
+import { CaretRightIcon, ChatTeardropTextIcon, LightningIcon, LinkSimpleIcon, PulseIcon, TimerIcon, WebhooksLogoIcon, } from '@phosphor-icons/react';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useLocale, useTranslations } from '../../i18n/index.js';
+import { AgentMark } from '../../internal/components/agent-mark.js';
+import { useSessionNeedsYouCounts, useSessionsAwaitingAnswer } from '../../internal/hooks/use-review-session-summary.js';
+import { useCopy } from '../../internal/hooks/use-copy.js';
+import { relativeTime } from '../../internal/lib/relative-time.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from '../../primitives/button.js';
+import { EntityAvatar } from '../../primitives/entity-avatar.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import Hint from '../../primitives/hint.js';
+import Loading from '../../primitives/loading.js';
+import { UserAvatar } from '../../primitives/user-avatar.js';
+import { sessionDisplayLabel, sessionDisplayStatus } from '../../session/actions/session-label.js';
+import { participantLabel } from '../../session/participants/session-participants.js';
+import { MESSAGE_TEXT_CLASS, MessageRow } from '../../session/turn/message-row.js';
+import { SolidCheckIcon } from '../../internal/icons/solid-check-icon.js';
+import { RememberThisButton } from '../memory/remember-this.js';
+import { SessionStatusMark } from '../sidebar/session-status-mark.js';
+import { agentLabel, buildSpaceTimeline, DEFAULT_AGENT_SLUG, dayKind, firstPromptTruncated, gutterTime, lastReplyLabel, threadIsWorking, threadMessageText, threadStatus, } from './space-timeline.js';
+/**
+ * The sidebar session list's needs-you read (`useSessionNeedsYouCounts`,
+ * `useSessionsAwaitingAnswer`), as one lookup per thread: the Threads filter's
+ * "Needs you" (`threadStatus`) and the row's mark agree by construction.
+ */
+function useThreadNeedsYou(projectId) {
+    const counts = useSessionNeedsYouCounts(projectId);
+    const awaitingAnswer = useSessionsAwaitingAnswer(projectId);
+    return (session) => threadStatus(session, counts[session.session_id]) !== 'needs-you'
+        ? null
+        : awaitingAnswer.has(session.session_id)
+            ? 'answer'
+            : 'review';
+}
+/**
+ * The space's threads: top-level sessions only (`parent: 'root'`, a child
+ * thread is part of its parent). Polls page one every 5 s while an agent works
+ * so the "is working" line settles, else every 15 s so a member's new thread
+ * shows up. Active threads sort first, so page one holds them; older pages the
+ * viewer loaded are not re-read on each tick. `filters` narrow it on the
+ * server (the Threads tab); without them it is the Chat tab's list, one cache
+ * entry for both tabs.
+ */
+export function useSpaceThreads(projectId, spaceId, filters) {
+    return useProjectSessions(projectId, {
+        ...filters,
+        spaceId,
+        parent: 'root',
+        enabled: !!spaceId,
+        refetchInterval: (sessions) => (sessions.some(threadIsWorking) ? 5_000 : 15_000),
+        pollFirstPageOnly: true,
+    });
+}
+function ThreadsLoadError({ threads }) {
+    const t = useTranslations('spaces.view');
+    return (_jsx(ErrorState, { size: "sm", title: t('threadsLoadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => threads.refetch(), children: t('retry') }) }));
+}
+/** "Load earlier threads", at the top of either list while older pages exist. */
+function LoadEarlier({ threads }) {
+    const t = useTranslations('spaces.view');
+    return (_jsx("div", { className: "flex justify-center px-5 py-2", children: _jsx(Button, { variant: "ghost", size: "sm", onClick: () => threads.fetchNextPage(), disabled: threads.isFetchingNextPage, "aria-busy": threads.isFetchingNextPage || undefined, children: t('loadEarlier') }) }));
+}
+/**
+ * The Chat tab: the welcome block, then one row per thread, oldest at the top,
+ * grouped under day dividers. The column is reversed, so it opens scrolled to
+ * the newest thread and stays there as threads arrive.
+ */
+export function SpaceTimeline({ projectId, space, threads, selectedId, onOpenThread, }) {
+    const t = useTranslations('spaces.view');
+    const locale = useLocale();
+    const days = useMemo(() => buildSpaceTimeline(threads.sessions), [threads.sessions]);
+    const loading = threads.isLoading || threads.isScanning;
+    const needsYou = useThreadNeedsYou(projectId);
+    const now = new Date();
+    const dayLabel = (day) => {
+        const kind = dayKind(day.date, now);
+        if (kind === 'today')
+            return t('today');
+        if (kind === 'yesterday')
+            return t('yesterday');
+        return day.date.toLocaleDateString(locale, { weekday: 'long', month: 'long', day: 'numeric' });
+    };
+    // A channel with no thread yet: the welcome at the bottom, where it always sits.
+    if (space.kind === 'channel' && !loading && threads.data && !threads.hasNextPage && days.length === 0) {
+        return (_jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children: _jsx("div", { className: "mt-auto pt-4 pb-3", children: _jsx(SpaceWelcome, { space: space, empty: true }) }) }));
+    }
+    return (_jsx("div", { className: "flex min-h-0 flex-1 flex-col-reverse overflow-y-auto", children: _jsx("div", { className: "pt-4 pb-3", children: threads.isError && !threads.data ? (_jsx("div", { className: "px-5 py-8", children: _jsx(ThreadsLoadError, { threads: threads }) })) : loading ? null : (_jsxs(_Fragment, { children: [threads.hasNextPage ? (_jsx(LoadEarlier, { threads: threads })) : (_jsx(SpaceWelcome, { space: space, empty: days.length === 0 })), days.map((day) => (_jsxs("section", { "aria-label": dayLabel(day), children: [_jsx(DayDivider, { label: dayLabel(day) }), day.threads.map((session) => (_jsx(ThreadRow, { session: session, space: space, needsYou: needsYou(session), selected: session.session_id === selectedId, onOpen: () => onOpenThread(session.session_id) }, session.session_id)))] }, day.date.getTime())))] })) }) }));
+}
+/** The top of the history: "Welcome to #name" for a channel, the DM's agent for a DM. */
+function SpaceWelcome({ space, empty }) {
+    const t = useTranslations('spaces.view');
+    if (space.kind === 'dm' && space.dm_agent_name) {
+        const agent = agentLabel(space.dm_agent_name);
+        return (_jsxs("div", { className: "space-y-3 px-5 pt-16 pb-6", children: [_jsx(AgentMark, { slug: space.dm_agent_name, size: 42, label: agent }), _jsxs("div", { className: "space-y-1.5", children: [_jsx("h2", { className: "text-2xl font-semibold tracking-tight text-balance", children: agent }), _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: t('dmIntro', { agent }) })] })] }));
+    }
+    const name = space.slug ?? space.name;
+    return (_jsxs("div", { className: "space-y-1.5 px-5 pt-16 pb-6", children: [_jsx("h2", { className: "text-2xl font-semibold tracking-tight text-balance", children: t('welcomeTitle', { name }) }), _jsx("p", { className: "text-muted-foreground text-sm text-pretty", children: space.description || t(empty ? 'welcomeEmpty' : 'welcomeStart', { name }) })] }));
+}
+/** A centred pill on a hairline: "Today", "Yesterday", "Thursday, October 15". */
+function DayDivider({ label }) {
+    return (_jsxs("div", { className: "relative flex items-center justify-center py-2", "aria-hidden": true, children: [_jsx("div", { className: "bg-border absolute inset-x-0 top-1/2 h-px" }), _jsx("span", { className: "bg-background text-foreground relative rounded-full border px-3 py-0.5 text-xs font-medium", children: label })] }));
+}
+/** The trigger form's glyph per trigger type: a schedule, a webhook, an app event, a monitor. */
+const TRIGGER_TYPE_ICONS = {
+    cron: TimerIcon,
+    webhook: WebhooksLogoIcon,
+    event: LightningIcon,
+    monitor: PulseIcon,
+};
+/**
+ * A thread a trigger started: the trigger's name (stamped at fire time, else
+ * its slug) and the glyph of its type. Null for any other thread.
+ */
+function triggerAuthor(session) {
+    if (session.initiator?.type !== 'trigger')
+        return null;
+    const meta = (session.metadata ?? {});
+    const name = typeof meta.trigger_name === 'string' && meta.trigger_name ? meta.trigger_name : session.initiator.label;
+    if (!name)
+        return null;
+    const type = typeof meta.trigger_type === 'string' ? meta.trigger_type : '';
+    return { name, icon: TRIGGER_TYPE_ICONS[type] ?? LightningIcon };
+}
+/**
+ * One thread as a message: the author's avatar and name, the time, the first
+ * prompt, and the "N replies" line that opens the thread. Every thread shows
+ * its author: a new thread is a new top-level message.
+ */
+function ThreadRow({ session, space, needsYou, selected, onOpen, }) {
+    const t = useTranslations('spaces.view');
+    const locale = useLocale();
+    const created = new Date(session.created_at);
+    // A trigger's run reads as the trigger: its name and its type's glyph.
+    const trigger = triggerAuthor(session);
+    // A trigger or an API key starts a thread as a service account: an agent tile, not a person.
+    const machine = trigger !== null || session.owner_type === 'service_account';
+    // The profile name, never a raw email (`participantLabel`).
+    const name = trigger
+        ? trigger.name
+        : machine
+            ? agentLabel(session.owner_name || t('agentFallback'))
+            : participantLabel({ name: session.owner_name ?? null, email: session.owner_email ?? null }) ||
+                t('authorFallback');
+    return (_jsxs(MessageRow, { selected: selected, avatar: machine ? (trigger ? (_jsx(EntityAvatar, { icon: trigger.icon, label: name, size: "lg" })) : (_jsx(AgentMark, { slug: session.agent_name ?? space.dm_agent_name ?? DEFAULT_AGENT_SLUG, size: 28, 
+            // 36px, the `lg` avatar column (`w-10`): the 40px tile would overflow it.
+            tile: 36, label: name }))) : (_jsx(UserAvatar, { email: session.owner_email ?? '', name: name, avatarUrl: session.owner_avatar_url, size: "lg" })), name: name, time: {
+            iso: session.created_at,
+            label: created.toLocaleTimeString(locale, { hour: 'numeric', minute: '2-digit' }),
+            gutter: gutterTime(created, locale),
+            title: created.toLocaleString(locale, { dateStyle: 'full', timeStyle: 'short' }),
+        }, toolbar: _jsxs(_Fragment, { children: [_jsx(ThreadToolbar, { sessionId: session.session_id, onOpen: onOpen }), _jsx(RememberThisButton, { session: session, space: space })] }), children: [_jsx(ThreadPrompt, { session: session, onOpen: onOpen }), _jsx(ThreadSummary, { session: session, space: space, needsYou: needsYou, onOpen: onOpen })] }));
+}
+/**
+ * The thread's first prompt, clamped to 6 lines with "…". When it runs longer,
+ * a quiet "Show more" unfolds it in place and "Show less" folds it back. A
+ * prompt the server cut (`firstPromptTruncated`) ends in "…", and its "Show
+ * more" opens the thread, whose transcript holds the whole message.
+ */
+function ThreadPrompt({ session, onOpen }) {
+    const t = useTranslations('hardcodedUi.i18nComplete');
+    const truncated = firstPromptTruncated(session);
+    const text = threadMessageText(session);
+    const [expanded, setExpanded] = useState(false);
+    const [overflows, setOverflows] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        const el = ref.current;
+        if (!el || expanded)
+            return;
+        const measure = () => setOverflows(el.scrollHeight > el.clientHeight + 1);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(el);
+        return () => observer.disconnect();
+    }, [text, expanded]);
+    return (_jsxs(_Fragment, { children: [_jsx("p", { ref: ref, className: cn(MESSAGE_TEXT_CLASS, 'text-pretty whitespace-pre-wrap wrap-anywhere', !expanded && 'line-clamp-6'), children: truncated ? `${text}…` : text }), truncated || overflows || expanded ? (_jsx("button", { type: "button", "aria-expanded": truncated ? undefined : expanded, onClick: truncated ? onOpen : () => setExpanded(!expanded), className: "text-muted-foreground hover:text-foreground hit-area-x-2 hit-area-y-2 focus-visible:ring-ring mt-0.5 self-start rounded-sm text-xs font-medium transition-colors duration-(--duration-fast) focus-visible:ring-2 focus-visible:outline-none", children: expanded ? t.raw('text94ea9b1d33a0') : t.raw('textf5c9bd131486') })) : null] }));
+}
+/**
+ * The line under a message: the answering agent's tile, then "3 replies  Last
+ * reply 2 hours ago", or "<Agent> is working…" while a turn runs. Hovering the
+ * line fills it and swaps the time for "View thread ›", so the whole line reads
+ * as the way in. A thread with no counted reply shows the tile and "View
+ * thread" only: the row's own time already says when it started.
+ */
+function ThreadSummary({ session, space, needsYou, onOpen, }) {
+    const t = useTranslations('spaces.view');
+    const tf = useTranslations('spaces.view.threadFilter');
+    const locale = useLocale();
+    const agentName = session.agent_name ?? space.dm_agent_name;
+    const agent = agentName ? agentLabel(agentName) : t('agentFallback');
+    const working = threadIsWorking(session);
+    const replies = session.reply_count ?? 0;
+    return (_jsxs("button", { type: "button", onClick: onOpen, 
+        // `-mx-1` with `pl-1`: the tile lines up with the body text above, and
+        // the fill extends past it. `pr-1.5`: the caret sits inside the fill,
+        // not on its edge. `w-full max-w-md`: the target is the line, not only
+        // its words, and stops before the line runs the width of a wide window.
+        // The fill is instant, like the row's.
+        className: "group/summary hover:bg-hover focus-visible:ring-ring -mx-1 mt-1 flex w-full max-w-md items-center gap-2 rounded-md py-1 pr-1.5 pl-1 text-left text-xs outline-none focus-visible:ring-2", children: [_jsx(AgentMark, { slug: agentName ?? DEFAULT_AGENT_SLUG, size: 14, label: agent }), needsYou ? (_jsxs("span", { className: "text-foreground flex shrink-0 items-center gap-1 font-medium", children: [_jsx(SessionStatusMark, { status: "needs-you", waitingOn: needsYou }), tf('statusValue.needsYou')] })) : null, working && !needsYou ? (_jsxs("span", { className: "text-muted-foreground flex min-w-0 items-center gap-1.5", children: [_jsx(Loading, { className: "in-[button]:text-muted-foreground size-3.5 shrink-0" }), _jsx("span", { className: "truncate", children: t('working', { agent }) })] })) : (_jsxs(_Fragment, { children: [replies > 0 ? (_jsx("span", { className: "text-foreground shrink-0 font-semibold tabular-nums", children: t('replies', { count: replies }) })) : null, _jsx("span", { className: cn('text-muted-foreground min-w-0 truncate', replies > 0 && 'group-hover/summary:hidden group-focus-visible/summary:hidden'), children: replies > 0 ? t('lastReply', { time: lastReplyLabel(session, locale) }) : t('openThread') }), replies > 0 ? (_jsx("span", { className: "text-muted-foreground hidden min-w-0 truncate group-hover/summary:inline group-focus-visible/summary:inline", children: t('openThread') })) : null] })), _jsx(CaretRightIcon, { "aria-hidden": true, className: "text-muted-foreground ml-auto size-3.5 shrink-0 opacity-0 group-hover/summary:opacity-100 group-focus-visible/summary:opacity-100" })] }));
+}
+/** The row's floating actions: reply in the thread (labelled), copy the thread's link. */
+function ThreadToolbar({ sessionId, onOpen }) {
+    const t = useTranslations('spaces.view');
+    const { copied, copy } = useCopy({ toast: false });
+    const copyLink = () => {
+        const url = new URL(window.location.href);
+        url.search = '';
+        url.searchParams.set('thread', sessionId);
+        void copy(url.toString());
+    };
+    const linkLabel = copied ? t('linkCopied') : t('copyLink');
+    return (_jsxs(_Fragment, { children: [_jsx(Hint, { label: t('replyInThread'), side: "top", children: _jsxs(Button, { variant: "ghost", size: "xs", "aria-label": t('replyInThread'), onClick: onOpen, className: "gap-1 rounded-md text-xs", children: [_jsx(ChatTeardropTextIcon, { className: "size-3.5 shrink-0" }), t('reply')] }) }), _jsx(Hint, { label: linkLabel, side: "top", children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": linkLabel, onClick: copyLink, children: copied ? _jsx(SolidCheckIcon, { className: "size-3.5 shrink-0" }) : _jsx(LinkSimpleIcon, { className: "size-3.5 shrink-0" }) }) })] }));
+}
+/**
+ * The Threads tab's rows, last activity first. `sessions` are the rows to
+ * show (the tab filters `threads`); `empty` is drawn when there are none.
+ */
+export function SpaceThreadList({ projectId, threads, sessions, empty, selectedId, onOpenThread, }) {
+    const locale = useLocale();
+    const needsYou = useThreadNeedsYou(projectId);
+    const sorted = useMemo(() => [...sessions].sort((a, b) => Date.parse(b.updated_at) - Date.parse(a.updated_at)), [sessions]);
+    if (threads.isError && !threads.data) {
+        return (_jsx("div", { className: "px-5 py-8", children: _jsx(ThreadsLoadError, { threads: threads }) }));
+    }
+    if (threads.isLoading || threads.isScanning)
+        return null;
+    if (sorted.length === 0) {
+        return (_jsxs("div", { className: "flex min-h-full flex-col", children: [empty, threads.hasNextPage ? _jsx(LoadEarlier, { threads: threads }) : null] }));
+    }
+    return (_jsxs("div", { className: "py-2", children: [_jsx("ul", { children: sorted.map((session) => (_jsx("li", { children: _jsxs("button", { type: "button", onClick: () => onOpenThread(session.session_id), className: cn('hover:bg-hover focus-visible:ring-ring flex w-full items-center gap-3 px-5 py-2 text-left outline-none focus-visible:ring-2 focus-visible:ring-inset', session.session_id === selectedId && 'bg-active hover:bg-active'), children: [_jsx(SessionStatusMark, { status: needsYou(session) ? 'needs-you' : sessionDisplayStatus(session), waitingOn: needsYou(session) ?? undefined }), _jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: sessionDisplayLabel(session) }), _jsx("time", { dateTime: session.updated_at, className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: relativeTime(session.updated_at, locale) })] }) }, session.session_id))) }), threads.hasNextPage ? _jsx(LoadEarlier, { threads: threads }) : null] }));
+}

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

@@ -0,0 +1,106 @@
+import type { ProjectSession } from '@kortix/sdk';
+export interface TimelineDay {
+    /** Local midnight of the day. */
+    date: Date;
+    /**
+     * Every thread is a new top-level message, so each one shows its author's
+     * avatar and name: no grouping between threads, even from one author.
+     */
+    threads: ProjectSession[];
+}
+/**
+ * A space's threads as the Chat tab draws them: oldest first, one group per
+ * local day. The server lists by last activity, so the order is set here.
+ */
+export declare function buildSpaceTimeline(sessions: readonly ProjectSession[]): TimelineDay[];
+/** Which label a day divider takes. */
+export declare function dayKind(date: Date, now: Date): 'today' | 'yesterday' | 'earlier';
+/**
+ * A collapsed row's time in the avatar gutter: hour and minute without the day
+ * period ("2:13", not "2:13 PM"), so it fits one avatar's width. The row's
+ * `title` carries the full time.
+ */
+export declare function gutterTime(date: Date, locale: string): string;
+/** "12 hours ago": the thread's last activity. */
+export declare function lastReplyLabel(session: ProjectSession, locale: string, now?: number): string;
+/**
+ * `reply_count` from a thread's loaded transcript, by the server's rule
+ * (`apps/api/.../session-reply-counts.ts`): every person message after the
+ * first, plus one per person message the agent answered.
+ */
+export declare function liveReplyCount(roles: readonly string[]): number;
+/** The agent is on it: a turn runs, the first prompt waits for delivery, or the computer starts. */
+export declare function threadIsWorking(session: ProjectSession): boolean;
+/** The thread's top message: its first prompt as the person wrote it, else its title. */
+export declare function threadMessageText(session: ProjectSession): string;
+/**
+ * The server stores a thread's first prompt cut at this length
+ * (`FIRST_PROMPT_MAX_CHARS` in `apps/api/src/projects/lib/project-spaces.ts`).
+ */
+export declare const SERVER_FIRST_PROMPT_MAX_CHARS = 500;
+/**
+ * The server cut the first prompt: the row shows "…" and its "Show more"
+ * opens the thread, whose transcript holds the whole message. A prompt of
+ * exactly the limit reads as cut too, and opening its thread is harmless.
+ */
+export declare function firstPromptTruncated(session: ProjectSession): boolean;
+/** The agent whose mark stands in when a row does not name its agent. */
+export declare const DEFAULT_AGENT_SLUG = "kortix";
+/** An agent's display name: the sidebar's DM row and the space view say it the same way. */
+export declare function agentLabel(name: string): string;
+/** A person who started a thread in the space, as the thread list names them. */
+export interface SpacePerson {
+    id: string;
+    name: string | null;
+    email: string | null;
+    avatarUrl: string | null;
+    /** How many of the loaded threads this person started. */
+    threads: number;
+}
+/**
+ * Who is in a space, as far as its loaded threads tell: the people who
+ * started a thread, and the agents that answered one, each with how many of
+ * those threads it was. No roster API exists yet, so the header says "in these
+ * threads", not "members".
+ */
+export declare function spaceRoster(sessions: readonly ProjectSession[], dmAgentName?: string | null): {
+    people: SpacePerson[];
+    agents: string[];
+    agentThreads: Record<string, number>;
+};
+/** A channel's tabs, in order. `?tab=` names one; Chat has no param. */
+declare const CHANNEL_TABS: readonly ["chat", "threads", "files", "memory", "apps", "links", "triggers"];
+export type SpaceTab = (typeof CHANNEL_TABS)[number];
+export declare function spaceTabs(kind: 'channel' | 'dm'): readonly SpaceTab[];
+/** The `?tab=` value as a tab of this kind of space; anything else is Chat. */
+export declare function spaceTabFromParam(value: string | null, kind: 'channel' | 'dm'): SpaceTab;
+/** The Threads tab's Status filter: the states a thread row shows. */
+export declare const THREAD_STATUSES: readonly ["working", "needs-you", "failed", "done"];
+export type ThreadStatus = (typeof THREAD_STATUSES)[number];
+/** The Threads tab's Activity filter: the last activity on or after a local day. */
+export declare const THREAD_ACTIVITIES: readonly ["today", "last7", "last30"];
+export type ThreadActivity = (typeof THREAD_ACTIVITIES)[number];
+/**
+ * The Threads tab's search and filters, as the URL holds them
+ * (`?q=&status=&by=&agent=&active=`). `by` is `me` or a user id. A DM has
+ * one person and one agent, so it reads no `by` or `agent`.
+ */
+export interface ThreadFilters {
+    q: string;
+    status: ThreadStatus | null;
+    by: string | null;
+    agent: string | null;
+    active: ThreadActivity | null;
+}
+export declare function threadFiltersFromParams(params: {
+    get(name: string): string | null;
+}, kind: 'channel' | 'dm'): ThreadFilters;
+/**
+ * The start of an Activity window: local midnight today, 6 days earlier
+ * (7 days with today) or 29 days earlier. A day boundary, so the list's query
+ * stays the same all day.
+ */
+export declare function threadActivitySince(active: ThreadActivity, now: Date): string;
+/** A thread's Status filter value. A pending review wins; a turn in flight is Working. */
+export declare function threadStatus(session: ProjectSession, reviewCount?: number): ThreadStatus;
+export {};

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

@@ -0,0 +1,183 @@
+import { capitalizeWords, isMetaAgentName, META_AGENT_DISPLAY_NAME } from '../../_vendor/kortix-shared.js';
+import { relativeTime } from '../../internal/lib/relative-time.js';
+import { sessionDisplayLabel, sessionDisplayStatus } from '../../session/actions/session-label.js';
+import { parseAgentMentionReferences, parseFileMentionReferences, parseFileReferences, parseSessionReferences, stripReplyContexts, } from '../../session/thread/message-parsing.js';
+function localDay(time) {
+    const date = new Date(time);
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+}
+/**
+ * A space's threads as the Chat tab draws them: oldest first, one group per
+ * local day. The server lists by last activity, so the order is set here.
+ */
+export function buildSpaceTimeline(sessions) {
+    const sorted = [...sessions].sort((a, b) => Date.parse(a.created_at) - Date.parse(b.created_at));
+    const days = [];
+    for (const session of sorted) {
+        const date = localDay(Date.parse(session.created_at));
+        let day = days.at(-1);
+        if (!day || day.date.getTime() !== date.getTime()) {
+            day = { date, threads: [] };
+            days.push(day);
+        }
+        day.threads.push(session);
+    }
+    return days;
+}
+/** Which label a day divider takes. */
+export function dayKind(date, now) {
+    const today = localDay(now.getTime()).getTime();
+    const day = localDay(date.getTime()).getTime();
+    if (day === today)
+        return 'today';
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+    return day === yesterday.getTime() ? 'yesterday' : 'earlier';
+}
+/**
+ * A collapsed row's time in the avatar gutter: hour and minute without the day
+ * period ("2:13", not "2:13 PM"), so it fits one avatar's width. The row's
+ * `title` carries the full time.
+ */
+export function gutterTime(date, locale) {
+    return new Intl.DateTimeFormat(locale, { hour: 'numeric', minute: '2-digit' })
+        .formatToParts(date)
+        .filter((part) => part.type !== 'dayPeriod')
+        .map((part) => part.value)
+        .join('')
+        .trim();
+}
+/** "12 hours ago": the thread's last activity. */
+export function lastReplyLabel(session, locale, now = Date.now()) {
+    return relativeTime(session.updated_at, locale, now, { style: 'long' });
+}
+/**
+ * `reply_count` from a thread's loaded transcript, by the server's rule
+ * (`apps/api/.../session-reply-counts.ts`): every person message after the
+ * first, plus one per person message the agent answered.
+ */
+export function liveReplyCount(roles) {
+    let people = 0;
+    let answers = 0;
+    let answered = true;
+    for (const role of roles) {
+        if (role === 'user') {
+            people += 1;
+            answered = false;
+        }
+        else if (role === 'assistant' && !answered) {
+            answers += 1;
+            answered = true;
+        }
+    }
+    return Math.max(people - 1, 0) + answers;
+}
+/** The agent is on it: a turn runs, the first prompt waits for delivery, or the computer starts. */
+export function threadIsWorking(session) {
+    if (session.working?.state === 'working' || session.working?.pending_delivery)
+        return true;
+    return session.status === 'queued' || session.status === 'branching' || session.status === 'provisioning';
+}
+/** The thread's top message: its first prompt as the person wrote it, else its title. */
+export function threadMessageText(session) {
+    let text = session.first_prompt ?? '';
+    text = parseFileReferences(text).cleanText;
+    text = parseSessionReferences(text).cleanText;
+    text = parseFileMentionReferences(text).cleanText;
+    text = parseAgentMentionReferences(text).cleanText;
+    text = stripReplyContexts(text).trim();
+    return text || sessionDisplayLabel(session);
+}
+/**
+ * The server stores a thread's first prompt cut at this length
+ * (`FIRST_PROMPT_MAX_CHARS` in `apps/api/src/projects/lib/project-spaces.ts`).
+ */
+export const SERVER_FIRST_PROMPT_MAX_CHARS = 500;
+/**
+ * The server cut the first prompt: the row shows "…" and its "Show more"
+ * opens the thread, whose transcript holds the whole message. A prompt of
+ * exactly the limit reads as cut too, and opening its thread is harmless.
+ */
+export function firstPromptTruncated(session) {
+    return (session.first_prompt?.length ?? 0) >= SERVER_FIRST_PROMPT_MAX_CHARS;
+}
+/** The agent whose mark stands in when a row does not name its agent. */
+export const DEFAULT_AGENT_SLUG = 'kortix';
+/** An agent's display name: the sidebar's DM row and the space view say it the same way. */
+export function agentLabel(name) {
+    return isMetaAgentName(name) ? META_AGENT_DISPLAY_NAME : capitalizeWords(name);
+}
+/**
+ * Who is in a space, as far as its loaded threads tell: the people who
+ * started a thread, and the agents that answered one, each with how many of
+ * those threads it was. No roster API exists yet, so the header says "in these
+ * threads", not "members".
+ */
+export function spaceRoster(sessions, dmAgentName) {
+    const people = new Map();
+    const agentThreads = {};
+    if (dmAgentName)
+        agentThreads[dmAgentName] = 0;
+    for (const session of sessions) {
+        if (session.created_by && session.owner_type === 'user') {
+            const person = people.get(session.created_by);
+            if (person)
+                person.threads += 1;
+            else
+                people.set(session.created_by, {
+                    id: session.created_by,
+                    name: session.owner_name ?? null,
+                    email: session.owner_email ?? null,
+                    avatarUrl: session.owner_avatar_url ?? null,
+                    threads: 1,
+                });
+        }
+        if (session.agent_name)
+            agentThreads[session.agent_name] = (agentThreads[session.agent_name] ?? 0) + 1;
+    }
+    return { people: [...people.values()], agents: Object.keys(agentThreads), agentThreads };
+}
+/** A channel's tabs, in order. `?tab=` names one; Chat has no param. */
+const CHANNEL_TABS = ['chat', 'threads', 'files', 'memory', 'apps', 'links', 'triggers'];
+/** A DM has no apps or links of its own. */
+const DM_TABS = ['chat', 'threads', 'files', 'memory', 'triggers'];
+export function spaceTabs(kind) {
+    return kind === 'dm' ? DM_TABS : CHANNEL_TABS;
+}
+/** The `?tab=` value as a tab of this kind of space; anything else is Chat. */
+export function spaceTabFromParam(value, kind) {
+    return spaceTabs(kind).find((tab) => tab === value) ?? 'chat';
+}
+/** The Threads tab's Status filter: the states a thread row shows. */
+export const THREAD_STATUSES = ['working', 'needs-you', 'failed', 'done'];
+/** The Threads tab's Activity filter: the last activity on or after a local day. */
+export const THREAD_ACTIVITIES = ['today', 'last7', 'last30'];
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const oneOf = (values, value) => values.find((candidate) => candidate === value) ?? null;
+export function threadFiltersFromParams(params, kind) {
+    const by = params.get('by');
+    return {
+        q: params.get('q')?.trim() ?? '',
+        status: oneOf(THREAD_STATUSES, params.get('status')),
+        by: kind === 'dm' ? null : by === 'me' || (by && UUID.test(by)) ? by : null,
+        agent: kind === 'dm' ? null : params.get('agent') || null,
+        active: oneOf(THREAD_ACTIVITIES, params.get('active')),
+    };
+}
+/**
+ * The start of an Activity window: local midnight today, 6 days earlier
+ * (7 days with today) or 29 days earlier. A day boundary, so the list's query
+ * stays the same all day.
+ */
+export function threadActivitySince(active, now) {
+    const days = active === 'today' ? 0 : active === 'last7' ? 6 : 29;
+    return new Date(now.getFullYear(), now.getMonth(), now.getDate() - days).toISOString();
+}
+/** A thread's Status filter value. A pending review wins; a turn in flight is Working. */
+export function threadStatus(session, reviewCount = 0) {
+    if (reviewCount > 0)
+        return 'needs-you';
+    if (threadIsWorking(session))
+        return 'working';
+    return sessionDisplayStatus(session) === 'failed' ? 'failed' : 'done';
+}

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

@@ -0,0 +1,13 @@
+import type { ProjectSpace } from '@kortix/sdk';
+/**
+ * A channel's or DM's Triggers tab: the project's triggers that post here
+ * (`space_id`, filtered from the one trigger list every trigger surface
+ * shares), each with its schedule, its last run and its on/off switch, and
+ * "New trigger", which opens the trigger form posting here. A private channel
+ * has no "New trigger": the API refuses a trigger into it, so one line says why.
+ */
+export declare function SpaceTriggers({ projectId, space, place }: {
+    projectId: string;
+    space: ProjectSpace;
+    place: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { qk, useProjectTriggers } from '@kortix/sdk/react';
+import { LightningIcon, PlusIcon } from '@phosphor-icons/react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { describeWhen, triggerName, triggerSubtitle } from '../../customize/triggers/schedule/schedule-copy.js';
+import { useTriggerControls } from '../../customize/triggers/schedule/trigger-controls.js';
+import { TriggerComposer } from '../../customize/triggers/schedule/trigger-composer.js';
+import { lastRunLabel } from '../../internal/lib/trigger-clock.js';
+import { TriggerTile } from '../../customize/triggers/schedule/trigger-tile.js';
+import { useLocale, useTranslations } from '../../i18n/index.js';
+import { uiRoutes } from '../../lib/routes.js';
+import { Button } from '../../primitives/button.js';
+import { EmptyArt } from '../../primitives/empty-art.js';
+import { EmptyState } from '../../primitives/empty-state.js';
+import { ErrorState } from '../../primitives/error-state.js';
+import { Switch } from '../../primitives/switch.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { UiLink as Link } from '../../providers/ui-provider.js';
+/**
+ * A channel's or DM's Triggers tab: the project's triggers that post here
+ * (`space_id`, filtered from the one trigger list every trigger surface
+ * shares), each with its schedule, its last run and its on/off switch, and
+ * "New trigger", which opens the trigger form posting here. A private channel
+ * has no "New trigger": the API refuses a trigger into it, so one line says why.
+ */
+export function SpaceTriggers({ projectId, space, place }) {
+    const t = useTranslations('spaces.view');
+    const queryClient = useQueryClient();
+    const listing = useProjectTriggers(projectId);
+    const controls = useTriggerControls(projectId);
+    const [creating, setCreating] = useState(false);
+    const triggers = listing.data?.triggers.filter((trigger) => trigger.space_id === space.space_id);
+    const isPrivate = space.visibility === 'private';
+    const privateNote = isPrivate ? _jsx("p", { className: "text-muted-foreground text-xs text-pretty", children: t('triggers.privateNote') }) : null;
+    const newButton = controls.canCreate && !isPrivate ? (_jsxs(Button, { variant: "outline", size: "sm", className: "gap-1.5", onClick: () => setCreating(true), children: [_jsx(PlusIcon, { "aria-hidden": true, className: "size-3.5 shrink-0" }), t('empty.triggers.action')] })) : null;
+    let body;
+    if (listing.isError && !listing.data) {
+        body = (_jsx(ErrorState, { size: "sm", title: t('triggers.loadError'), action: _jsx(Button, { variant: "outline", size: "sm", onClick: () => listing.refetch(), children: t('retry') }) }));
+    }
+    else if (!triggers) {
+        body = null;
+    }
+    else if (triggers.length === 0) {
+        body = (_jsx(EmptyState, { className: "min-h-full", media: _jsx(EmptyArt, { icon: LightningIcon }), title: t('empty.triggers.title'), description: isPrivate ? t('triggers.privateNote') : t('empty.triggers.description', { place }), action: newButton }));
+    }
+    else {
+        body = (_jsxs("div", { className: "flex flex-col gap-3", children: [newButton ? _jsx("div", { className: "flex justify-end", children: newButton }) : null, privateNote, _jsx("ul", { className: "flex flex-col", children: triggers.map((trigger) => (_jsx(TriggerRow, { projectId: projectId, trigger: trigger, projectPaused: listing.data?.triggers_paused === true, canUpdate: controls.canUpdate, onToggle: (enabled) => listing.update.mutateAsync({ slug: trigger.slug, input: { enabled } }) }, trigger.slug))) })] }));
+    }
+    return (_jsxs("div", { className: triggers?.length ? 'px-5 py-4' : triggers ? 'flex min-h-full flex-col' : 'px-5 py-16', children: [body, _jsx(TriggerComposer, { projectId: projectId, open: creating, onOpenChange: setCreating, initialSpace: { spaceId: space.space_id, kind: space.kind }, 
+                // A DM trigger runs the DM's agent (the API rejects any other).
+                initialAgent: space.kind === 'dm' ? space.dm_agent_name : null, onCreated: () => {
+                    setCreating(false);
+                    void queryClient.invalidateQueries({ queryKey: qk.project.triggers(projectId) });
+                } })] }));
+}
+/** One trigger: its clock, its name over its schedule, its last run, and its switch. The row opens the trigger. */
+function TriggerRow({ projectId, trigger, projectPaused, canUpdate, onToggle, }) {
+    const tTriggers = useTranslations('hardcodedUi.i18nComplete');
+    const locale = useLocale();
+    const [pending, setPending] = useState(false);
+    const name = triggerName(trigger);
+    const subtitle = triggerSubtitle(name, describeWhen(trigger), trigger.prompt_template);
+    // An auto-paused trigger is off until resumed: turning it on sends `enabled: true`, which resumes it.
+    const active = trigger.enabled && !trigger.auto_paused_at;
+    const href = uiRoutes().customize(projectId, `triggers?id=${encodeURIComponent(trigger.slug)}`);
+    const toggle = (enabled) => {
+        setPending(true);
+        onToggle(enabled)
+            .then(() => successToast(enabled ? tTriggers.raw('texta97d32ddb6ba') : tTriggers.raw('texte159b06187d3')))
+            .catch((err) => errorToast(err instanceof Error ? err.message : tTriggers.raw('text43ec39943667')))
+            .finally(() => setPending(false));
+    };
+    return (_jsxs("li", { className: "group hover:bg-hover relative -mx-2 flex items-center gap-3 rounded-md px-2 py-2", children: [_jsx("span", { className: "flex size-5 shrink-0 items-center justify-center", children: _jsx(TriggerTile, { trigger: trigger, projectPaused: projectPaused }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [href ? (_jsx(Link, { href: href, className: "focus-visible:ring-ring block truncate text-sm font-medium outline-none after:absolute after:inset-0 after:rounded-md focus-visible:ring-2", children: name })) : (_jsx("p", { className: "truncate text-sm font-medium", children: name })), subtitle ? _jsx("p", { className: "text-muted-foreground truncate text-xs", children: subtitle }) : null] }), _jsx("span", { className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: lastRunLabel(trigger, tTriggers, locale) }), _jsx(Switch, { checked: active, onCheckedChange: toggle, disabled: !canUpdate || pending, "aria-label": name, 
+                // Above the row's stretched link.
+                className: "relative z-10" })] }));
+}