@deepwatch/dsh-live 0.1.0

package/lib/client/components.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { toneFor, tokenFor } from '@deepwatch/dsh-client-brand';
+import { describeContinuity, } from '../session.js';
+/** Connection states, mapped onto the brand's status vocabulary. */
+const CONNECTION_STATUS = {
+    connecting: 'queued',
+    live: 'running',
+    reconnecting: 'gap',
+    lost: 'unavailable',
+    stopped: 'completed',
+};
+/** A millisecond count as a clock reading. */
+function clock(ms) {
+    if (ms === null)
+        return '—';
+    const total = Math.max(0, Math.floor(ms / 1000));
+    const seconds = String(total % 60).padStart(2, '0');
+    const minutes = String(Math.floor(total / 60) % 60).padStart(2, '0');
+    const hours = String(Math.floor(total / 3600)).padStart(2, '0');
+    return `${hours}:${minutes}:${seconds}`;
+}
+/**
+ * Session, media and wall clocks, side by side.
+ *
+ * Three readings rather than one, because they answer three questions and
+ * disagree constantly during a live observation. A single "time" field would
+ * be right about one of them and quietly wrong about the other two.
+ */
+export function LiveHeader({ state }) {
+    const status = CONNECTION_STATUS[state.connection] ?? 'unavailable';
+    return (_jsxs("header", { "data-watch-live-header": "", "data-watch-live-session": state.sessionId, children: [_jsx("span", { "data-watch-field": "target", dir: "ltr", children: state.target }), _jsx("span", { "data-watch-field": "kind", children: state.kind }), _jsx("span", { "data-watch-field": "status", children: state.status }), _jsxs("span", { "data-watch-field": "connection", style: { color: tokenFor(toneFor(status)) }, children: [_jsx("span", { "aria-hidden": "true", children: state.connection === 'live' ? '●' : '▲' }), _jsx("span", { children: state.connection })] }), _jsx("span", { "data-watch-field": "session-clock", dir: "ltr", children: `session ${clock(state.clocks.sessionMs)}` }), _jsx("span", { "data-watch-field": "media-clock", dir: "ltr", children: `media ${clock(state.clocks.mediaMs)}` }), _jsx("span", { "data-watch-field": "wall-clock", dir: "ltr", children: state.clocks.wallMs === null ? 'wall —' : `wall ${new Date(state.clocks.wallMs).toISOString()}` }), _jsx("span", { "data-watch-field": "latency", children: state.clocks.latencyMs === null ? 'latency —' : `latency ${String(state.clocks.latencyMs)}ms` }), _jsx("span", { "data-watch-field": "continuity", children: describeContinuity(state) })] }));
+}
+/**
+ * One observed event.
+ *
+ * A gap draws as a gap — dashed, glyphed and labelled — and is never
+ * collapsed into the events around it.
+ */
+export function LiveEventRow({ event, onSelect }) {
+    const isGap = event.kind === 'gap';
+    return (_jsx("li", { "data-watch-live-event": event.kind, "data-watch-seq": String(event.seq), children: _jsxs("button", { type: "button", onClick: () => { onSelect(event); }, style: {
+                font: 'inherit',
+                color: 'inherit',
+                cursor: 'pointer',
+                background: isGap ? 'var(--watch-wash-caution)' : 'none',
+                border: isGap ? '1px dashed var(--watch-tone-caution)' : '1px solid transparent',
+                textAlign: 'start',
+                width: '100%',
+            }, children: [_jsx("span", { dir: "ltr", style: { fontVariantNumeric: 'tabular-nums' }, children: clock(event.mediaMs) }), isGap && _jsx("span", { "aria-hidden": "true", children: ' ⌇ ' }), _jsx("span", { dir: "auto", children: event.text })] }) }));
+}
+/**
+ * The Live mode body.
+ *
+ * `Resnapshot needed` is rendered as a banner rather than a toast. A transient
+ * notification for "your view of this is not continuous" is a notification
+ * that will be missed exactly when it matters.
+ */
+export function LiveSurface(props) {
+    const { state } = props;
+    return (_jsxs("section", { "data-watch-live": "", "aria-label": "Live observation", children: [_jsx(LiveHeader, { state: state }), state.needsSnapshot && (_jsxs("p", { role: "alert", "data-watch-live-resnapshot": "", style: { borderInlineStart: '3px solid var(--watch-tone-caution)', paddingInlineStart: '8px' }, children: ['This view is not continuous. ', state.lastError ?? 'The stream did not continue from the last cursor.', ' A fresh snapshot is needed before anything here can be read as unbroken.'] })), _jsxs("div", { "data-watch-live-controls": "", children: [_jsx("button", { type: "button", "data-watch-action": "start", onClick: props.onStart, children: "Start" }), _jsx("button", { type: "button", "data-watch-action": "pin", onClick: props.onPin, children: "Pin moment" }), _jsx("button", { type: "button", "data-watch-action": "finalize", onClick: () => { props.onStop(true); }, children: "Stop and keep" }), _jsx("button", { type: "button", "data-watch-action": "discard", onClick: () => { props.onStop(false); }, children: "Stop and discard" })] }), _jsx("ul", { "data-watch-live-events": "", style: { listStyle: 'none', margin: 0, padding: 0 }, children: state.events.map(event => (_jsx(LiveEventRow, { event: event, onSelect: props.onSelect }, String(event.seq)))) }), state.pinned.length > 0 && (_jsx("ul", { "data-watch-live-pinned": "", "aria-label": "Pinned moments", children: state.pinned.map(moment => (_jsxs("li", { "data-watch-pinned": moment.momentId, children: [_jsx("span", { dir: "ltr", children: clock(moment.atMediaMs) }), _jsx("span", { dir: "auto", children: ` ${moment.note}` })] }, moment.momentId))) })), state.trimmed > 0 && (_jsxs("p", { "data-watch-live-trimmed": String(state.trimmed), children: [`${String(state.trimmed)} earlier event(s) are no longer held in this view. `, 'Gaps and pinned moments were kept.'] }))] }));
+}
+//# sourceMappingURL=components.js.map

package/lib/client/index.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The Live surface, registered into DSH's slots.
+ *
+ * @module @deepwatch/dsh-live/client
+ */
+import type { Context } from '@deepseek-ai/cordis';
+export * from './components.js';
+export * from './live-mode.js';
+export * from '../session.js';
+/** Services this half needs before it can register anything. */
+export declare const inject: string[];
+/** Register the Live mode body. */
+export declare function apply(ctx: Context): void;
+//# sourceMappingURL=index.d.ts.map

package/lib/client/index.js

@@ -0,0 +1,22 @@
+/**
+ * The Live surface, registered into DSH's slots.
+ *
+ * @module @deepwatch/dsh-live/client
+ */
+import { LiveModeView } from './live-mode.js';
+export * from './components.js';
+export * from './live-mode.js';
+export * from '../session.js';
+/** Services this half needs before it can register anything. */
+export const inject = ['slots'];
+/** Register the Live mode body. */
+export function apply(ctx) {
+    const slots = ctx.slots;
+    // Live is a product mode, so it registers as one of DSH's views. The session
+    // header turns the registered set into its own tab strip, which is why this
+    // is a view rather than a panel Watch would have to place and style itself.
+    slots.inject('conversation.view', () => {
+        slots.register({ name: 'conversation.view', id: 'live', label: 'Live', order: 30 }, LiveModeView);
+    });
+}
+//# sourceMappingURL=index.js.map

package/lib/client/live-mode.d.ts

@@ -0,0 +1,38 @@
+/**
+ * The Live mode body.
+ *
+ * It lives in the package that owns the capability rather than in the workspace
+ * shell. That is structural, not tidiness: the shell provides the scaffold every
+ * mode shares, and a mode that also needed something back from its own package
+ * made the two depend on each other. TypeScript refused the circular project
+ * reference, which was the right answer to the wrong arrangement.
+ *
+ * Nothing here asks the operating system for anything. Rendering the source list
+ * calls no probe and no permission API; a prompt on page load teaches people to
+ * click Allow without reading, and after that the prompt means nothing.
+ *
+ * @module @deepwatch/dsh-live/client/live-mode
+ */
+import type { ReactNode } from 'react';
+import type { ModeViewProps } from '@deepwatch/dsh-workspace/surface';
+import type { CaptureReceipt, CaptureState, Observation, PermissionState } from '../capture.js';
+/** A snapshot of a session, flat enough to render without owning the session. */
+export interface LiveSessionView {
+    readonly sessionId: string;
+    readonly sourceId: string;
+    readonly state: CaptureState;
+    readonly permission: PermissionState;
+    readonly runId: string | null;
+    readonly startedAt: string | null;
+    readonly observations: readonly Observation[];
+    readonly reason: string;
+}
+export interface LiveModeProps extends ModeViewProps {
+    /** The session in progress, when there is one. */
+    readonly session?: LiveSessionView | null;
+    /** Receipts from sessions that have ended, newest first. */
+    readonly receipts?: readonly CaptureReceipt[];
+}
+/** The Live mode: what could be observed, and what is being observed. */
+export declare function LiveModeView({ session, receipts }?: LiveModeProps): ReactNode;
+//# sourceMappingURL=live-mode.d.ts.map

package/lib/client/live-mode.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { EmptyState, Facts, ModeSurface, Panel, Unavailable } from '@deepwatch/dsh-workspace/surface';
+import { SOURCES } from '../sources-catalogue.js';
+/** Words for a state, so it is never only a colour. */
+const STATE_WORDS = {
+    idle: 'Not started',
+    requesting_permission: 'Waiting for your permission',
+    starting: 'Starting',
+    active: 'Observing',
+    paused: 'Paused',
+    stopping: 'Stopping',
+    stopped: 'Stopped',
+    cancelled: 'Cancelled',
+    denied: 'Permission refused — nothing was captured',
+    unavailable: 'Source unavailable',
+    timed_out: 'The source did not start in time',
+    failed: 'Failed',
+};
+const PERMISSION_WORDS = {
+    not_requested: 'Not requested',
+    requested: 'Requested',
+    granted: 'Granted',
+    denied: 'Refused',
+};
+function toneFor(state) {
+    if (state === 'active')
+        return 'var(--watch-tone-active)';
+    if (['denied', 'failed', 'timed_out', 'unavailable'].includes(state))
+        return 'var(--watch-tone-error)';
+    if (['paused', 'starting', 'requesting_permission', 'stopping'].includes(state))
+        return 'var(--watch-tone-caution)';
+    return 'var(--watch-tone-neutral)';
+}
+/** The Live mode: what could be observed, and what is being observed. */
+export function LiveModeView({ session = null, receipts = [] } = {}) {
+    return (_jsxs(ModeSurface, { title: "Live", lead: 'A continuous observation over a source, with its clock, its gaps and '
+            + 'its freshness. Opening this page starts nothing and asks for nothing.', children: [session === null
+                ? (_jsx(EmptyState, { shows: 'An active session: which source is bound, its permission state, '
+                        + 'the observations arriving with their timestamps, and how it ended.', why: "No live session is running, and no source has been started.", next: [
+                        'Choose a source below and start it — each asks for its own permission at that moment, not before.',
+                        'Bind ASR or Visual Perception in Settings → Role Bindings if you want a source interpreted rather than only recorded.',
+                    ] }))
+                : (_jsxs(_Fragment, { children: [_jsxs(Panel, { children: [_jsxs("div", { style: { display: 'flex', alignItems: 'baseline', gap: '10px', flexWrap: 'wrap' }, children: [_jsx("strong", { style: { fontSize: '15px', color: toneFor(session.state) }, children: STATE_WORDS[session.state] }), _jsx("span", { style: { fontSize: '12px', color: 'var(--dsw-alias-label-secondary)' }, children: session.reason === '' ? session.sourceId : session.reason })] }), _jsx("div", { style: { marginTop: '12px' }, children: _jsx(Facts, { rows: [
+                                            ['Session', _jsx("span", { "data-watch-ltr": true, children: session.sessionId }, "s")],
+                                            ['Source', session.sourceId],
+                                            ['Permission', PERMISSION_WORDS[session.permission]],
+                                            ['Run', session.runId ?? 'Not associated with a run'],
+                                            ['Started', _jsx("span", { "data-watch-ltr": true, children: session.startedAt ?? '—' }, "t")],
+                                            ['Observations', String(session.observations.length)],
+                                        ] }) })] }), _jsx(Panel, { heading: `Observations (${String(session.observations.length)})`, children: session.observations.length === 0
+                                ? (_jsx("p", { style: { fontSize: '13px', margin: 0, color: 'var(--dsw-alias-label-tertiary)' }, children: "Nothing observed yet. An observation without a timestamp could not be cited, so none is recorded until the clock is running." }))
+                                : (_jsx("ol", { style: { margin: 0, paddingInlineStart: '20px', fontSize: '12.5px', lineHeight: 1.7 }, children: session.observations.slice(-25).map(observation => (_jsxs("li", { children: [_jsx("span", { "data-watch-ltr": true, style: { color: 'var(--dsw-alias-label-tertiary)' }, children: `+${String(observation.offsetMs)}ms` }), ' ', observation.text] }, observation.observationId))) })) })] })), _jsx(Panel, { heading: "Sources", children: _jsx(Facts, { rows: SOURCES.map(source => [
+                        source.name,
+                        _jsxs("span", { children: [source.what, _jsx("br", {}), _jsx("span", { style: { color: 'var(--dsw-alias-label-tertiary)' }, children: source.asks }), source.canAct
+                                    ? (_jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { style: { color: 'var(--watch-tone-caution)' }, children: "This one can act on the world, not only record it." })] }))
+                                    : null] }, source.id),
+                    ]) }) }), receipts.length === 0
+                ? null
+                : (_jsx(Panel, { heading: `Finished sessions (${String(receipts.length)})`, children: _jsx(Facts, { rows: receipts.slice(0, 10).map(receipt => [
+                            receipt.sessionId,
+                            _jsxs("span", { children: [STATE_WORDS[receipt.finalState], ` · ${String(receipt.observationCount)} observation(s)`, receipt.reason === '' ? '' : ` · ${receipt.reason}`] }, receipt.sessionId),
+                        ]) }) })), _jsx(Unavailable, { what: "Sources this machine cannot provide", because: 'Every source above keeps its real adapter and its real permission '
+                    + 'boundary, and each is exercised deterministically. A source is only '
+                    + 'offered as startable where its adapter can actually run here — a '
+                    + 'control that fails when pressed teaches people the product is '
+                    + 'broken rather than that a capability is absent.', wouldNeed: [
+                    'The hardware or OS support the adapter names, on the machine running Watch.',
+                    'The relevant OS permission, granted at first use rather than on load.',
+                    'A role bound for interpretation if the stream is to be transcribed or described.',
+                ] })] }));
+}
+//# sourceMappingURL=live-mode.js.map