dsh-plugin-subscriptions 0.1.0 → 0.1.1

package/README.md

@@ -4,6 +4,20 @@ English | [中文](README.zh.md)
 
 Use your **ChatGPT (Codex)**, **Claude**, and **Grok (X Premium)** subscriptions as LLM providers in [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) — no API keys. Login happens in the dsh web UI (Settings → Subscriptions); tokens live at `~/.dsh/plugins/subscriptions/auth.json` (mode 0600) and refresh automatically.
 
+## Demo
+
+Settings → **Subscriptions**: per-provider OAuth login/logout, no API keys (account address masked in the screenshot):
+
+![Subscriptions settings page](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/subscriptions.png)
+
+Logged-in providers join the session model picker with their live model catalogs:
+
+![Model picker with subscription models](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/model-picker.png)
+
+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)
+
 ## Providers
 
 | Route    | Subscription      | Models |
@@ -21,7 +35,13 @@ Also included, registered when the matching provider is enabled:
 
 ## Install
 
-With the `dsh` CLI available:
+With the `dsh` CLI available, install from npm (prebuilt artifacts, no build permission needed):
+
+```sh
+dsh plugin --profile web add dsh-plugin-subscriptions
+```
+
+Or install the sources from GitHub:
 
 ```sh
 dsh plugin --profile web add github:V1ki/dsh-plugin-subscriptions
@@ -47,6 +67,7 @@ dsh plugin --profile web add ./dsh-plugin-subscriptions
 Headless-only usage without installing into a profile (log in via the web UI first — the token file is shared):
 
 ```sh
+cp overlay.example.yml overlay.yml   # then edit the name: to this checkout's absolute lib/index.js path
 dsh --profile headless --patch <checkout>/overlay.yml "your task"
 ```
 

package/README.zh.md

@@ -4,6 +4,20 @@
 
 把你的 **ChatGPT(Codex)**、**Claude**、**Grok(X Premium)**订阅当作 [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness) 的 LLM provider 使用 —— 不需要 API key。登录在 dsh web 界面完成(设置 → 订阅);token 保存在 `~/.dsh/plugins/subscriptions/auth.json`(权限 0600),过期自动刷新。
 
+## 演示
+
+设置 → **订阅**:每个 provider 的 OAuth 登录/退出,无需 API key(截图中账号已打码):
+
+![订阅设置页](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/subscriptions.png)
+
+已登录的 provider 会带着实时模型目录进入会话模型选择器:
+
+![模型选择器中的订阅模型](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/model-picker.png)
+
+`image_generate` 工具生成的图片直接内联显示在对话里:
+
+![image_generate 内联显示生成的图片](https://raw.githubusercontent.com/V1ki/dsh-plugin-subscriptions/main/docs/images/image-generate-inline.png)
+
 ## Provider 一览
 
 | 路由     | 订阅             | 模型 |
@@ -21,7 +35,13 @@
 
 ## 安装
 
-本机已有 `dsh` CLI 时:
+本机已有 `dsh` CLI 时,从 npm 安装(预构建产物,无需构建授权):
+
+```sh
+dsh plugin --profile web add dsh-plugin-subscriptions
+```
+
+也可以从 GitHub 安装源码:
 
 ```sh
 dsh plugin --profile web add github:V1ki/dsh-plugin-subscriptions
@@ -47,6 +67,7 @@ dsh plugin --profile web add ./dsh-plugin-subscriptions
 不装进 profile 的 headless 用法(先在 web 界面登录过 —— token 文件是共享的):
 
 ```sh
+cp overlay.example.yml overlay.yml   # 然后把 name: 改成本检出的 lib/index.js 绝对路径
 dsh --profile headless --patch <检出目录>/overlay.yml "你的任务"
 ```
 

package/lib/auth/rpc.d.ts

@@ -5,9 +5,15 @@
  * outcomes are returned as RpcResult values; handlers never throw.
  */
 import type { Context } from '@deepseek-ai/cordis';
+import type { ImageAttachmentRef } from '@deepseek-ai/dsh-attachment';
 import { type ProviderId } from './store.js';
 /** The RPC channel this plugin registers on the host connection. */
 export declare const SUBSCRIPTIONS_AUTH_CHANNEL = "/subscriptions-auth";
+/** Decoded image bytes returned by the `image` endpoint. */
+export interface ImageBytesResult {
+    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. */
@@ -42,6 +48,14 @@ export interface AuthController {
     cancel(provider: ProviderId): Promise<void>;
     /** Delete the stored session. */
     logout(provider: ProviderId): Promise<void>;
+    /**
+     * Read one image attachment's bytes for inline display.
+     * @param ref - the full durable reference (`readImage` verifies against it).
+     * @param signal - caller cancellation from the RPC transport.
+     * @returns the media type and base64-encoded bytes.
+     * @throws when no attachment service is mounted or the read fails.
+     */
+    readImage(ref: ImageAttachmentRef, signal: AbortSignal): Promise<ImageBytesResult>;
 }
 /**
  * Register the `/subscriptions-auth` RPC channel when a host connection exists.

package/lib/auth/rpc.js

@@ -4,9 +4,12 @@
  * profile); headless compositions load the plugin without it. All business
  * outcomes are returned as RpcResult values; handlers never throw.
  */
+import { AttachmentId } from '@deepseek-ai/dsh-attachment';
 import { PROVIDER_IDS } from './store.js';
 /** The RPC channel this plugin registers on the host connection. */
 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'];
 /** Payload carried no usable provider id — an RPC client bug, not a server failure. */
 class BadRequest extends Error {
 }
@@ -37,7 +40,39 @@ function readString(payload, field) {
     }
     return value;
 }
-async function dispatch(controller, endpoint, payload) {
+/** Validate the `image` endpoint's payload into a full attachment reference. */
+function readImageRef(payload) {
+    if (typeof payload !== 'object' || payload === null)
+        throw new BadRequest('payload must be an object');
+    const record = payload;
+    const attachmentId = record.attachmentId;
+    if (typeof attachmentId !== 'string' || attachmentId.length === 0) {
+        throw new BadRequest('payload.attachmentId must be a non-empty string');
+    }
+    const mediaType = record.mediaType;
+    if (typeof mediaType !== 'string' || !IMAGE_MEDIA_TYPES.includes(mediaType)) {
+        throw new BadRequest(`payload.mediaType must be one of ${IMAGE_MEDIA_TYPES.join(', ')}`);
+    }
+    for (const field of ['bytes', 'width', 'height']) {
+        const value = record[field];
+        if (typeof value !== 'number' || !Number.isInteger(value) || value <= 0) {
+            throw new BadRequest(`payload.${field} must be a positive integer`);
+        }
+    }
+    const name = record.name;
+    if (name !== undefined && typeof name !== 'string') {
+        throw new BadRequest('payload.name must be a string when present');
+    }
+    return {
+        attachmentId: AttachmentId(attachmentId),
+        mediaType: mediaType,
+        bytes: record.bytes,
+        width: record.width,
+        height: record.height,
+        ...name === undefined ? {} : { name: name },
+    };
+}
+async function dispatch(controller, endpoint, payload, signal) {
     switch (endpoint) {
         case 'status': {
             const entries = await Promise.all(PROVIDER_IDS.map(async (provider) => [provider, await controller.status(provider)]));
@@ -56,6 +91,8 @@ async function dispatch(controller, endpoint, payload) {
         case 'logout':
             await controller.logout(readProvider(payload));
             return ok({ ok: true });
+        case 'image':
+            return ok(await controller.readImage(readImageRef(payload), signal));
         default:
             throw new BadRequest(`unknown /subscriptions-auth endpoint "${endpoint}"`);
     }
@@ -71,9 +108,9 @@ export function registerAuthRpc(ctx, controller) {
     // the service exists instead of probing once at apply time.
     ctx.inject(['connection'], (ctx) => {
         const connection = ctx.get('connection');
-        ctx.effect(() => connection.rpc.handle(SUBSCRIPTIONS_AUTH_CHANNEL, async (endpoint, payload) => {
+        ctx.effect(() => connection.rpc.handle(SUBSCRIPTIONS_AUTH_CHANNEL, async (endpoint, payload, signal) => {
             try {
-                return await dispatch(controller, endpoint, payload);
+                return await dispatch(controller, endpoint, payload, signal);
             }
             catch (error) {
                 return failure(error);

package/lib/client/ImageGenerateToolview.d.ts

@@ -0,0 +1,48 @@
+import type { ConnectionHandle } from '@deepseek-ai/dsh-api-remotes/client';
+import type { ToolCallBlock } from '@deepseek-ai/dsh-client-runtime/client';
+import type { ImageLoader } from '@deepseek-ai/dsh-client-ui-attachment';
+import type { SubscriptionsKey } from './locales.js';
+/** Mirror of ui-tool's ToolCallOwnerProps (see the module header). */
+interface ToolCallOwnerProps {
+    callId: string;
+    toolName: string;
+    block: ToolCallBlock;
+    cwd?: string | undefined;
+    openFile: (path: string) => void;
+    inspect?: (() => void) | undefined;
+}
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+    interface SlotMap {
+        /** Mirror of ui-tool's keyed atomic Tool view declaration (see the module header). */
+        'tool.call.toolview': {
+            kind: 'keyed';
+            scope: 'session';
+            owner: ToolCallOwnerProps;
+        };
+    }
+}
+/** Injected dependencies of {@link ImageGenerateToolview} (slot `inject`). */
+export interface ImageGenerateToolviewInjected {
+    /** Session-authorized image URL loader riding the `/subscriptions-auth` channel. */
+    load: ImageLoader;
+}
+/**
+ * Props delivered by the toolview outlet: the owner share plus the inject
+ * face and the framework locale seat, spread flat.
+ */
+export type ImageGenerateToolviewProps = Partial<ToolCallOwnerProps> & Partial<ImageGenerateToolviewInjected> & {
+    t?: ((key: SubscriptionsKey, params?: Record<string, unknown>) => string) | undefined;
+};
+/**
+ * Build the ImageGallery loader over the `image` endpoint.
+ * @param rpc - Connection RPC caller.
+ * @returns loader resolving an attachment ref to a data URL.
+ */
+export declare function createImageLoader(rpc: ConnectionHandle['rpc']): ImageLoader;
+/**
+ * The `image_generate` keyed toolview component.
+ * @param props - owner share, inject face, and locale seat (spread flat).
+ * @returns the call row plus, once settled, the gallery / text / error body.
+ */
+export declare function ImageGenerateToolview(props: ImageGenerateToolviewProps): import("react").JSX.Element | null;
+export {};

package/lib/client/ImageGenerateToolview.js

@@ -0,0 +1,137 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconSparkle16 } from '@deepseek-ai/dsh-client-ui-primitives';
+import { ImageGallery } from '@deepseek-ai/dsh-client-ui-attachment';
+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;
+/**
+ * Call one `/subscriptions-auth` endpoint and unwrap the business result.
+ * @param rpc - Connection RPC caller.
+ * @param endpoint - channel-relative endpoint.
+ * @param payload - channel-owned request payload.
+ * @returns the success value, cast by the caller to the endpoint's shape.
+ */
+async function callSubscriptionsAuth(rpc, endpoint, payload) {
+    const result = await rpc.call(SUBSCRIPTIONS_AUTH_CHANNEL, endpoint, payload);
+    if (!result.ok)
+        throw new Error(result.error.message);
+    return result.value;
+}
+/**
+ * Build the ImageGallery loader over the `image` endpoint.
+ * @param rpc - Connection RPC caller.
+ * @returns loader resolving an attachment ref to a data URL.
+ */
+export function createImageLoader(rpc) {
+    // The host validates a full ImageAttachmentRef payload (readImage takes the
+    // whole ref), so forward the attachment verbatim.
+    return attachment => callSubscriptionsAuth(rpc, 'image', { ...attachment })
+        .then(result => `data:${result.mediaType};base64,${result.dataBase64}`);
+}
+/**
+ * English-dictionary fallback for a missing locale seat (standalone renders);
+ * the framework always supplies the namespace-bound one.
+ * @param key - dictionary key.
+ * @param params - `{name}` template params.
+ * @returns the template with params substituted.
+ */
+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 degraded text-only route 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');
+}
+/** Image attachments of a settled result; empty while running or on the text-only route. */
+function resultImages(block) {
+    if (!('kind' in block))
+        return [];
+    const images = [];
+    for (const part of block.content) {
+        if (part.type === 'image')
+            images.push({ attachment: part.attachment });
+    }
+    return images;
+}
+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)' },
+};
+/**
+ * The `image_generate` keyed toolview component.
+ * @param props - owner share, inject face, and locale seat (spread flat).
+ * @returns the call row plus, once settled, the gallery / text / error body.
+ */
+export function ImageGenerateToolview(props) {
+    const { block, load } = props;
+    const t = props.t ?? fallbackTranslate;
+    if (block === undefined)
+        return null;
+    const settled = 'kind' in block;
+    const argsRaw = (settled ? block.call?.argsRaw : block.argsRaw) ?? '';
+    const title = `image_generate: ${derivePrompt(argsRaw)}`;
+    const images = resultImages(block);
+    const text = settled ? resultText(block) : '';
+    const labels = {
+        image: t('image'),
+        open: t('viewImage'),
+        openNamed: name => t('viewImageNamed', { name }),
+        loading: t('imageLoading'),
+        loadFailed: t('imageLoadFailed'),
+        lightbox: { dialog: t('imagePreview'), close: t('imageClose') },
+    };
+    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('generating') }), settled && block.isError && text !== '' && (_jsx("p", { style: styles.error, children: text.split('\n', 1)[0] })), settled && !block.isError && images.length > 0 && load !== undefined && (_jsx(ImageGallery, { images: images, load: load, align: "start", labels: labels })), settled && !block.isError && images.length === 0 && text !== '' && (_jsx("p", { style: styles.output, children: text }))] }));
+}

package/lib/client/index.d.ts

@@ -9,6 +9,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 { SubscriptionsKey } from './locales.js';
 declare module '@deepseek-ai/dsh-client-ui-slots' {
     interface LocaleNamespaceMap {

package/lib/client/index.js

@@ -2,6 +2,7 @@
 // allowImportingTsExtensions/rewriteRelativeImportExtensions pair; under
 // nodenext the .js specifier resolves to the .tsx source (see README note).
 import { SubscriptionsSection } from './SubscriptionsSection.js';
+import { ImageGenerateToolview, createImageLoader } from './ImageGenerateToolview.js';
 import { en, zh } from './locales.js';
 /** Dictionary namespace owned by this plugin. */
 const NS = 'settings.subscriptions';
@@ -32,4 +33,14 @@ export function apply(ctx) {
         label: () => t('nav'),
         inject: injected,
     }, SubscriptionsSection));
+    // The image_generate keyed toolview owns how image calls render inline; its
+    // gallery bytes ride the same channel through the injected loader. The
+    // framework synthesizes the toolview's own `t` seat from `locale: NS`.
+    const toolviewInjected = () => ({ load: createImageLoader(connection.rpc) });
+    ctx.slots.inject('tool.call.toolview', () => ctx.slots.register({
+        name: 'tool.call.toolview',
+        key: 'image_generate',
+        locale: NS,
+        inject: toolviewInjected,
+    }, ImageGenerateToolview));
 }

package/lib/client/locales.d.ts

@@ -19,6 +19,14 @@ export declare const en: {
     manualPlaceholder: string;
     submit: string;
     loginMissingUrl: string;
+    generating: string;
+    image: string;
+    viewImage: string;
+    viewImageNamed: string;
+    imageLoading: string;
+    imageLoadFailed: string;
+    imagePreview: string;
+    imageClose: string;
 };
 /** zh strings, one per {@link en} key. */
 export declare const zh: {
@@ -40,6 +48,14 @@ export declare const zh: {
     manualPlaceholder: string;
     submit: string;
     loginMissingUrl: string;
+    generating: string;
+    image: string;
+    viewImage: string;
+    viewImageNamed: string;
+    imageLoading: string;
+    imageLoadFailed: string;
+    imagePreview: string;
+    imageClose: 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

@@ -19,6 +19,14 @@ export const en = {
     manualPlaceholder: 'Paste the callback URL or code',
     submit: 'Submit',
     loginMissingUrl: 'login answered without an authorizeUrl',
+    generating: 'Generating image…',
+    image: 'image',
+    viewImage: 'View image',
+    viewImageNamed: 'View {name}',
+    imageLoading: 'Loading…',
+    imageLoadFailed: 'Retry',
+    imagePreview: 'Image preview',
+    imageClose: 'Close',
 };
 /** zh strings, one per {@link en} key. */
 export const zh = {
@@ -40,4 +48,12 @@ export const zh = {
     manualPlaceholder: '粘贴回调 URL 或授权码',
     submit: '提交',
     loginMissingUrl: 'login 响应缺少 authorizeUrl',
+    generating: '正在生成图片…',
+    image: '图片',
+    viewImage: '查看图片',
+    viewImageNamed: '查看 {name}',
+    imageLoading: '加载中…',
+    imageLoadFailed: '重试',
+    imagePreview: '图片预览',
+    imageClose: '关闭',
 };