feat: mobile canvas viewer for Telegram WebView integration

[mateobelanger]

Summary

• Add /view/[canvasId] route — a stripped-down, mobile-first, read-only canvas viewer that works in Telegram's in-app browser (no more "Your screen is too small" blocker)
• Integrate Telegram WebApp SDK for native feel (expand, BackButton, viewport height)
• Update plugin to emit /view/ URLs instead of /canvas/ URLs

Context

OpenClaw users interact with the bot inside Telegram. When the agent creates a Ryzome canvas, the returned URL opens in Telegram's WebView — which hits MobileCanvasEditor.tsx's "screen too small" blocker. This PR provides a mobile-optimized alternative.

Part of the OpenClaw Telegram Mini App project ([Linear](https://linear.app/playgrounds
-ai/project/openclaw-telegram-mini-app-4f4be64612dc)).

Linked issues: RYZ-1426, RYZ-1427

Changes

Canvas app (ryzome-monorepo):

• apps/canvas/src/app/view/[canvasId]/page.tsx — new route
• apps/canvas/src/components/viewer/MobileCanvasViewer.tsx — full-viewport ReactFlow, touch-optimized, Telegram SDK hooks

Plugin (openclaw-ryzome):

• src/lib/canvas-executor.ts — URL path /canvas/ → /view/
• Tests updated to match

Known limitations

• Auth: Canvases may require session auth for unauthenticated Telegram users. RYZ-1427
  tracks enabling link-sharing by default. Needs validation.
• Theme: Telegram themeParams not yet mapped to loading/error states (low priority,
  dark theme is a reasonable default).

Test plan

• Open /view/<canvasId> at 375px width in responsive dev tools — canvas renders, pan/zoom works
• Verify no "screen too small" blocker appears
• pnpm typecheck passes
• pnpm test passes (33/33 in plugin repo)
• Create canvas via plugin — URL uses /view/ path

[greptile-apps]

Greptile Summary

This PR makes a one-line URL path change in the plugin — replacing /canvas/<id> with /view/<id> — so that canvas links generated by the OpenClaw agent open the new mobile-first viewer (/view/[canvasId]) rather than the full desktop editor that blocks small screens. All three test files are updated to match.

Key observations:

• The change in canvas-executor.ts is correct and complete; no logic is altered beyond the path segment.
• The API endpoint paths (e.g., /v1/canvas/<id> in RyzomeApiError) are correctly left unchanged — they are server-side API paths, not viewer URLs.
• All existing assertions across unit and integration tests are consistently updated.
• The companion frontend route (apps/canvas/src/app/view/[canvasId]/page.tsx) lives in ryzome-monorepo and is not part of this changeset — the plugin will immediately start emitting /view/ URLs upon release, so the frontend route must be deployed before or alongside this plugin version to avoid broken links.
• Pre-existing canvas links using the /canvas/ path will silently break once this is released (no redirect in scope). This is an acknowledged trade-off for a new feature, but worth coordinating with the ryzome-monorepo team if /canvas/ links are still in circulation.

Confidence Score: 5/5

Safe to merge; the plugin-side change is a single string literal with thorough test coverage, and no regressions are introduced in this repo

The diff is minimal (one changed line of production code, four updated assertions), all tests align with the new path, and there are no logic errors. The only risk is deployment ordering between this plugin and the ryzome-monorepo frontend — a coordination concern outside this changeset's scope.

No files in this changeset require special attention

Important Files Changed

Filename	Overview
src/lib/canvas-executor.ts	Single-line URL path change from /canvas/ to /view/; logic is correct and consistent with stated intent
src/tools/tests/create-canvas.test.ts	Two URL assertions updated from /canvas/ to /view/; the path field inside RyzomeApiError still uses /canvas/ which is intentional (API path, not viewer URL)
src/tests/openclaw.integration.test.ts	Two integration test assertions updated to check for /view/ in the returned canvas URL; both the stubbed and live-smoke tests are consistent

Sequence Diagram

sequenceDiagram
    participant Agent as OpenClaw Agent
    participant Executor as canvas-executor.ts
    participant API as Ryzome API
    participant App as Ryzome App (/view/[canvasId])

    Agent->>Executor: executeCanvasWithSteps(params)
    Executor->>API: POST /v1/canvas { name, description }
    API-->>Executor: { canvas_id: { $oid } }
    Executor->>API: PATCH /v1/canvas/:id { operations }
    API-->>Executor: 200 OK
    Executor-->>Agent: { content: [{ text: "View: appUrl/view/:id" }] }
    Agent-->>App: User opens appUrl/view/:id in Telegram WebView

Loading

_{Reviews (1): Last reviewed commit: "Merge branch 'main' into feat/telegram-m..." | Re-trigger Greptile}