dsh-plugin-subscriptions 0.3.1 → 0.4.1

package/README.md

@@ -22,6 +22,14 @@ The `image_generate` tool renders its result inline in the conversation:
 
 ![image_generate renders the image inline](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/image-generate-inline.png)
 
+Its `provider` parameter picks the image backend — the same prompt through GPT (`gpt-image-2`, top) and Grok (`grok-imagine-image-2.0`, bottom):
+
+![image_generate with provider gpt vs grok](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/image-generate-providers.png)
+
+The `video_generate` tool plays the generated clip inline:
+
+![video_generate plays the clip inline](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/video-generate-inline.png)
+
 ## Providers
 
 | Route    | Subscription      | Models |
@@ -37,7 +45,8 @@ Logged-in cards also show **subscription usage** — per rate-limit window (5-ho
 Also included, registered when the matching provider is enabled:
 
 - **`x_search`** tool (Grok) — xAI's hosted X search, returning `{ answer, citations }`.
-- **`image_generate`** tool (ChatGPT) — `gpt-image-2` via the Codex backend; PNGs are saved under `~/.dsh/plugins/subscriptions/images/` and the paths returned.
+- **`image_generate`** tool (ChatGPT or Grok) — `gpt-image-2` via the Codex backend, or `grok-imagine-image-2.0` via `api.x.ai/v1/images/generations`. The `provider` argument picks the preferred provider (`gpt`, the default, or `grok`); when the preferred one is logged out the other serves as fallback. Images are saved under `~/.dsh/plugins/subscriptions/images/` and the paths returned. The `size`/`quality` arguments map onto Grok's `aspect_ratio`/`quality` on the Grok path.
+- **`video_generate`** tool (Grok) — `grok-imagine-video-1.5` via `api.x.ai/v1/videos` (async submit + poll); MP4s are saved under `~/.dsh/plugins/subscriptions/videos/`, the path returned, and the clip plays inline in the conversation. Supports duration (1–15 s), aspect ratio, resolution, and image-to-video via `image_url`.
 
 ## Install
 
@@ -128,5 +137,5 @@ After `pnpm build`, restart `dsh web` to pick up changes.
 - `src/auth/` — PKCE/JWT helpers, token store, OAuth flow engine (temp loopback callback server), `/subscriptions-auth` RPC channel
 - `src/providers/` — per-provider OAuth constants/exchange/refresh + `LlmAdapter`s
 - `src/translate/` — dsh `Message[]` ⟷ OpenAI Responses / Anthropic Messages wire formats, SSE → `StreamChunk`
-- `src/tools/` — `x_search` and `image_generate`
+- `src/tools/` — `x_search`, `image_generate`, and `video_generate`
 - `src/client/` — the Settings → Subscriptions page (browser half, zh/en, theme-token aware)

package/README.zh.md

@@ -22,6 +22,14 @@
 
 ![image_generate 内联显示生成的图片](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/image-generate-inline.png)
 
+`provider` 参数可选择生图后端——同一条提示词分别走 GPT(`gpt-image-2`,上)和 Grok(`grok-imagine-image-2.0`,下):
+
+![image_generate 的 provider 参数对比 gpt 与 grok](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/image-generate-providers.png)
+
+`video_generate` 工具生成的视频直接内联播放:
+
+![video_generate 内联播放生成的视频](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/video-generate-inline.png)
+
 ## Provider 一览
 
 | 路由     | 订阅             | 模型 |
@@ -37,7 +45,8 @@
 随 provider 启用自动注册的工具:
 
 - **`x_search`**(Grok)—— xAI 托管的 X 搜索,返回 `{ answer, citations }`。
-- **`image_generate`**(ChatGPT)—— 经 Codex 后端调用 `gpt-image-2`;生成的 PNG 保存到 `~/.dsh/plugins/subscriptions/images/` 并返回路径。
+- **`image_generate`**(ChatGPT 或 Grok)—— 经 Codex 后端调用 `gpt-image-2`,或经 `api.x.ai/v1/images/generations` 调用 `grok-imagine-image-2.0`。`provider` 参数指定首选提供方(`gpt` 为默认值,可选 `grok`);首选方未登录时自动回退到另一方。图片保存到 `~/.dsh/plugins/subscriptions/images/` 并返回路径。Grok 路径上 `size`/`quality` 参数会映射为 Grok 的 `aspect_ratio`/`quality`。
+- **`video_generate`**(Grok)—— 经 `api.x.ai/v1/videos` 调用 `grok-imagine-video-1.5`(异步提交 + 轮询);MP4 保存到 `~/.dsh/plugins/subscriptions/videos/` 并返回路径,视频直接在对话里内联播放。支持时长(1–15 秒)、宽高比、分辨率,以及通过 `image_url` 做图生视频。
 
 ## 安装
 
@@ -128,5 +137,5 @@ pnpm test      # 编译后跑 node --test 单测
 - `src/auth/` —— PKCE/JWT 工具、token 存储、OAuth 流程引擎(临时本地回调服务)、`/subscriptions-auth` RPC 通道
 - `src/providers/` —— 各 provider 的 OAuth 常量/换发/刷新 + `LlmAdapter` 实现
 - `src/translate/` —— dsh `Message[]` 与 OpenAI Responses / Anthropic Messages 格式互转,SSE → `StreamChunk`
-- `src/tools/` —— `x_search` 与 `image_generate`
+- `src/tools/` —— `x_search`、`image_generate` 与 `video_generate`
 - `src/client/` —— 设置 → 订阅页面(浏览器面,中英文,跟随明暗主题)

package/lib/auth/rpc.d.ts

@@ -15,6 +15,11 @@ export interface ImageBytesResult {
     mediaType: string;
     dataBase64: string;
 }
+/** Decoded video bytes returned by the `video` endpoint. */
+export interface VideoBytesResult {
+    mediaType: string;
+    dataBase64: string;
+}
 /** Login state of one provider, as rendered by the Settings page. */
 export interface ProviderStatus {
     /** Whether a session exists in the store. */
@@ -64,6 +69,15 @@ export interface AuthController {
      * @throws when no attachment service is mounted or the read fails.
      */
     readImage(ref: ImageAttachmentRef, signal: AbortSignal): Promise<ImageBytesResult>;
+    /**
+     * Read one generated video's bytes for inline playback.
+     * @param name - bare MP4 file name inside the plugin's videos directory
+     *   (validated against {@link VIDEO_NAME_PATTERN}; never a path).
+     * @param signal - caller cancellation from the RPC transport.
+     * @returns the media type and base64-encoded bytes.
+     * @throws when the file does not exist or cannot be read.
+     */
+    readVideo(name: string, signal: AbortSignal): Promise<VideoBytesResult>;
 }
 /**
  * Register the `/subscriptions-auth` RPC channel when a host connection exists.

package/lib/auth/rpc.js

@@ -10,6 +10,8 @@ import { PROVIDER_IDS } from './store.js';
 export const SUBSCRIPTIONS_AUTH_CHANNEL = '/subscriptions-auth';
 /** Media types the attachment store accepts (ImageMediaType). */
 const IMAGE_MEDIA_TYPES = ['image/png', 'image/jpeg', 'image/webp', 'image/gif'];
+/** Bare MP4 file names the `video` endpoint accepts (no path separators). */
+const VIDEO_NAME_PATTERN = /^[\w.-]+\.mp4$/;
 /** Payload carried no usable provider id — an RPC client bug, not a server failure. */
 class BadRequest extends Error {
 }
@@ -72,6 +74,20 @@ function readImageRef(payload) {
         ...name === undefined ? {} : { name: name },
     };
 }
+/**
+ * Validate the `video` endpoint's payload into a bare file name. Rejecting
+ * anything with a path separator (the pattern allows none) pins every read
+ * inside the plugin's videos directory.
+ */
+function readVideoName(payload) {
+    if (typeof payload !== 'object' || payload === null)
+        throw new BadRequest('payload must be an object');
+    const name = payload.name;
+    if (typeof name !== 'string' || !VIDEO_NAME_PATTERN.test(name)) {
+        throw new BadRequest('payload.name must be a bare .mp4 file name');
+    }
+    return name;
+}
 async function dispatch(controller, endpoint, payload, signal) {
     switch (endpoint) {
         case 'status': {
@@ -95,6 +111,8 @@ async function dispatch(controller, endpoint, payload, signal) {
             return ok(await controller.usage(readProvider(payload), signal));
         case 'image':
             return ok(await controller.readImage(readImageRef(payload), signal));
+        case 'video':
+            return ok(await controller.readVideo(readVideoName(payload), signal));
         default:
             throw new BadRequest(`unknown /subscriptions-auth endpoint "${endpoint}"`);
     }

package/lib/client/VideoGenerateToolview.d.ts

@@ -0,0 +1,42 @@
+import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
+import type { ToolCallBlock } from '@deepseek-ai/dsh-client-runtime/client';
+import type { SubscriptionsKey } from './locales.js';
+/** Mirror of ui-tool's ToolCallOwnerProps (see ImageGenerateToolview). */
+interface ToolCallOwnerProps {
+    callId: string;
+    toolName: string;
+    block: ToolCallBlock;
+    cwd?: string | undefined;
+    openFile: (path: string) => void;
+    inspect?: (() => void) | undefined;
+}
+/** Decoded video bytes as the node half's `video` endpoint answers them. */
+export interface VideoBytes {
+    mediaType: string;
+    dataBase64: string;
+}
+/** Injected dependencies of {@link VideoGenerateToolview} (slot `inject`). */
+export interface VideoGenerateToolviewInjected {
+    /** Loads one generated video's bytes by bare file name. */
+    loadVideo: (name: string) => Promise<VideoBytes>;
+}
+/**
+ * Props delivered by the toolview outlet: the owner share plus the inject
+ * face and the framework locale seat, spread flat.
+ */
+export type VideoGenerateToolviewProps = Partial<ToolCallOwnerProps> & Partial<VideoGenerateToolviewInjected> & {
+    t?: ((key: SubscriptionsKey, params?: Record<string, unknown>) => string) | undefined;
+};
+/**
+ * Build the video loader over the `/subscriptions-auth` `video` endpoint.
+ * @param rpc - Connection RPC caller.
+ * @returns loader resolving a bare file name to the decoded bytes.
+ */
+export declare function createVideoLoader(rpc: ConnectionHandle['rpc']): (name: string) => Promise<VideoBytes>;
+/**
+ * The `video_generate` keyed toolview component.
+ * @param props - owner share, inject face, and locale seat (spread flat).
+ * @returns the call row plus, once settled, the player / text / error body.
+ */
+export declare function VideoGenerateToolview(props: VideoGenerateToolviewProps): import("react").JSX.Element | null;
+export {};

package/lib/client/VideoGenerateToolview.js

@@ -0,0 +1,178 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Keyed toolview for the `video_generate` tool: renders the generated video
+ * inline in the conversation. The row shows the call's prompt while running
+ * and after settling; a settled success loads the MP4 bytes through the node
+ * half's `/subscriptions-auth` `video` endpoint (by bare file name), builds a
+ * Blob URL, and plays it in a native `<video controls>` element. The file
+ * name comes from the result's presentation meta when the dispatch was
+ * top-level, and is recovered from the "Saved video to …" text line for
+ * nested (Code Mode) dispatches, where the harness computes no meta. A result
+ * with neither renders its text; an error result renders the first error line.
+ *
+ * The 'tool.call.toolview' SlotMap entry is declared by
+ * ImageGenerateToolview.tsx in this same package (one declaration per
+ * augmentation), so this file only mirrors the owner-props shape.
+ */
+import { useEffect, useState } from 'react';
+import { IconSparkle16 } from '@deepseek-ai/dsh-client-ui-primitives';
+import { en } from './locales.js';
+/** Logical RPC channel served by the node half of this plugin. */
+const SUBSCRIPTIONS_AUTH_CHANNEL = '/subscriptions-auth';
+/** Title prompt truncation budget (characters). */
+const PROMPT_MAX_LENGTH = 60;
+/**
+ * Build the video loader over the `/subscriptions-auth` `video` endpoint.
+ * @param rpc - Connection RPC caller.
+ * @returns loader resolving a bare file name to the decoded bytes.
+ */
+export function createVideoLoader(rpc) {
+    return async (name) => {
+        const result = await rpc.call(SUBSCRIPTIONS_AUTH_CHANNEL, 'video', { name });
+        if (!result.ok)
+            throw new Error(result.error.message);
+        return result.value;
+    };
+}
+/**
+ * English-dictionary fallback for a missing locale seat (standalone renders);
+ * the framework always supplies the namespace-bound one.
+ */
+function fallbackTranslate(key, params) {
+    let text = en[key];
+    for (const [name, value] of Object.entries(params ?? {})) {
+        text = text.replaceAll(`{${name}}`, String(value));
+    }
+    return text;
+}
+/** Extract the prompt from the call's raw args JSON; falls back to the first string value, then the raw line. */
+function derivePrompt(argsRaw) {
+    let parsed;
+    try {
+        parsed = JSON.parse(argsRaw);
+    }
+    catch {
+        // Non-JSON args (mid-stream truncation): fall back to the raw string below.
+        parsed = undefined;
+    }
+    let prompt;
+    if (typeof parsed === 'object' && parsed !== null) {
+        const args = parsed;
+        if (typeof args.prompt === 'string' && args.prompt !== '')
+            prompt = args.prompt;
+        else {
+            for (const value of Object.values(args)) {
+                if (typeof value === 'string' && value !== '') {
+                    prompt = value;
+                    break;
+                }
+            }
+        }
+    }
+    const line = (prompt ?? argsRaw).split('\n', 1)[0] ?? '';
+    return line.length > PROMPT_MAX_LENGTH ? `${line.slice(0, PROMPT_MAX_LENGTH)}…` : line;
+}
+/** Flatten a settled result's text blocks (the fallback body and the error line). */
+function resultText(block) {
+    if (!('kind' in block))
+        return '';
+    const parts = [];
+    for (const part of block.content) {
+        if (part.type === 'text')
+            parts.push(part.text);
+    }
+    if (parts.length === 0 && block.error !== undefined)
+        parts.push(`${block.error.name}: ${block.error.code}`);
+    return parts.join('\n');
+}
+/**
+ * The generated video's bare file name: presentation meta first (top-level
+ * dispatches), then the render text's "Saved video to …" line (nested
+ * dispatches compute no meta).
+ */
+function resolveFileName(block) {
+    if (!('kind' in block))
+        return undefined;
+    const meta = block.meta;
+    if (typeof meta === 'object' && meta !== null) {
+        const fileName = meta.fileName;
+        if (typeof fileName === 'string' && fileName.length > 0)
+            return fileName;
+    }
+    const match = /^Saved video to (.+\.mp4)/m.exec(resultText(block));
+    if (match === null)
+        return undefined;
+    const path = match[1];
+    return path.slice(path.lastIndexOf('/') + 1);
+}
+/** Decode a base64 payload into bytes (browser-side; no Buffer). */
+function base64Bytes(dataBase64) {
+    const binary = atob(dataBase64);
+    const bytes = new Uint8Array(binary.length);
+    for (let index = 0; index < binary.length; index++)
+        bytes[index] = binary.charCodeAt(index);
+    return bytes;
+}
+const styles = {
+    container: { display: 'flex', flexDirection: 'column', gap: 6, padding: '4px 0' },
+    row: { display: 'flex', alignItems: 'center', gap: 6, minWidth: 0 },
+    icon: { display: 'inline-flex', flexShrink: 0, color: 'var(--dsw-alias-label-tertiary)' },
+    title: {
+        fontSize: 13, lineHeight: '20px', color: 'var(--dsw-alias-label-primary)',
+        overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+    },
+    subtle: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-tertiary)' },
+    output: {
+        margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-label-secondary)',
+        whiteSpace: 'pre-wrap', overflowWrap: 'anywhere',
+    },
+    error: { margin: 0, fontSize: 12, lineHeight: '18px', color: 'var(--dsw-alias-state-error-primary)' },
+    video: {
+        display: 'block', maxWidth: 480, width: '100%', borderRadius: 8,
+        backgroundColor: 'var(--dsw-alias-fill-tertiary)',
+    },
+};
+/**
+ * The `video_generate` keyed toolview component.
+ * @param props - owner share, inject face, and locale seat (spread flat).
+ * @returns the call row plus, once settled, the player / text / error body.
+ */
+export function VideoGenerateToolview(props) {
+    const { block, loadVideo } = props;
+    const t = props.t ?? fallbackTranslate;
+    const settled = block !== undefined && 'kind' in block;
+    const isError = settled && block.isError;
+    const fileName = block !== undefined && settled && !isError ? resolveFileName(block) : undefined;
+    const [load, setLoad] = useState({ phase: 'loading' });
+    useEffect(() => {
+        if (fileName === undefined || loadVideo === undefined)
+            return;
+        let cancelled = false;
+        let objectUrl;
+        setLoad({ phase: 'loading' });
+        loadVideo(fileName).then((video) => {
+            if (cancelled)
+                return;
+            // Uint8Array#slice detaches a plain ArrayBuffer view for BlobPart.
+            objectUrl = URL.createObjectURL(new Blob([base64Bytes(video.dataBase64).slice()], { type: video.mediaType }));
+            setLoad({ phase: 'ready', url: objectUrl });
+        }, (error) => {
+            if (cancelled)
+                return;
+            setLoad({ phase: 'failed', message: error instanceof Error ? error.message : String(error) });
+        });
+        return () => {
+            cancelled = true;
+            if (objectUrl !== undefined)
+                URL.revokeObjectURL(objectUrl);
+        };
+    }, [fileName, loadVideo]);
+    if (block === undefined)
+        return null;
+    const argsRaw = (settled ? block.call?.argsRaw : block.argsRaw) ?? '';
+    const title = `video_generate: ${derivePrompt(argsRaw)}`;
+    const text = settled ? resultText(block) : '';
+    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: styles.row, children: [_jsx("span", { style: styles.icon, children: _jsx(IconSparkle16, { size: 14 }) }), _jsx("span", { style: styles.title, children: title })] }), !settled && _jsx("p", { style: styles.subtle, children: t('generatingVideo') }), settled && isError && text !== '' && (_jsx("p", { style: styles.error, children: text.split('\n', 1)[0] })), settled && !isError && fileName !== undefined && load.phase === 'loading' && (_jsx("p", { style: styles.subtle, children: t('videoLoading') })), settled && !isError && fileName !== undefined && load.phase === 'failed' && (_jsx("p", { style: styles.error, children: t('videoLoadFailed', { message: load.message }) })), settled && !isError && fileName !== undefined && load.phase === 'ready' && (
+            // eslint-disable-next-line jsx-a11y/media-has-caption -- generated clip; no caption track exists.
+            _jsx("video", { style: styles.video, src: load.url, controls: true, preload: "metadata" })), settled && !isError && fileName === undefined && text !== '' && (_jsx("p", { style: styles.output, children: text }))] }));
+}

package/lib/client/index.d.ts

@@ -10,6 +10,7 @@ import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client';
 import type { SubscriptionsKey } from './locales.js';
 export type { SubscriptionsSectionInjected, SubscriptionsSectionProps } from './SubscriptionsSection.js';
 export type { ImageGenerateToolviewInjected, ImageGenerateToolviewProps } from './ImageGenerateToolview.js';
+export type { VideoGenerateToolviewInjected, VideoGenerateToolviewProps } from './VideoGenerateToolview.js';
 export type { SubscriptionsKey } from './locales.js';
 declare module '@deepseek-ai/dsh-client-ui-slots' {
     interface LocaleNamespaceMap {

package/lib/client/index.js

@@ -3,6 +3,7 @@
 // nodenext the .js specifier resolves to the .tsx source (see README note).
 import { SubscriptionsSection } from './SubscriptionsSection.js';
 import { ImageGenerateToolview, createImageLoader } from './ImageGenerateToolview.js';
+import { VideoGenerateToolview, createVideoLoader } from './VideoGenerateToolview.js';
 import { en, zh } from './locales.js';
 /** Dictionary namespace owned by this plugin. */
 const NS = 'settings.subscriptions';
@@ -43,4 +44,13 @@ export function apply(ctx) {
         locale: NS,
         inject: toolviewInjected,
     }, ImageGenerateToolview));
+    // The video_generate keyed toolview plays the saved MP4 inline; its bytes
+    // ride the same channel's `video` endpoint through the injected loader.
+    const videoToolviewInjected = () => ({ loadVideo: createVideoLoader(connection.rpc) });
+    ctx.slots.inject('tool.call.toolview', () => ctx.slots.register({
+        name: 'tool.call.toolview',
+        key: 'video_generate',
+        locale: NS,
+        inject: videoToolviewInjected,
+    }, VideoGenerateToolview));
 }

package/lib/client/locales.d.ts

@@ -37,6 +37,9 @@ export declare const en: {
     imageLoadFailed: string;
     imagePreview: string;
     imageClose: string;
+    generatingVideo: string;
+    videoLoading: string;
+    videoLoadFailed: string;
 };
 /** zh strings, one per {@link en} key. */
 export declare const zh: {
@@ -76,6 +79,9 @@ export declare const zh: {
     imageLoadFailed: string;
     imagePreview: string;
     imageClose: string;
+    generatingVideo: string;
+    videoLoading: string;
+    videoLoadFailed: string;
 };
 /** The Subscriptions namespace key union (en is the key-set source of truth). */
 export type SubscriptionsKey = keyof typeof en;

package/lib/client/locales.js

@@ -37,6 +37,9 @@ export const en = {
     imageLoadFailed: 'Retry',
     imagePreview: 'Image preview',
     imageClose: 'Close',
+    generatingVideo: 'Generating video…',
+    videoLoading: 'Loading video…',
+    videoLoadFailed: 'Video failed to load: {message}',
 };
 /** zh strings, one per {@link en} key. */
 export const zh = {
@@ -76,4 +79,7 @@ export const zh = {
     imageLoadFailed: '重试',
     imagePreview: '图片预览',
     imageClose: '关闭',
+    generatingVideo: '正在生成视频…',
+    videoLoading: '视频加载中…',
+    videoLoadFailed: '视频加载失败：{message}',
 };