@kortix/ui 0.14.4 → 0.14.5

package/dist/session/header/reminder-parts.d.ts

@@ -0,0 +1,285 @@
+import type { SessionReminder } from '@kortix/sdk';
+import { type ReactNode } from 'react';
+export declare const isFailedReminder: (reminder: SessionReminder) => boolean;
+/** Soonest next fire first; paused ones, which have no next fire, last. */
+export declare function sortReminders(reminders: SessionReminder[]): SessionReminder[];
+/** A ring filled clockwise from the top by `share`; an empty track around a pause glyph while paused. */
+export declare function CountdownRing({ share, size, stroke, tone, paused, children, }: {
+    share: number | null;
+    size: number;
+    stroke: number;
+    tone: 'purple' | 'red';
+    paused: boolean;
+    children?: ReactNode;
+}): import("react").JSX.Element;
+/** "6h" over "12m": the time left in its two largest units, narrow and localized. */
+export declare function countdownParts(ms: number, locale: string): [string, string | null];
+/** What a row and its details show for one reminder at `now`. */
+export declare function useReminderView(now: number): (reminder: SessionReminder) => {
+    paused: boolean;
+    isFailed: boolean;
+    next: string | null;
+    nextAt: number;
+    countdown: [string, string | null];
+    share: number | null;
+    tone: "purple" | "red";
+    pauseLabel: string;
+    schedule: string;
+    meta: string;
+};
+/** Repeats, time zone, last run, and the last error when the run failed. */
+export declare function ReminderFacts({ reminder, now, className, }: {
+    reminder: SessionReminder;
+    now: number;
+    className?: string;
+}): import("react").JSX.Element;
+/** Pause or resume, remove, and the link into the Reminders tab. */
+export declare function ReminderActions({ reminder, controls, manageHref, onNavigate, className, }: {
+    reminder: SessionReminder;
+    controls: ReminderControls;
+    manageHref: string | null;
+    onNavigate?: () => void;
+    className?: string;
+}): import("react").JSX.Element;
+export interface ReminderControls {
+    pending: boolean;
+    setEnabled: (reminder: SessionReminder, enabled: boolean) => void;
+    requestRemove: (reminder: SessionReminder) => void;
+}
+/**
+ * The session's reminders with pause, resume and remove. Remove asks first:
+ * render `confirm` once next to whatever calls `requestRemove`.
+ */
+export declare function useReminderControls(projectId: string | null, sessionId: string | null | undefined): {
+    reminders: {
+        update: import("@tanstack/react-query").UseMutationResult<SessionReminder, Error, {
+            reminderId: string;
+            enabled: boolean;
+        }, unknown>;
+        remove: import("@tanstack/react-query").UseMutationResult<{
+            ok: boolean;
+        }, Error, string, unknown>;
+        data: {
+            reminders: SessionReminder[];
+        };
+        error: Error;
+        isError: true;
+        isPending: false;
+        isLoading: false;
+        isLoadingError: false;
+        isRefetchError: true;
+        isSuccess: false;
+        isPlaceholderData: false;
+        status: "error";
+        dataUpdatedAt: number;
+        errorUpdatedAt: number;
+        failureCount: number;
+        failureReason: Error | null;
+        errorUpdateCount: number;
+        isFetched: boolean;
+        isFetchedAfterMount: boolean;
+        isFetching: boolean;
+        isInitialLoading: boolean;
+        isPaused: boolean;
+        isRefetching: boolean;
+        isStale: boolean;
+        isEnabled: boolean;
+        refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+            reminders: SessionReminder[];
+        }, Error>>;
+        fetchStatus: import("@tanstack/react-query").FetchStatus;
+    } | {
+        update: import("@tanstack/react-query").UseMutationResult<SessionReminder, Error, {
+            reminderId: string;
+            enabled: boolean;
+        }, unknown>;
+        remove: import("@tanstack/react-query").UseMutationResult<{
+            ok: boolean;
+        }, Error, string, unknown>;
+        data: {
+            reminders: SessionReminder[];
+        };
+        error: null;
+        isError: false;
+        isPending: false;
+        isLoading: false;
+        isLoadingError: false;
+        isRefetchError: false;
+        isSuccess: true;
+        isPlaceholderData: false;
+        status: "success";
+        dataUpdatedAt: number;
+        errorUpdatedAt: number;
+        failureCount: number;
+        failureReason: Error | null;
+        errorUpdateCount: number;
+        isFetched: boolean;
+        isFetchedAfterMount: boolean;
+        isFetching: boolean;
+        isInitialLoading: boolean;
+        isPaused: boolean;
+        isRefetching: boolean;
+        isStale: boolean;
+        isEnabled: boolean;
+        refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+            reminders: SessionReminder[];
+        }, Error>>;
+        fetchStatus: import("@tanstack/react-query").FetchStatus;
+    } | {
+        update: import("@tanstack/react-query").UseMutationResult<SessionReminder, Error, {
+            reminderId: string;
+            enabled: boolean;
+        }, unknown>;
+        remove: import("@tanstack/react-query").UseMutationResult<{
+            ok: boolean;
+        }, Error, string, unknown>;
+        data: undefined;
+        error: Error;
+        isError: true;
+        isPending: false;
+        isLoading: false;
+        isLoadingError: true;
+        isRefetchError: false;
+        isSuccess: false;
+        isPlaceholderData: false;
+        status: "error";
+        dataUpdatedAt: number;
+        errorUpdatedAt: number;
+        failureCount: number;
+        failureReason: Error | null;
+        errorUpdateCount: number;
+        isFetched: boolean;
+        isFetchedAfterMount: boolean;
+        isFetching: boolean;
+        isInitialLoading: boolean;
+        isPaused: boolean;
+        isRefetching: boolean;
+        isStale: boolean;
+        isEnabled: boolean;
+        refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+            reminders: SessionReminder[];
+        }, Error>>;
+        fetchStatus: import("@tanstack/react-query").FetchStatus;
+    } | {
+        update: import("@tanstack/react-query").UseMutationResult<SessionReminder, Error, {
+            reminderId: string;
+            enabled: boolean;
+        }, unknown>;
+        remove: import("@tanstack/react-query").UseMutationResult<{
+            ok: boolean;
+        }, Error, string, unknown>;
+        data: undefined;
+        error: null;
+        isError: false;
+        isPending: true;
+        isLoading: true;
+        isLoadingError: false;
+        isRefetchError: false;
+        isSuccess: false;
+        isPlaceholderData: false;
+        status: "pending";
+        dataUpdatedAt: number;
+        errorUpdatedAt: number;
+        failureCount: number;
+        failureReason: Error | null;
+        errorUpdateCount: number;
+        isFetched: boolean;
+        isFetchedAfterMount: boolean;
+        isFetching: boolean;
+        isInitialLoading: boolean;
+        isPaused: boolean;
+        isRefetching: boolean;
+        isStale: boolean;
+        isEnabled: boolean;
+        refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+            reminders: SessionReminder[];
+        }, Error>>;
+        fetchStatus: import("@tanstack/react-query").FetchStatus;
+    } | {
+        update: import("@tanstack/react-query").UseMutationResult<SessionReminder, Error, {
+            reminderId: string;
+            enabled: boolean;
+        }, unknown>;
+        remove: import("@tanstack/react-query").UseMutationResult<{
+            ok: boolean;
+        }, Error, string, unknown>;
+        data: undefined;
+        error: null;
+        isError: false;
+        isPending: true;
+        isLoadingError: false;
+        isRefetchError: false;
+        isSuccess: false;
+        isPlaceholderData: false;
+        status: "pending";
+        dataUpdatedAt: number;
+        errorUpdatedAt: number;
+        failureCount: number;
+        failureReason: Error | null;
+        errorUpdateCount: number;
+        isFetched: boolean;
+        isFetchedAfterMount: boolean;
+        isFetching: boolean;
+        isLoading: boolean;
+        isInitialLoading: boolean;
+        isPaused: boolean;
+        isRefetching: boolean;
+        isStale: boolean;
+        isEnabled: boolean;
+        refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+            reminders: SessionReminder[];
+        }, Error>>;
+        fetchStatus: import("@tanstack/react-query").FetchStatus;
+    } | {
+        update: import("@tanstack/react-query").UseMutationResult<SessionReminder, Error, {
+            reminderId: string;
+            enabled: boolean;
+        }, unknown>;
+        remove: import("@tanstack/react-query").UseMutationResult<{
+            ok: boolean;
+        }, Error, string, unknown>;
+        data: {
+            reminders: SessionReminder[];
+        };
+        isError: false;
+        error: null;
+        isPending: false;
+        isLoading: false;
+        isLoadingError: false;
+        isRefetchError: false;
+        isSuccess: true;
+        isPlaceholderData: true;
+        status: "success";
+        dataUpdatedAt: number;
+        errorUpdatedAt: number;
+        failureCount: number;
+        failureReason: Error | null;
+        errorUpdateCount: number;
+        isFetched: boolean;
+        isFetchedAfterMount: boolean;
+        isFetching: boolean;
+        isInitialLoading: boolean;
+        isPaused: boolean;
+        isRefetching: boolean;
+        isStale: boolean;
+        isEnabled: boolean;
+        refetch: (options?: import("@tanstack/react-query").RefetchOptions) => Promise<import("@tanstack/react-query").QueryObserverResult<{
+            reminders: SessionReminder[];
+        }, Error>>;
+        fetchStatus: import("@tanstack/react-query").FetchStatus;
+    };
+    controls: ReminderControls;
+    confirm: import("react").JSX.Element;
+};
+/**
+ * A reminder row's cells, for a `REMINDER_ROW_GRID` container: the ring and
+ * the title share the first grid row, so the ring centres on the title line;
+ * the next run sits at the end of that line, the schedule under the title.
+ */
+export declare const REMINDER_ROW_GRID = "grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2.5";
+export declare function ReminderRowCells({ reminder, view, trailing, }: {
+    reminder: SessionReminder;
+    view: ReturnType<ReturnType<typeof useReminderView>>;
+    /** Replaces the next-run time in the end column, e.g. a disclosure caret. */
+    trailing?: ReactNode;
+}): import("react").JSX.Element;

package/dist/session/header/reminder-parts.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The pieces a session reminder is drawn with, shared by the header popover's
+ * hover card and the panel's Reminders view (`session-reminders-panel.tsx`):
+ * the countdown ring, the facts block, the action row, and the pause/remove
+ * mutations with their confirm dialog.
+ */
+import { HoverPrefetchLink } from '../../internal/components/hover-prefetch-link.js';
+import { Button } from '../../primitives/button.js';
+import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
+import Hint from '../../primitives/hint.js';
+import { errorToast, successToast } from '../../primitives/toast.js';
+import { elapsedShare, formatFireTime, reminderTitle, scheduleLabel } from '../../internal/reminders/reminder-format.js';
+import { cn } from '../../internal/lib/utils.js';
+import { useLocale, useTranslations } from '../../i18n/index.js';
+import { useSessionReminders } from '@kortix/sdk/react';
+import { ArrowUpRightIcon, PauseIcon, PlayIcon } from '@phosphor-icons/react';
+import { useState } from 'react';
+export const isFailedReminder = (reminder) => reminder.last_status === 'failed';
+/** Soonest next fire first; paused ones, which have no next fire, last. */
+export function sortReminders(reminders) {
+    const key = (reminder) => reminder.state === 'active' && reminder.next_fire_at ? Date.parse(reminder.next_fire_at) : Infinity;
+    return [...reminders].sort((a, b) => key(a) - key(b));
+}
+/** A ring filled clockwise from the top by `share`; an empty track around a pause glyph while paused. */
+export function CountdownRing({ share, size, stroke, tone, paused, children, }) {
+    const r = (size - stroke) / 2;
+    const length = 2 * Math.PI * r;
+    return (_jsxs("span", { className: "relative flex shrink-0 items-center justify-center", style: { width: size, height: size }, children: [_jsxs("svg", { "aria-hidden": true, width: size, height: size, className: "absolute inset-0 -rotate-90", children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: r, fill: "none", stroke: "currentColor", strokeWidth: stroke, className: "text-border" }), !paused && share !== null ? (_jsx("circle", { cx: size / 2, cy: size / 2, r: r, fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeDasharray: `${length * share} ${length}`, className: tone === 'red' ? 'text-kortix-red' : 'text-kortix-purple' })) : null] }), paused ? (_jsx(PauseIcon, { "aria-hidden": true, weight: "fill", className: "text-muted-foreground", style: { width: Math.round(size * 0.4), height: Math.round(size * 0.4) } })) : (children)] }));
+}
+/** "6h" over "12m": the time left in its two largest units, narrow and localized. */
+export function countdownParts(ms, locale) {
+    const min = Math.max(0, Math.round(ms / 60_000));
+    const unit = (value, name) => new Intl.NumberFormat(locale, { style: 'unit', unit: name, unitDisplay: 'narrow' }).format(value);
+    if (min >= 24 * 60)
+        return [unit(Math.floor(min / (24 * 60)), 'day'), unit(Math.floor((min % (24 * 60)) / 60), 'hour')];
+    if (min >= 60)
+        return [unit(Math.floor(min / 60), 'hour'), unit(min % 60, 'minute')];
+    return [unit(min, 'minute'), null];
+}
+/** What a row and its details show for one reminder at `now`. */
+export function useReminderView(now) {
+    const t = useTranslations('reminders');
+    const locale = useLocale();
+    return (reminder) => {
+        const paused = reminder.state !== 'active';
+        const nextAt = reminder.next_fire_at ? Date.parse(reminder.next_fire_at) : NaN;
+        const failed = isFailedReminder(reminder);
+        return {
+            paused,
+            isFailed: failed,
+            next: !paused && reminder.next_fire_at ? formatFireTime(reminder.next_fire_at, locale, now) : null,
+            nextAt,
+            countdown: countdownParts(nextAt - now, locale),
+            share: elapsedShare(reminder, now),
+            tone: failed ? 'red' : 'purple',
+            pauseLabel: paused ? t('resume') : t('pause'),
+            schedule: scheduleLabel(reminder, (key, values) => t(key, values)),
+            meta: [failed ? t('lastRunFailed') : paused ? t('pausedLabel') : null, scheduleLabel(reminder, (key, values) => t(key, values))]
+                .filter(Boolean)
+                .join(' · '),
+        };
+    };
+}
+/** Repeats, time zone, last run, and the last error when the run failed. */
+export function ReminderFacts({ reminder, now, className, }) {
+    const t = useTranslations('reminders');
+    const locale = useLocale();
+    const failed = isFailedReminder(reminder);
+    return (_jsxs("dl", { className: cn('space-y-1.5 text-xs', className), children: [_jsxs("div", { className: "flex justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: t('repeats') }), _jsx("dd", { className: "text-foreground truncate", children: scheduleLabel(reminder, (key, values) => t(key, values)) })] }), _jsxs("div", { className: "flex justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: t('timeZone') }), _jsx("dd", { className: "text-foreground truncate", children: reminder.timezone })] }), _jsxs("div", { className: "flex justify-between gap-3", children: [_jsx("dt", { className: "text-muted-foreground", children: t('lastRun') }), _jsx("dd", { className: "text-foreground flex items-center gap-1.5", children: reminder.last_fired_at ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": true, className: cn('size-1.5 rounded-full', failed ? 'bg-kortix-red' : 'bg-kortix-green') }), formatFireTime(reminder.last_fired_at, locale, now)] })) : (t('neverRun')) })] }), failed && reminder.last_error ? (_jsx("p", { className: "text-foreground bg-kortix-red/15 mt-2 rounded-md px-2 py-1.5 font-mono break-words", children: reminder.last_error })) : null] }));
+}
+/** Pause or resume, remove, and the link into the Reminders tab. */
+export function ReminderActions({ reminder, controls, manageHref, onNavigate, className, }) {
+    const t = useTranslations('reminders');
+    const paused = reminder.state !== 'active';
+    return (_jsxs("div", { className: cn('flex items-center gap-1', className), children: [_jsxs(Button, { variant: "secondary", size: "xs", disabled: controls.pending, onClick: () => controls.setEnabled(reminder, paused), children: [paused ? _jsx(PlayIcon, { className: "size-3.5" }) : _jsx(PauseIcon, { className: "size-3.5" }), paused ? t('resume') : t('pause')] }), _jsx(Button, { variant: "ghost", size: "xs", className: "text-destructive", onClick: () => controls.requestRemove(reminder), children: t('remove') }), manageHref ? (
+            // An icon, not a label: three text buttons overflow the 288px card.
+            _jsx(Hint, { label: t('openInReminders'), side: "top", sideOffset: 6, alignOffset: 0, children: _jsx(Button, { asChild: true, variant: "ghost", size: "icon-xs", className: "text-muted-foreground ml-auto", "aria-label": t('openInReminders'), children: _jsx(HoverPrefetchLink, { href: manageHref, onClick: onNavigate, children: _jsx(ArrowUpRightIcon, { className: "size-3.5" }) }) }) })) : null] }));
+}
+/**
+ * The session's reminders with pause, resume and remove. Remove asks first:
+ * render `confirm` once next to whatever calls `requestRemove`.
+ */
+export function useReminderControls(projectId, sessionId) {
+    const t = useTranslations('reminders');
+    const reminders = useSessionReminders(projectId, sessionId);
+    const [removing, setRemoving] = useState(null);
+    const controls = {
+        pending: reminders.update.isPending,
+        setEnabled: (reminder, enabled) => reminders.update.mutate({ reminderId: reminder.id, enabled }, {
+            onSuccess: () => successToast(enabled ? t('resumed') : t('paused')),
+            onError: (error) => errorToast(error instanceof Error ? error.message : t('updateFailed')),
+        }),
+        requestRemove: setRemoving,
+    };
+    const confirm = (_jsx(ConfirmDialog, { open: !!removing, onOpenChange: (next) => !next && setRemoving(null), title: t('removeTitle'), description: t('removeDescription'), confirmLabel: t('remove'), confirmVariant: "destructive", isPending: reminders.remove.isPending, onConfirm: () => removing &&
+            reminders.remove.mutate(removing.id, {
+                onSuccess: () => {
+                    successToast(t('removed'));
+                    setRemoving(null);
+                },
+                onError: (error) => errorToast(error instanceof Error ? error.message : t('updateFailed')),
+            }) }));
+    return { reminders, controls, confirm };
+}
+/**
+ * A reminder row's cells, for a `REMINDER_ROW_GRID` container: the ring and
+ * the title share the first grid row, so the ring centres on the title line;
+ * the next run sits at the end of that line, the schedule under the title.
+ */
+export const REMINDER_ROW_GRID = 'grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-x-2.5';
+export function ReminderRowCells({ reminder, view, trailing, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(CountdownRing, { share: view.share, size: 14, stroke: 2, tone: view.tone, paused: view.paused }), _jsx("span", { className: cn('truncate text-sm leading-5', view.paused ? 'text-muted-foreground' : 'text-foreground font-medium'), children: reminderTitle(reminder) }), trailing ?? (view.next ? (_jsx("span", { className: "text-muted-foreground col-start-3 row-start-1 text-xs tabular-nums pointer-coarse:hidden", children: view.next })) : null), _jsx("span", { className: "text-muted-foreground col-start-2 truncate text-xs leading-4", children: view.meta })] }));
+}

package/dist/session/header/session-reminders-indicator.d.ts

@@ -1,3 +1,16 @@
+/** More live reminders than this open in the side panel, not the popover. */
+export declare const REMINDERS_POPOVER_MAX = 30;
+/**
+ * The clock in `BellMark`'s badge-glow style: the glyph, then again in the
+ * count's colour under the bell's corner mask, so the colour reaches in from
+ * the corner the count sits on. Purple for active reminders, red while one's
+ * last run failed. With nothing active the glyph is muted and has no count.
+ */
+export declare function ReminderMark({ count, failed: anyFailed, surface, }: {
+    count: number;
+    failed: boolean;
+    surface?: 'bg-background' | 'bg-sidebar';
+}): import("react").JSX.Element;
 export declare function SessionRemindersIndicator({ runtimeSessionId }: {
     runtimeSessionId: string;
 }): import("react").JSX.Element | null;

package/dist/session/header/session-reminders-indicator.js

@@ -1,44 +1,128 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Header chip for this session's reminders (scheduled check-ins that re-prompt
- * the session). Renders nothing until the session has a reminder that can
- * still fire; then an alarm with the active count, and a popover to pause,
- * resume, or remove one, or to open the Customize Reminders tab on this
- * session. The session reminders read needs `project.session.start`, so a
- * read-only viewer's 403 simply leaves the chip hidden. The tab link shows only
- * to a caller who has the tab (`capabilityAccess()`): a plain member manages
- * their reminders here.
+ * the session), Paper R08 "Countdown rings". Renders nothing until the session
+ * has a reminder that can still fire; then `ReminderMark`, and a popover that
+ * lists each reminder behind a ring of how much of its wait has passed. On a
+ * pointer that hovers, a row's details and actions open in a hover card on the
+ * popover's left; on a touch screen the pause and remove buttons sit in the row.
+ * Past `REMINDERS_POPOVER_MAX` the popover would be a wall to scroll, so the
+ * chip opens the panel's Reminders view instead (`session-reminders-panel.tsx`).
+ * The session reminders read needs `project.session.start`, so a read-only
+ * viewer's 403 simply leaves the chip hidden. The "Open in Reminders" link
+ * shows only to a caller who has the tab (`capabilityAccess()`).
  */
 import { HoverPrefetchLink } from '../../internal/components/hover-prefetch-link.js';
-import { Badge } from '../../primitives/badge.js';
 import { Button } from '../../primitives/button.js';
-import { ConfirmDialog } from '../../primitives/confirm-dialog.js';
-import Hint from '../../primitives/hint.js';
+import { CountBadge } from '../../primitives/count-badge.js';
+import { FLOATING_PANEL_SURFACE } from '../../primitives/menu-recipe.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../../primitives/popover.js';
-import { errorToast, successToast } from '../../primitives/toast.js';
 import { remindersHref } from '../../internal/lib/capability-tab-routes.js';
 import { useCapabilityAccess } from '../../internal/layout/project-settings-nav.js';
-import { formatFireTime, reminderTitle, } from '../../internal/reminders/reminder-format.js';
+import { BELL_REFLECTION_MASK } from '../../internal/notifications/notification-bell.js';
+import { badgeCount } from '../../internal/notifications/notification-rows.js';
+import { reminderTitle } from '../../internal/reminders/reminder-format.js';
 import { useNow, useRefetchAfterFire, } from '../../internal/reminders/use-refetch-after-fire.js';
-import { useLocale, useTranslations } from '../../i18n/index.js';
-import { qk, useFeatureFlag, useSessionReminders, useSessionWorking } from '@kortix/sdk/react';
+import { cn } from '../../internal/lib/utils.js';
+import { useTranslations } from '../../i18n/index.js';
+import { qk, useFeatureFlag, useSessionWorking } from '@kortix/sdk/react';
 import { AlarmIcon, PauseIcon, PlayIcon, TrashIcon } from '@phosphor-icons/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSessionIds } from '../../providers/session-ids.js';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { openSessionQuickView } from '../panel/open-session-quick-view.js';
+import { CountdownRing, isFailedReminder, REMINDER_ROW_GRID, ReminderActions, ReminderFacts, ReminderRowCells, sortReminders, useReminderControls, useReminderView, } from './reminder-parts.js';
+/** More live reminders than this open in the side panel, not the popover. */
+export const REMINDERS_POPOVER_MAX = 30;
+/**
+ * The clock in `BellMark`'s badge-glow style: the glyph, then again in the
+ * count's colour under the bell's corner mask, so the colour reaches in from
+ * the corner the count sits on. Purple for active reminders, red while one's
+ * last run failed. With nothing active the glyph is muted and has no count.
+ */
+export function ReminderMark({ count, failed: anyFailed, surface = 'bg-background', }) {
+    const tone = anyFailed
+        ? { reflection: 'text-kortix-red', disc: 'bg-kortix-red' }
+        : { reflection: 'text-kortix-purple', disc: 'bg-kortix-purple' };
+    return (_jsxs("span", { className: "relative size-4 shrink-0", children: [_jsx(AlarmIcon, { className: cn('size-4', count === 0 && 'text-muted-foreground') }), count > 0 ? (_jsxs(_Fragment, { children: [_jsx(AlarmIcon, { "aria-hidden": true, className: cn('absolute inset-0 size-4', tone.reflection), style: { maskImage: BELL_REFLECTION_MASK, WebkitMaskImage: BELL_REFLECTION_MASK } }), _jsx("span", { "aria-hidden": true, className: cn('absolute -right-1.5 -bottom-1.5 flex rounded-full p-px', surface), children: _jsx("span", { "data-slot": "reminder-count", className: cn('text-background flex h-3 min-w-3 items-center justify-center rounded-full px-0.5 text-[9px] leading-none font-semibold tabular-nums', // audit:allow a numeral in an 11px disc on a 16px glyph; no type rung fits
+                            tone.disc), children: badgeCount(count) }) })] })) : null] }));
+}
+const CARD_OPEN_DELAY_MS = 200;
+/** While open, a move to another row waits this long; a newer row restarts it. */
+const CARD_MOVE_DEBOUNCE_MS = 50;
+const CARD_CLOSE_DELAY_MS = 100;
+const CARD_EDGE_PX = 8;
+/**
+ * The reminder card's position beside the popover. The first hover opens it
+ * after a delay; while it is open, hovering another row moves it there after a
+ * short debounce, so a sweep across rows moves it once, and it glides (no glide
+ * and no debounce for keyboard focus; no glide under reduced motion).
+ */
+function useGlidingCard() {
+    const panelRef = useRef(null);
+    const cardRef = useRef(null);
+    const [active, setActive] = useState(null);
+    const openTimer = useRef(undefined);
+    const closeTimer = useRef(undefined);
+    const clearTimers = () => {
+        window.clearTimeout(openTimer.current);
+        window.clearTimeout(closeTimer.current);
+    };
+    useEffect(() => clearTimers, []);
+    // Before paint: keep the card inside the viewport, then place it.
+    useLayoutEffect(() => {
+        const panel = panelRef.current;
+        const el = cardRef.current;
+        if (!active || !panel || !el)
+            return;
+        const panelTop = panel.getBoundingClientRect().top;
+        const max = window.innerHeight - CARD_EDGE_PX - panelTop - el.offsetHeight;
+        const top = Math.max(CARD_EDGE_PX - panelTop, Math.min(active.top, max));
+        el.style.transform = `translateY(${top}px)`;
+    }, [active]);
+    const show = (id, row, keyboard) => {
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        clearTimers();
+        const panelRect = panel.getBoundingClientRect();
+        const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const place = (glide) => setActive({
+            id,
+            top: row.getBoundingClientRect().top - panelRect.top,
+            // 288px card + 12px bridge; the right side only when the left has no room.
+            side: panelRect.left >= 300 + CARD_EDGE_PX ? 'left' : 'right',
+            glide,
+        });
+        if (keyboard)
+            place(false);
+        else if (active)
+            openTimer.current = window.setTimeout(() => place(!reduce), CARD_MOVE_DEBOUNCE_MS);
+        else
+            openTimer.current = window.setTimeout(() => place(false), CARD_OPEN_DELAY_MS);
+    };
+    const leave = () => {
+        clearTimers();
+        closeTimer.current = window.setTimeout(() => setActive(null), CARD_CLOSE_DELAY_MS);
+    };
+    const close = () => {
+        clearTimers();
+        setActive(null);
+    };
+    return { panelRef, cardRef, active, show, leave, close, cancelClose: clearTimers };
+}
 export function SessionRemindersIndicator({ runtimeSessionId }) {
     const t = useTranslations('reminders');
-    const locale = useLocale();
     // useSessionIds: the project and the Kortix session reminders key on.
     const { projectId, sessionId } = useSessionIds();
     const gate = useFeatureFlag(projectId, 'reminders');
-    const reminders = useSessionReminders(gate.enabled ? projectId : null, sessionId);
+    const { reminders, controls, confirm } = useReminderControls(gate.enabled ? projectId : null, sessionId);
     useRefetchAfterFire(reminders.data?.reminders, reminders.refetch);
     const now = useNow();
     const hasTab = useCapabilityAccess(projectId).tabs.includes('reminders');
-    // Null when the host serves no customize pages: no "Manage" link.
-    const manageHref = hasTab ? remindersHref(projectId) : null;
+    // Null when the host serves no customize pages: no "Open in Reminders" link.
+    const manageHref = hasTab ? `${remindersHref(projectId)}?session=${sessionId}` : null;
     // An agent sets reminders mid-turn with `kortix remind`; nothing announces
     // that to this query. The turn ending is the moment to look again.
     const working = useSessionWorking(projectId ?? '', sessionId ?? '', {
@@ -56,23 +140,46 @@ export function SessionRemindersIndicator({ runtimeSessionId }) {
         wasWorking.current = isWorking;
     }, [isWorking, projectId, queryClient]);
     const [open, setOpen] = useState(false);
-    const [removing, setRemoving] = useState(null);
+    const { panelRef, cardRef, active: activeCard, show: showCard, leave: leaveCard, close: closeCard, cancelClose } = useGlidingCard();
+    const view = useReminderView(now);
     const live = (reminders.data?.reminders ?? []).filter((reminder) => reminder.state !== 'done');
     if (live.length === 0)
         return null;
     const activeCount = live.filter((reminder) => reminder.state === 'active').length;
-    const setEnabled = (reminder, enabled) => reminders.update.mutate({ reminderId: reminder.id, enabled }, {
-        onSuccess: () => successToast(enabled ? t('resumed') : t('paused')),
-        onError: (error) => errorToast(error instanceof Error ? error.message : t('updateFailed')),
-    });
-    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "icon", "aria-label": t('chipLabel', { count: activeCount }), className: "relative", "data-testid": "session-reminders-chip", children: [_jsx(AlarmIcon, { className: "size-4" }), activeCount > 0 ? (_jsx(Badge, { variant: "secondary", size: "tabular", className: "absolute -top-1 -right-1", children: activeCount })) : null] }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 8, className: "w-80 overflow-hidden p-0", children: [_jsx("div", { className: "border-b px-4 pt-4 pb-3", children: _jsx("h3", { className: "text-foreground text-sm font-medium", children: t('chipTitle') }) }), _jsx("ul", { className: "max-h-64 divide-y overflow-auto", children: live.map((reminder) => (_jsxs("li", { className: "flex items-center gap-2 px-4 py-2.5", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("p", { className: "text-foreground truncate text-sm", title: reminder.prompt, children: reminderTitle(reminder) }), _jsx("p", { className: "text-muted-foreground truncate text-xs", children: reminder.state === 'active' && reminder.next_fire_at
-                                                        ? t('nextFire', { time: formatFireTime(reminder.next_fire_at, locale, now) })
-                                                        : t('pausedLabel') })] }), _jsx(Hint, { label: reminder.state === 'active' ? t('pause') : t('resume'), children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": reminder.state === 'active' ? t('pause') : t('resume'), disabled: reminders.update.isPending, onClick: () => setEnabled(reminder, reminder.state !== 'active'), children: reminder.state === 'active' ? (_jsx(PauseIcon, { className: "size-4 shrink-0" })) : (_jsx(PlayIcon, { className: "size-4 shrink-0" })) }) }), _jsx(Hint, { label: t('remove'), children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('remove'), onClick: () => setRemoving(reminder), children: _jsx(TrashIcon, { className: "size-4 shrink-0" }) }) })] }, reminder.id))) }), manageHref ? (_jsx("div", { className: "border-t px-4 py-2", children: _jsx(Button, { asChild: true, variant: "ghost", size: "sm", className: "w-full justify-center", children: _jsx(HoverPrefetchLink, { href: `${manageHref}?session=${sessionId}`, onClick: () => setOpen(false), children: t('manage') }) }) })) : null] })] }), _jsx(ConfirmDialog, { open: !!removing, onOpenChange: (next) => !next && setRemoving(null), title: t('removeTitle'), description: t('removeDescription'), confirmLabel: t('remove'), confirmVariant: "destructive", isPending: reminders.remove.isPending, onConfirm: () => removing &&
-                    reminders.remove.mutate(removing.id, {
-                        onSuccess: () => {
-                            successToast(t('removed'));
-                            setRemoving(null);
-                        },
-                        onError: (error) => errorToast(error instanceof Error ? error.message : t('updateFailed')),
-                    }) })] }));
+    const rows = sortReminders(live);
+    const mark = _jsx(ReminderMark, { count: activeCount, failed: live.some(isFailedReminder) });
+    if (live.length > REMINDERS_POPOVER_MAX) {
+        return (_jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('chipLabel', { count: activeCount }), className: "relative", "data-testid": "session-reminders-chip", onClick: () => openSessionQuickView('reminders', 'chip'), children: mark }));
+    }
+    const shown = activeCard ? rows.find((reminder) => reminder.id === activeCard?.id) : undefined;
+    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: open, onOpenChange: (next) => {
+                    setOpen(next);
+                    if (!next)
+                        closeCard();
+                }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", "aria-label": t('chipLabel', { count: activeCount }), className: "relative", "data-testid": "session-reminders-chip", children: mark }) }), _jsxs(PopoverContent, { ref: panelRef, align: "end", sideOffset: 8, className: "relative w-96 p-0", children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-4 pt-3 pb-1", children: [_jsxs("h3", { className: "text-foreground flex items-center gap-2 text-sm font-medium", children: [t('title'), activeCount > 0 ? _jsx(CountBadge, { count: activeCount, tone: "reminder" }) : null] }), manageHref ? (_jsx(Button, { asChild: true, variant: "ghost", size: "xs", className: "text-muted-foreground -mr-2.5", children: _jsx(HoverPrefetchLink, { href: manageHref, onClick: () => setOpen(false), children: t('cardManage') }) })) : null] }), _jsx("ul", { className: "max-h-96 overflow-y-auto p-1", onPointerLeave: leaveCard, onScroll: closeCard, children: rows.map((reminder) => {
+                                    const v = view(reminder);
+                                    return (_jsx("li", { children: _jsxs("div", { tabIndex: 0, "data-testid": "session-reminder-row", "data-active": activeCard?.id === reminder.id || undefined, onPointerEnter: (event) => {
+                                                if (event.pointerType !== 'touch')
+                                                    showCard(reminder.id, event.currentTarget, false);
+                                            }, onFocus: (event) => {
+                                                if (event.currentTarget.matches(':focus-visible'))
+                                                    showCard(reminder.id, event.currentTarget, true);
+                                            }, className: cn(REMINDER_ROW_GRID, 'hover:bg-hover focus-visible:ring-ring data-active:bg-hover rounded-lg px-2.5 py-1.5 outline-none focus-visible:ring-2'), children: [_jsx(ReminderRowCells, { reminder: reminder, view: v }), _jsxs("span", { className: "col-start-3 row-span-2 row-start-1 hidden items-center pointer-coarse:flex", children: [_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": v.pauseLabel, disabled: controls.pending, onClick: () => controls.setEnabled(reminder, v.paused), children: v.paused ? _jsx(PlayIcon, { className: "size-4" }) : _jsx(PauseIcon, { className: "size-4" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": t('remove'), onClick: () => controls.requestRemove(reminder), children: _jsx(TrashIcon, { className: "size-4" }) })] })] }) }, reminder.id));
+                                }) }), shown && activeCard
+                                ? (() => {
+                                    const { paused, next, nextAt, countdown, share, tone } = view(shown);
+                                    const [major, minor] = countdown;
+                                    return (
+                                    // One card for the whole list: hovering the next row moves it
+                                    // instead of closing one card and opening another. The padding
+                                    // on the popover side bridges the gap, so the pointer never
+                                    // leaves on its way into the card.
+                                    _jsx("div", { ref: cardRef, onPointerEnter: cancelClose, onPointerLeave: leaveCard, className: cn('absolute top-0 starting:opacity-0 pointer-coarse:hidden', activeCard.side === 'left' ? 'right-full pr-3' : 'left-full pl-3'), style: {
+                                            transition: activeCard.glide
+                                                ? 'transform var(--duration-normal) var(--ease-in-out)'
+                                                : 'opacity var(--duration-fast) var(--ease-out)',
+                                        }, children: _jsxs("div", { "data-testid": "session-reminder-card", className: cn(FLOATING_PANEL_SURFACE, 'w-72 overflow-hidden'), children: [_jsxs("div", { className: "flex items-center gap-3 px-4 pt-4 pb-3", children: [_jsx(CountdownRing, { share: share, size: 44, stroke: 3, tone: tone, paused: paused, children: !paused && Number.isFinite(nextAt) ? (_jsxs("span", { className: "flex flex-col items-center leading-none tabular-nums", children: [_jsx("span", { className: "text-foreground text-xs font-medium", children: major }), minor ? (_jsx("span", { className: "text-muted-foreground mt-0.5 text-[10px]" // audit:allow the minor unit inside a 44px ring
+                                                                        , children: minor })) : null] })) : null }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-foreground text-sm font-medium text-pretty", children: reminderTitle(shown) }), _jsx("p", { className: "text-muted-foreground mt-0.5 text-xs", children: next ? t('nextRun', { time: next }) : t('pausedLabel') })] })] }), shown.name ? (_jsx("p", { className: "text-muted-foreground line-clamp-4 px-4 pb-3 text-xs text-pretty whitespace-pre-line", children: shown.prompt })) : null, _jsx(ReminderFacts, { reminder: shown, now: now, className: "border-t px-4 py-3" }), _jsx(ReminderActions, { reminder: shown, controls: controls, manageHref: manageHref, onNavigate: () => setOpen(false), className: "border-t p-2" })] }) }));
+                                })()
+                                : null] })] }), confirm] }));
 }