feat(desktop): automatically render and archive chat images

.github/workflows/ci.yml

@@ -450,9 +450,13 @@ jobs:
       # The smoke only launches headless; the full Chrome build was downloaded
       # and never opened. The headed consumer (perf/storybook.mjs) self-installs.
       - name: Install Playwright Chromium
-        if: steps.plan.outputs.storybook == 'true'
+        if: steps.plan.outputs.storybook == 'true' || contains(steps.plan.outputs.standard_workspaces, 'packages/ui')
         run: npx playwright install --with-deps --only-shell chromium
 
+      - name: Markdown image security and layout
+        if: steps.plan.outputs.storybook == 'true' || contains(steps.plan.outputs.standard_workspaces, 'packages/ui')
+        run: node --test packages/ui/scripts/markdown-images.browser.test.mjs
+
       - name: Build Storybook
         if: steps.plan.outputs.storybook == 'true'
         run: npm --workspace @maka/desktop run build-storybook

apps/desktop/scripts/check-renderer-architecture.test.mjs

@@ -314,6 +314,7 @@ function canonicalRendererEntryHtml(
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta name="referrer" content="no-referrer" />
         <meta
           http-equiv="Content-Security-Policy"
           content="default-src 'self'; ${policy}; style-src 'self' 'unsafe-inline'; img-src 'self' data: blob:; connect-src 'self'"
@@ -1778,6 +1779,13 @@ describe('renderer architecture checker fixtures', () => {
     );
   });
 
+  it('rejects an HTML transform that changes the no-referrer policy', () => {
+    assert.throws(
+      () => assertRendererEntryHtml(canonicalRendererEntryHtml().replace('content="no-referrer"', 'content="unsafe-url"')),
+      /renderer entry HTML contract forbids transformed executable or navigation surfaces/u,
+    );
+  });
+
   it('rejects executable HTML injected around the canonical module entry', () => {
     assert.doesNotThrow(() => assertRendererEntryHtml(canonicalRendererEntryHtml()));
     const emittedHtml = canonicalRendererEntryHtml().replace(

apps/desktop/scripts/vite-renderer-entry-contract.ts

@@ -88,8 +88,13 @@ export function assertRendererEntryHtml(html: string, expectedScriptSource?: str
       htmlAttribute(attributes, 'http-equiv')?.toLowerCase() === 'content-security-policy' &&
       htmlAttribute(attributes, 'content')?.trim().replace(/\s+/gu, ' ') === CONTENT_SECURITY_POLICY,
   );
+  const referrerMetas = metas.filter(
+    (attributes) => htmlAttribute(attributes, 'name')?.toLowerCase() === 'referrer' &&
+      htmlAttribute(attributes, 'content') === 'no-referrer',
+  );
   const validMetas =
-    metas.length === 3 &&
+    metas.length === 4 &&
+    referrerMetas.length === 1 &&
     charsetMetas.length === 1 &&
     viewportMetas.length === 1 &&
     policyMetas.length === 1;

apps/desktop/src/main/__tests__/runtime-host-artifacts-ipc-main.test.ts

@@ -26,6 +26,28 @@ import { test } from "node:test";
 import { registerRuntimeHostArtifactsIpc } from "../runtime-host-artifacts-ipc-main.js";
 import { ManagedArtifactPreview } from '../managed-artifact-preview.js';
 
+test('image resolution validates renderer requests before forwarding them', async () => {
+  const handlers = new Map<string, Handler>();
+  const forwarded: unknown[] = [];
+  registerRuntimeHostArtifactsIpc({
+    uiLocale: () => 'en',
+    ipcMain: { handle: (channel, handler) => handlers.set(channel, handler as Handler) },
+    client: { hostEpoch: 'host', resolveImageDelivery: async (...args: unknown[]) => {
+      forwarded.push(args); return { status: 'requires_confirmation' };
+    } } as never,
+    mainWindowController: {} as never,
+    showItemInFolder() {},
+  });
+  const resolve = handlers.get('attachments:resolveImage')!;
+  const request = { turnId: 'turn', messageId: 'message', source: 'https://example.invalid/image.png', loadRemote: true };
+  await resolve({}, 'session', request);
+  assert.deepEqual(forwarded, [['session', request]]);
+  for (const invalid of [null, { ...request, sessionId: 'other' }, { ...request, loadRemote: 'yes' }, { ...request, source: 'bad\nurl' }]) {
+    await assert.rejects(async () => resolve({}, 'session', invalid), /Invalid image delivery request/);
+  }
+  assert.equal(forwarded.length, 1);
+});
+
 for (const launchFails of [false, true]) {
   test(`HTML external open uses the managed endpoint and reports launch failure=${launchFails}`, async () => {
     const service = new ManagedArtifactPreview();

apps/desktop/src/main/__tests__/runtime-host-client-operations.test.ts

@@ -34,6 +34,18 @@ import {
   DesktopRuntimeHostClientError,
 } from '../runtime-host-client.js';
 
+test('image resolution keeps the routed session even if a request carries another id', async () => {
+  const { client, requests } = clientWithResponses([{ status: 'requires_confirmation' }]);
+  await client.resolveImageDelivery('routed-session', {
+    sessionId: 'injected-session', turnId: 'turn', messageId: 'message',
+    source: 'https://example.invalid/image.png', loadRemote: true,
+  } as import('@maka/core/image-delivery').ImageDeliveryRequest);
+  assert.deepEqual(requests, [{ operation: 'artifact.image.resolve', input: {
+    sessionId: 'routed-session', turnId: 'turn', messageId: 'message',
+    source: 'https://example.invalid/image.png', loadRemote: true,
+  } }]);
+});
+
 test('restarts a paginated catalog read instead of mixing revisions', async () => {
   const revisionOne = catalogRevision('1');
   const revisionTwo = catalogRevision('2');

apps/desktop/src/main/__tests__/workhub-coordination-transcript-preload.test.ts

@@ -84,6 +84,12 @@ test('WorkHub upload references round-trip through idle answers, both queue mode
             return { ok: true, disposition: args[2] === 'current_turn' ? 'steering' : 'followup', attachments: [uploaded] };
           }
           if (channel === 'attachments:readBytes') return { ok: true, base64: 'aGVsbG8=' };
+          if (channel === 'attachments:resolveImage') {
+            assert.deepEqual(structuredClone(args[2]), {
+              turnId: 'image-turn', messageId: 'image-message', source: '/tmp/image.png',
+            });
+            return { status: 'ready', artifactId: 'image-1' };
+          }
           throw new Error(`Unexpected channel: ${channel}`);
         },
       },
@@ -108,7 +114,11 @@ test('WorkHub upload references round-trip through idle answers, both queue mode
     assert.equal(await services.enqueueMessage(sessionId, `message-${placement}`, 'read this', attachments, placement), 'admitted');
   }
   assert.deepEqual(structuredClone(sent.map(({ attachments }) => attachments)), [[uploaded], [uploaded], [uploaded]]);
-  assert.equal((await services.readAttachmentBytes(sessionId, 'brief.txt')).ok, true);
+  assert.equal((await services.readBytes(sessionId, 'brief.txt')).ok, true);
+  assert.ok(services.resolveImageDelivery);
+  assert.deepEqual(await services.resolveImageDelivery(sessionId, {
+    turnId: 'image-turn', messageId: 'image-message', source: '/tmp/image.png',
+  }), { status: 'ready', artifactId: 'image-1' });
   preparationResult = { ok: false, code: 'item_too_large' };
   await assert.rejects(
     services.prepareAttachments(sessionId, [

apps/desktop/src/main/runtime-host-artifacts-ipc-main.ts

@@ -18,6 +18,7 @@
  */
 
 import type { UiCatalog, UiLocale } from '@maka/core/ui-locale';
+import { isImageDeliveryRequest } from '@maka/core/image-delivery';
 import { randomUUID } from "node:crypto";
 import { open, mkdir, rename, rm } from "node:fs/promises";
 import { tmpdir } from "node:os";
@@ -87,6 +88,10 @@ export function registerRuntimeHostArtifactsIpc(
       return result;
     },
   );
+  deps.ipcMain.handle('attachments:resolveImage', (_event, sessionId: string, request: unknown) => {
+    if (!isImageDeliveryRequest(request)) throw new Error('Invalid image delivery request');
+    return deps.client.resolveImageDelivery(sessionId, request);
+  });
   registerRuntimeHostAttachmentPreviewIpc(deps);
   const materializePresentationArtifact = async (
     sessionId: string,

apps/desktop/src/main/runtime-host-client.ts

@@ -861,6 +861,10 @@ export class DesktopRuntimeHostClient {
     return result.project;
   }
 
+  resolveImageDelivery(sessionId: string, request: import('@maka/core/image-delivery').ImageDeliveryRequest): Promise<import('@maka/core/image-delivery').ImageDeliveryResult> {
+    return this.request('artifact.image.resolve', { ...request, sessionId });
+  }
+
   async listArtifacts(sessionId: string): Promise<ArtifactProjection[]> {
     for (let attempt = 0; attempt < MAX_OPTIMISTIC_ATTEMPTS; attempt += 1) {
       const first = await this.request("artifact.query", {

apps/desktop/src/preload/bridge-contract.d.ts

@@ -1724,7 +1724,8 @@ export interface MakaBridge {
       | { ok: true; base64: string; mimeType: string }
       | { ok: false; reason: string }
     >;
-    readBytes(sessionId: string, artifactId: string): Promise<ArtifactBinaryReadResult>;
+    resolveImageDelivery: import('@maka/core/image-delivery').ResolveImageDelivery;
+    readBytes: import('@maka/core/image-delivery').ReadAttachmentBytes;
   };
   search: {
     recall(

apps/desktop/src/preload/preload.ts

@@ -3382,6 +3382,7 @@ const makaBridge = {
     },
   },
   attachments: {
+    resolveImageDelivery: (sessionId, request) => invokeSessionRuntimeHost('attachments:resolveImage', sessionId, request),
     pickDirectory: () => invokeWhenReady('directories:pick'),
     // The renderer hands over the dropped or pasted File objects, never paths:
     // only a File backed by something the user dropped or pasted has a path,

apps/desktop/src/renderer/chat-message-surface.tsx

@@ -58,6 +58,7 @@ interface ChatMessageSurfaceProps extends Omit<
   | 'pendingQuotes'
   | 'onQuoteAnnotationSubmit'
   | 'onReadAttachmentBytes'
+  | 'onResolveImageDelivery'
 > {
   /**
    * #1985: the live projection and the shell-run records are the only session

apps/desktop/src/renderer/features/conversation/staging-services.ts

@@ -19,12 +19,10 @@
 
 import { createServicesContext } from '../../application/contracts/feature-services.js';
 import type { ComposerAttachmentService } from '@maka/ui/use-composer-attachments';
-import type { ArtifactBinaryReadResult } from '@maka/core/artifacts';
+import type { ChatImageServices } from '@maka/core/image-delivery';
 
 /** One attachment port: the Composer stages through it and the transcript reads image bytes through it. */
-export interface ComposerStagingServices extends ComposerAttachmentService {
-  readBytes(sessionId: string, artifactId: string): Promise<ArtifactBinaryReadResult>;
-}
+export type ComposerStagingServices = ComposerAttachmentService & ChatImageServices;
 const context = createServicesContext<ComposerStagingServices>('ComposerStagingServicesProvider');
 export const ComposerStagingServicesProvider = context.Provider;
 export const useComposerStagingServices = context.useServices;

apps/desktop/src/renderer/features/conversation/ui/staged-quote-chat-view.tsx

@@ -24,8 +24,8 @@ import { useComposerStagingServices } from '../staging-services.js';
 
 /** Transcript attachment reads come from the injected attachment port, never from the caller. */
 export function StagedQuoteChatView(props: Omit<ComponentProps<typeof PlanChatView>,
-  'handleRef' | 'pendingQuotes' | 'onQuoteAnnotationSubmit' | 'onReadAttachmentBytes'>) {
+  'handleRef' | 'pendingQuotes' | 'onQuoteAnnotationSubmit' | 'onReadAttachmentBytes' | 'onResolveImageDelivery'>) {
   const staging = useComposerStaging();
-  const { readBytes } = useComposerStagingServices();
-  return <PlanChatView {...props} {...staging.chatViewQuoteProps} onReadAttachmentBytes={readBytes} />;
+  const { readBytes, resolveImageDelivery } = useComposerStagingServices();
+  return <PlanChatView {...props} {...staging.chatViewQuoteProps} onReadAttachmentBytes={readBytes} onResolveImageDelivery={resolveImageDelivery} />;
 }

apps/desktop/src/renderer/features/workbar/ports.ts

@@ -17,6 +17,7 @@
  * under the License.
  */
 
+import type { ChatImageServices } from '@maka/core/image-delivery';
 import type { SessionInspectorService } from '../../application/contracts/session-inspector/service.js';
 export type { SessionInspectorService, SessionTracePage, SessionUsageSummary } from '../../application/contracts/session-inspector/service.js';
 
@@ -164,8 +165,7 @@ export interface WorkbarArtifactsService {
   saveAs(sessionId: string, artifactId: string): Promise<ArtifactSaveResult>;
 }
 
-export interface WorkbarAttachmentsService {
-  readBytes(sessionId: string, artifactId: string): Promise<ArtifactBinaryReadResult>;
+export interface WorkbarAttachmentsService extends ChatImageServices {
   pickFiles(): Promise<
     | {
         ok: true;

apps/desktop/src/renderer/features/workbar/tools/side-chat/quote-companion-panel.tsx

@@ -403,7 +403,7 @@ export function QuoteCompanionPanel(props: {
           liveTurns={companion.liveTurns}
           activeTurn={companion.activeTurn}
           activeSession={companion.companionSession}
-          onReadAttachmentBytes={attachments.readBytes}
+          onReadAttachmentBytes={attachments.readBytes} onResolveImageDelivery={attachments.resolveImageDelivery}
           deriveTurnPresentation={deriveTurnPresentation}
           onEditUserMessage={(turnId) => {
             const message = companion.messages.find(

apps/desktop/src/renderer/features/workhub/ports.ts

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import type { ArtifactBinaryReadResult } from '@maka/core/artifacts';
+import type { ChatImageServices } from '@maka/core/image-delivery';
 import type { ChatModelChoice } from '@maka/core/chat-model-choice';
 import type { UiLocale } from '@maka/core/ui-locale';
 import type { StoredMessage, SessionSummary } from '@maka/core/session';
@@ -39,7 +39,7 @@ export interface WorkHubTranscript {
   loadEarlier(): Promise<void>;
   close(): Promise<void>;
 }
-export interface WorkHubServices extends WorkHubWorkspaceServices {
+export interface WorkHubServices extends WorkHubWorkspaceServices, ChatImageServices {
   readonly inspector: import('../../application/contracts/session-inspector/service.js').SessionInspectorService;
   readonly surface: 'main' | 'workhub';
   readonly initialLocale: UiLocale;
@@ -56,7 +56,6 @@ export interface WorkHubServices extends WorkHubWorkspaceServices {
     model: string;
   }): Promise<void>;
   readonly attachments: ComposerAttachmentService;
-  readAttachmentBytes(sessionId: string, artifactId: string): Promise<ArtifactBinaryReadResult>;
   prepareAttachments(sessionId: string, items: Array<{ approvalId: string; name: string; mimeType?: string } | { file: File }>): Promise<AttachmentRef[]>;
   listActiveInteractions(sessionId: string): Promise<import('@maka/core/events').ActiveInteractionRequestEvent[]>;
   subscribeActiveInteractions(handler: (event: { sessionId: string; interactions: import('@maka/core/events').ActiveInteractionRequestEvent[] }) => void): () => void;

apps/desktop/src/renderer/features/workhub/ui/workhub-root.tsx

@@ -397,7 +397,7 @@ export function WorkHubRoot() {
         <div ref={history} className="workHubHistory" aria-hidden={!showConversation} inert={!showConversation}>
         <WorkHubConversation
           workLinks={links}
-          onReadAttachmentBytes={services.readAttachmentBytes}
+          onReadAttachmentBytes={services.readBytes} onResolveImageDelivery={services.resolveImageDelivery}
           onOpenWork={(id) => call(services.presentation.openSession(id))}
           scrollBehavior="auto"
           onNew={() => composer.current?.focus()}

apps/desktop/src/renderer/index.html

@@ -21,6 +21,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <meta name="referrer" content="no-referrer" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta
       http-equiv="Content-Security-Policy"

apps/desktop/src/renderer/platform/desktop/create-workhub-services.ts

@@ -92,7 +92,8 @@ export function createDesktopWorkHubServices(
     setDefaultModel: ({ llmConnectionSlug, model }) =>
       bridge.connections.setDefaultModel({ slug: llmConnectionSlug, model }),
     attachments: bridge.attachments,
-    readAttachmentBytes: bridge.attachments.readBytes,
+    readBytes: bridge.attachments.readBytes,
+    resolveImageDelivery: bridge.attachments.resolveImageDelivery,
     prepareAttachments: async (sessionId, items) => {
       const result = await bridge.workHub.prepareAttachments(sessionId, items);
       if (!result.ok) throw new AttachmentIngestBlockedError(result.code);

apps/desktop/stories/workhub.stories.tsx

@@ -101,7 +101,7 @@ function makeServices(failFirst: boolean, withHistory: boolean | 'usage', colore
     listSessions: async () => coloredHistory ? [target, secondTarget] : [target], subscribeSessions: (handler) => { updateSessions = handler; return () => { updateSessions = undefined; }; }, modelChoices: async () => choices,
     setDefaultModel: async () => {},
     attachments: { pickFiles: async () => ({ ok: true, files: [{ approvalId: 'file-1', name: 'requirements.txt', size: 12, mimeType: 'text/plain' }] }), previewApproval: async () => ({ ok: false, reason: 'not-image' }) },
-    readAttachmentBytes: async () => { throw new Error('Not an image'); },
+    readBytes: async () => { throw new Error('Not an image'); },
     prepareAttachments: async (id, items) => { writes.upload(id, items); return [{ name: 'requirements.txt', kind: 'other', mimeType: 'text/plain', bytes: 12, ref: { kind: 'session_file', sessionId: 'maka_workhub_coordination', relativePath: 'artifact-1' } }]; },
     listActiveInteractions: async () => pendingForm ? [pendingForm] : questionPending ? [questionRequest] : [],
     subscribeActiveInteractions: (handler) => { interactionUpdate = handler; return () => { interactionUpdate = undefined; }; },

docs/astryx-surface-file-inventory.md

@@ -6,7 +6,7 @@ Generated against `@astryxdesign/core@0.6.3` (195 component exports).
 
 Wiki bar: Design Conventions · API Use-the-System · Theming · Container Padding.
 
-**Totals:** 333 files — blocker 0, reimplementation 0, polish 4, aligned 329.
+**Totals:** 335 files — blocker 0, reimplementation 0, polish 4, aligned 331.
 
 ## Exclusions (explicit)
 
@@ -307,11 +307,13 @@ Wiki bar: Design Conventions · API Use-the-System · Theming · Container Paddi
 | `packages/ui/src/executor-model-picker.tsx` | ui-composition | Button, Popover | aligned — uses Astryx (Button, Popover) | aligned |
 | `packages/ui/src/form-interaction-prompt.tsx` | ui-composition | Button, CheckboxInput, RadioList, RadioListItem, Selector, Text, TextInput | aligned — uses Astryx (Button, CheckboxInput, RadioList, RadioListItem, Selector, Text, TextInput) | aligned |
 | `packages/ui/src/icons.tsx` | ui-composition | none | aligned — no raw controls; no Astryx JSX usage | aligned |
+| `packages/ui/src/image-delivery.tsx` | ui-composition | none | aligned — no raw controls; no Astryx JSX usage | aligned |
 | `packages/ui/src/inline-reference.tsx` | ui-composition | ChatTokenizedText | aligned — uses Astryx (ChatTokenizedText) | aligned |
 | `packages/ui/src/inline-rename-input.tsx` | ui-composition | TextInput | aligned — uses Astryx (TextInput) | aligned |
 | `packages/ui/src/locale-context.tsx` | ui-composition | none | aligned — no raw controls; no Astryx JSX usage | aligned |
 | `packages/ui/src/maka-wordmark.tsx` | ui-composition | none | aligned — no raw controls; no Astryx JSX usage | aligned |
 | `packages/ui/src/markdown-body.tsx` | ui-composition | CodeBlock, Link, Markdown | aligned — uses Astryx (CodeBlock, Link, Markdown) | aligned |
+| `packages/ui/src/markdown-image.tsx` | ui-composition | Button, IconButton, Link, Spinner, Tooltip | aligned — uses Astryx (Button, IconButton, Link, Spinner, Tooltip) | aligned |
 | `packages/ui/src/markdown-math.tsx` | ui-composition | none | aligned — no raw controls; no Astryx JSX usage | aligned |
 | `packages/ui/src/markdown.tsx` | ui-composition | none | aligned — no raw controls; no Astryx JSX usage | aligned |
 | `packages/ui/src/mermaid-diagram.tsx` | ui-composition | Button, CodeBlock, Collapsible, Dialog, IconButton, Toolbar | aligned — uses Astryx (Button, CodeBlock, Collapsible, Dialog, IconButton, Toolbar) | aligned |

docs/astryx-surface-file-inventory.paths

@@ -277,11 +277,13 @@ packages/ui/src/directory-reference-chip.tsx
 packages/ui/src/executor-model-picker.tsx
 packages/ui/src/form-interaction-prompt.tsx
 packages/ui/src/icons.tsx
+packages/ui/src/image-delivery.tsx
 packages/ui/src/inline-reference.tsx
 packages/ui/src/inline-rename-input.tsx
 packages/ui/src/locale-context.tsx
 packages/ui/src/maka-wordmark.tsx
 packages/ui/src/markdown-body.tsx
+packages/ui/src/markdown-image.tsx
 packages/ui/src/markdown-math.tsx
 packages/ui/src/markdown.tsx
 packages/ui/src/mermaid-diagram.tsx