@1agh/maude 0.38.1 → 0.39.1

package/apps/studio/acp/bridge.ts

@@ -8,7 +8,7 @@
 // (env.ts): the child inherits the environment MINUS `ANTHROPIC_API_KEY`, so
 // auth precedence falls through to the user's Pro/Max subscription.
 
-import { appendFile, mkdir } from 'node:fs/promises';
+import { appendFile, mkdir, readFile, writeFile } from 'node:fs/promises';
 import { dirname } from 'node:path';
 
 import {
@@ -71,6 +71,29 @@ const EFFORT_THINKING_TOKENS: Record<string, number | null> = {
 
 export type AcpEffort = keyof typeof EFFORT_THINKING_TOKENS;
 
+// Real sessionIds are adapter-generated `randomUUID()`s. A persisted value that
+// doesn't look like one (corrupt sidecar, or a tracked file a cloned repo
+// shipped despite `_chat/` being gitignored — DDR-115) is rejected rather than
+// forwarded into the privileged `loadSession` ACP call.
+const VALID_SESSION_ID = /^[A-Za-z0-9_-]{1,128}$/;
+
+// `loadSession`'s replay can, in principle, never settle if the underlying
+// transport dies mid-call (adapter crash, a concurrent `stop()` from another
+// chat sharing this bridge). Bound it so `replaying` always resets and a
+// resume attempt always falls back to `newSession` instead of wedging the
+// bridge silent forever. Mirrors the `withTimeout`/`TIMED_OUT` pattern already
+// used for network calls in `apps/studio/git/service.ts`.
+const LOAD_SESSION_TIMEOUT_MS = 15_000;
+const TIMED_OUT = Symbol('maude-acp-load-session-timeout');
+function withTimeout<T>(p: Promise<T>, ms: number): Promise<T | typeof TIMED_OUT> {
+  p.catch(() => {});
+  let timer: ReturnType<typeof setTimeout>;
+  const t = new Promise<typeof TIMED_OUT>((res) => {
+    timer = setTimeout(() => res(TIMED_OUT), ms);
+  });
+  return Promise.race([p, t]).finally(() => clearTimeout(timer));
+}
+
 /**
  * Build the `session/new` params, carrying TWO adapter-internal `_meta` payloads
  * (both spread by the installed `claude-agent-acp@0.49.x` `newSession`):
@@ -90,6 +113,10 @@ export type AcpEffort = keyof typeof EFFORT_THINKING_TOKENS;
  * must fail the presence tests LOUDLY (acp-bootstrap-brief.test.ts +
  * acp-session-plugins.test.ts), not silently un-brief / un-plugin every session.
  * Exported for those tests.
+ *
+ * `cwd`/`mcpServers`/`_meta` are also exactly the shared fields of a
+ * `LoadSessionRequest` (schema/types.gen.d.ts) — `sessionFor`'s resume path
+ * spreads this same object and adds `sessionId` rather than duplicating it.
  */
 export function newSessionParams(
   repoRoot: string,
@@ -136,12 +163,21 @@ export class AcpBridge {
   // context. The adapter (one subprocess) holds them all; switching chats reuses
   // the session, so claude remembers that chat while the app is open.
   private sessions = new Map<string, string>(); // chatId → sessionId
+  // In-flight sessionFor() calls, keyed by chatId — lets a `warm` and a `prompt`
+  // racing for the same chat share one resume/create attempt instead of each
+  // running establishSession() and stomping the single shared `replaying` flag.
+  private sessionPromises = new Map<string, Promise<string>>();
   private currentSession: string | null = null; // the in-flight prompt's session
   /** Sessions whose bootstrap brief already hit the transcript (audit record). */
   private briefLogged = new Set<string>();
   private starting: Promise<void> | null = null;
   /** Per-chat transcript file (`_chat/<id>.jsonl`); set per prompt. */
   private transcriptPath: string | null = null;
+  /** Sidecar persisting this chat's ACP sessionId across restarts (`_chat/<id>.session.json`). */
+  private sessionStorePath: string | null = null;
+  /** True while `conn.loadSession()` is replaying a resumed session's history
+   *  back through the `sessionUpdate` client callback — see the guard in `start()`. */
+  private replaying = false;
   // Model + effort are env-at-spawn (ANTHROPIC_MODEL / MAX_THINKING_TOKENS), so a
   // change re-spawns the adapter. `desired*` is what the UI asked for; `active*`
   // is what the running session was spawned with.
@@ -165,6 +201,10 @@ export class AcpBridge {
     this.transcriptPath = path;
   }
 
+  setSessionStorePath(path: string | null): void {
+    this.sessionStorePath = path;
+  }
+
   /** Desired model (alias/id, or null for the user's default) + effort. Applied
    *  on the next prompt — re-spawning the adapter only if it actually changed. */
   setConfig(model: string | null, effort: AcpEffort): void {
@@ -187,18 +227,104 @@ export class AcpBridge {
     return this.starting;
   }
 
-  /** Get-or-create the ACP session for a chat id (one claude context per chat). */
+  /**
+   * Get-or-create the ACP session for a chat id (one claude context per chat).
+   * `warm` and `prompt` can both reach this for the same chat close together
+   * (composer autocomplete warm-up racing the user hitting send) — a second
+   * concurrent call for the same chatId shares the FIRST call's in-flight
+   * promise (mirrors `ensureStarted`'s `this.starting` pattern) rather than
+   * re-entering resume/create and stomping the single shared `replaying` flag.
+   */
   private async sessionFor(chatId: string): Promise<string> {
     const existing = this.sessions.get(chatId);
     if (existing) return existing;
+    const inFlight = this.sessionPromises.get(chatId);
+    if (inFlight) return inFlight;
+
+    const promise = this.establishSession(chatId).finally(() => {
+      this.sessionPromises.delete(chatId);
+    });
+    this.sessionPromises.set(chatId, promise);
+    return promise;
+  }
+
+  /**
+   * Resumes a session persisted from a PRIOR app/dev-server lifetime (the
+   * cross-restart memory gap tracked in DDR-125) via the adapter's `loadSession`
+   * before falling back to a brand-new `newSession` — either because this chat
+   * has never had a session, or because the resume attempt failed (e.g. the
+   * underlying claude session was pruned, `claude` was reinstalled, or the
+   * adapter's response never arrives — `loadSession` is time-boxed so a dead
+   * transport can't wedge `replaying` true forever and silently black-hole
+   * every future turn on this bridge).
+   */
+  private async establishSession(chatId: string): Promise<string> {
     if (!this.conn) throw new Error('ACP adapter not started');
-    const created = await this.conn.newSession(
-      newSessionParams(this.opts.repoRoot, this.opts.studioBrief, this.opts.plugins)
-    );
+
+    const params = newSessionParams(this.opts.repoRoot, this.opts.studioBrief, this.opts.plugins);
+    const persistedId = await this.readPersistedSessionId();
+    if (persistedId) {
+      try {
+        this.replaying = true;
+        const result = await withTimeout(
+          this.conn.loadSession({ ...params, sessionId: persistedId }),
+          LOAD_SESSION_TIMEOUT_MS
+        );
+        if (result === TIMED_OUT) {
+          throw new Error(`loadSession timed out after ${LOAD_SESSION_TIMEOUT_MS}ms`);
+        }
+        this.sessions.set(chatId, persistedId);
+        return persistedId;
+      } catch (err) {
+        await this.appendTranscript({
+          role: 'bootstrap',
+          kind: 'resume-failed',
+          error: err instanceof Error ? err.message : String(err),
+        });
+      } finally {
+        this.replaying = false;
+      }
+    }
+
+    const created = await this.conn.newSession(params);
     this.sessions.set(chatId, created.sessionId);
+    await this.writePersistedSessionId(created.sessionId);
     return created.sessionId;
   }
 
+  /** Read the sessionId persisted for this chat by a prior bridge lifetime.
+   *  Null when there's no sidecar wired (e.g. warm-up before any prompt), the
+   *  file doesn't exist yet (first-ever turn), it's unreadable/corrupt, or its
+   *  `sessionId` doesn't look like a real one (defense-in-depth — this file's
+   *  directory is per-machine/gitignored per DDR-115, but a cloned repo could
+   *  still ship a tracked file there, so bound what we'll forward into the
+   *  privileged `loadSession` ACP call rather than trusting its shape blindly). */
+  private async readPersistedSessionId(): Promise<string | null> {
+    if (!this.sessionStorePath) return null;
+    try {
+      const raw = await readFile(this.sessionStorePath, 'utf8');
+      const data = JSON.parse(raw) as { sessionId?: unknown };
+      const id = data.sessionId;
+      return typeof id === 'string' && VALID_SESSION_ID.test(id) ? id : null;
+    } catch {
+      return null;
+    }
+  }
+
+  /** Persist a freshly-created sessionId so the NEXT bridge lifetime (app
+   *  restart, dev-server restart) can resume this chat instead of starting
+   *  fresh. Best-effort, like `appendTranscript` — a failed write just means
+   *  the next restart falls back to a new session. */
+  private async writePersistedSessionId(sessionId: string): Promise<void> {
+    if (!this.sessionStorePath) return;
+    try {
+      await mkdir(dirname(this.sessionStorePath), { recursive: true });
+      await writeFile(this.sessionStorePath, JSON.stringify({ sessionId, updatedAt: Date.now() }));
+    } catch {
+      /* best-effort — see doc comment above */
+    }
+  }
+
   private async start(): Promise<void> {
     const adapterEntry = resolveAdapterEntry();
     if (!adapterEntry) {
@@ -279,6 +405,12 @@ export class AcpBridge {
           this.opts.onCommands?.(params.update.availableCommands ?? []);
           return;
         }
+        // `loadSession` replays the resumed session's entire prior history back
+        // through this SAME callback (claude-agent-acp's replaySessionHistory) to
+        // prime its own in-adapter state. That history is already on disk in the
+        // transcript and already rendered client-side, so forwarding/re-appending
+        // it here would duplicate every message in the panel and the jsonl file.
+        if (this.replaying) return;
         this.opts.onUpdate(params.update);
         void this.appendTranscript({ role: 'agent', update: params.update });
       },
@@ -388,6 +520,13 @@ export class AcpBridge {
     this.proc = null;
     this.conn = null;
     this.sessions.clear();
+    // Drop any in-flight sessionFor() promises too — they were bound to the
+    // now-dead `conn`; a subsequent sessionFor() for the same chatId must
+    // establish fresh against the respawned connection, not await a stale
+    // reference (each entry's own .finally() would eventually clear it once its
+    // bounded loadSession timeout fires, but a call landing before then would
+    // otherwise get back a result tied to the connection we just tore down).
+    this.sessionPromises.clear();
     this.briefLogged.clear();
     this.currentSession = null;
   }

package/apps/studio/acp/index.ts

@@ -185,8 +185,16 @@ export function createAcp(ctx: Context, aiActivity?: AiActivity): Acp {
     const safe = id.replace(/[^a-z0-9_-]/gi, '').slice(0, 64);
     return safe || 'default';
   }
+  function chatFilePathFor(chatId: string, suffix: string): string {
+    return join(ctx.paths.designRoot, '_chat', `${sanitizeChatId(chatId)}${suffix}`);
+  }
   function transcriptPathFor(chatId: string): string {
-    return join(ctx.paths.designRoot, '_chat', `${sanitizeChatId(chatId)}.jsonl`);
+    return chatFilePathFor(chatId, '.jsonl');
+  }
+  // Sidecar persisting this chat's ACP sessionId across restarts (bridge.ts
+  // sessionFor's resume path) — the cross-restart memory gap tracked in DDR-125.
+  function sessionStorePathFor(chatId: string): string {
+    return chatFilePathFor(chatId, '.session.json');
   }
 
   async function handlePrompt(
@@ -198,6 +206,7 @@ export function createAcp(ctx: Context, aiActivity?: AiActivity): Acp {
   ): Promise<void> {
     const bridge = getOrCreateBridge(ws);
     bridge.setTranscriptPath(transcriptPathFor(chatId));
+    bridge.setSessionStorePath(sessionStorePathFor(chatId));
     bridge.setConfig(model, effort);
     try {
       await bridge.ensureStarted();
@@ -226,6 +235,7 @@ export function createAcp(ctx: Context, aiActivity?: AiActivity): Acp {
     effort: AcpEffort
   ): Promise<void> {
     const bridge = getOrCreateBridge(ws);
+    bridge.setSessionStorePath(sessionStorePathFor(chatId));
     bridge.setConfig(model, effort);
     try {
       await bridge.warmUp(sanitizeChatId(chatId));

package/apps/studio/api.ts

@@ -242,6 +242,9 @@ export interface Api {
   // Persist a clipboard-pasted ACP composer image → runtime `_chat/attachments/`,
   // returns an absolute path (Phase 31 follow-up — POST /_api/acp/attachment).
   saveChatAttachment(bytes: Uint8Array): Promise<SaveAssetResult>;
+  // Resolve a content-addressed attachment name (`<sha8>.<ext>`) to its absolute
+  // path, or null (GET /_api/acp/attachment — the read side of the pair above).
+  resolveChatAttachment(name: unknown): Promise<string | null>;
   // Create a blank brief board from the browser (Phase 22 — POST /_api/canvas)
   createCanvas(input: {
     name?: unknown;
@@ -1081,6 +1084,23 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     return { ok: true, path: fileAbs };
   }
 
+  // Read side of saveChatAttachment — resolve a content-addressed attachment
+  // name back to its absolute path under `_chat/attachments/`, or null. The
+  // name is the ONLY input and must match our own `<sha8>.<ext>` shape, so
+  // traversal is impossible by construction; the resolve() assert mirrors the
+  // write side's containment backstop. MAIN-ORIGIN ONLY at the route layer
+  // (the untrusted canvas origin never reaches the serving route).
+  async function resolveChatAttachment(name: unknown): Promise<string | null> {
+    if (typeof name !== 'string' || !/^[0-9a-f]{8}\.(?:png|jpe?g|gif|webp)$/.test(name)) {
+      return null;
+    }
+    const dir = path.join(paths.designRoot, '_chat', 'attachments');
+    const fileAbs = path.join(dir, name);
+    if (path.resolve(fileAbs) !== path.join(path.resolve(dir), name)) return null;
+    if (!(await Bun.file(fileAbs).exists())) return null;
+    return fileAbs;
+  }
+
   // Phase 22 — create a blank brief board from the browser file tree. Wired ONLY
   // on the main origin (server.ts startMainServer); the segregated canvas origin
   // (DDR-054) never exposes this — an untrusted canvas iframe must not be able to
@@ -1994,6 +2014,7 @@ export function createApi(ctx: Context, hooks: ApiHooks): Api {
     saveAnnotations,
     saveAsset,
     saveChatAttachment,
+    resolveChatAttachment,
     createCanvas,
     deleteCanvas,
     editCss,

package/apps/studio/client/app.jsx

@@ -8210,6 +8210,7 @@ function App() {
                   : null
               }
               selected={selected}
+              designRel={(cfg?.designRel || cfg?.designRoot || '.design').replace(/^\/+|\/+$/g, '')}
               width={rpSize.w}
               resizing={dragSide === 'rp'}
               onClose={() => setAssistantOpen(false)}

package/apps/studio/client/panels/ChatPanel.jsx

@@ -10,7 +10,7 @@
 //
 // Native-app only — app.jsx mounts this gated on isNativeApp().
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import {
   AssistantRuntimeProvider,
@@ -23,7 +23,14 @@ import {
   useThread,
 } from '@assistant-ui/react';
 
-import { activityLabel, createAcpConnection, makeAcpAdapter } from './acp-runtime.js';
+import {
+  activityLabel,
+  attachmentName,
+  createAcpConnection,
+  designImageRefs,
+  extractAttachmentRefs,
+  makeAcpAdapter,
+} from './acp-runtime.js';
 import { buildChatContext } from './chat-context.js';
 import { Markdown } from './chat-markdown.jsx';
 import ReadinessList, { useReadiness } from './ReadinessList.jsx';
@@ -243,10 +250,23 @@ async function uploadChatImage(file) {
 }
 
 // ── message-part renderers ──
+// Assistant text: markdown, plus a thumbnail strip for any designRoot image
+// path the agent mentioned (e.g. "/design:screenshot → Saved to: .design/…png"
+// — DDR-145). The path stays visible in the text; the strip adds the preview.
 function ChatText({ text }) {
+  const media = useContext(ChatMediaContext);
+  const refs = designImageRefs(text, media?.designRel);
   return (
     <div className="chat-bubble">
       <Markdown text={text} />
+      {refs.length ? (
+        <div className="chat-thumbrow">
+          {refs.map((src) => {
+            const file = src.split('/').pop();
+            return <ChatThumb key={src} src={src} label={`Open ${file}`} caption={file} />;
+          })}
+        </div>
+      ) : null}
     </div>
   );
 }
@@ -291,10 +311,157 @@ function ChatToolCard({ toolName, args, result, isError }) {
   );
 }
 
+// ── chat media (image thumbnails + lightbox) ──
+// Per-thread context so deeply-nested bubbles reach the single lightbox + the
+// paste-attachments map without prop-drilling through assistant-ui's renderers.
+// `chipName(token)` resolves a live chip ([image-1]) to its content-addressed
+// name via the per-chat map; `openLightbox(src)` opens the one overlay.
+const ChatMediaContext = createContext(null);
+
+function attachmentSrc(name) {
+  return `/_api/acp/attachment?name=${encodeURIComponent(name)}`;
+}
+
+// Thumbnail — a real focusable button (Enter/Space open) wrapping the served
+// image; clicking opens the shared lightbox. `src` is always one of our own
+// same-origin serve lanes (attachment route or designRoot static).
+//
+// `caption` marks a REFERENCED path (an image an assistant message merely named,
+// DDR-145) as distinct from first-class user/agent media — it prints the
+// filename under the thumb so an injected assistant can't fully borrow the
+// feed's authority by rendering an arbitrary designRoot image as if it produced
+// it (attacker F2). Pasted-image thumbs pass no caption.
+function ChatThumb({ src, label = 'Open image', caption }) {
+  const media = useContext(ChatMediaContext);
+  const btn = (
+    <button
+      type="button"
+      className="chat-thumb-btn"
+      aria-label={label}
+      onClick={() => media?.openLightbox(src)}
+    >
+      <img className="chat-thumb" src={src} alt="" loading="lazy" />
+    </button>
+  );
+  if (!caption) return btn;
+  return (
+    <figure className="chat-thumb-fig">
+      {btn}
+      <figcaption className="chat-thumb-cap" title={caption}>
+        {caption}
+      </figcaption>
+    </figure>
+  );
+}
+
+// One live-bubble chip: an image chip whose upload has resolved renders as a
+// thumbnail; file/link chips (and a still-pending image upload) keep the text
+// badge. The map entry can fill AFTER the bubble first renders (paste + Enter
+// immediately), so poll briefly until it resolves — the adapter awaits the
+// upload before sending, so this settles within the same turn.
+function ChipOrThumb({ token, kind }) {
+  const media = useContext(ChatMediaContext);
+  const [name, setName] = useState(() => (kind === 'image' ? media?.chipName(token) : null));
+  useEffect(() => {
+    if (kind !== 'image' || name || !media) return undefined;
+    let tries = 0;
+    const id = setInterval(() => {
+      const n = media.chipName(token);
+      if (n) {
+        setName(n);
+        clearInterval(id);
+      } else if (++tries > 20) {
+        clearInterval(id);
+      }
+    }, 250);
+    return () => clearInterval(id);
+  }, [kind, name, media, token]);
+  if (!name) return <span className="chat-paste-chip">{token}</span>;
+  return <ChatThumb src={attachmentSrc(name)} label="Open pasted image" />;
+}
+
+// Single fixed overlay for the enlarged image — ESC / backdrop / × close,
+// role="dialog", focus moves to the close button on open and returns to the
+// invoking thumbnail on close (mirrors tour/overlay.jsx). The capture-phase
+// key listener runs only while open, so it never collides with the composer's
+// onKeyDownCapture.
+function ChatLightbox({ src, onClose }) {
+  const closeRef = useRef(null);
+  const prevFocus = useRef(null);
+  useEffect(() => {
+    prevFocus.current = document.activeElement;
+    closeRef.current?.focus();
+    function onKey(e) {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        e.stopPropagation();
+        onClose();
+      }
+    }
+    window.addEventListener('keydown', onKey, true);
+    return () => {
+      window.removeEventListener('keydown', onKey, true);
+      try {
+        prevFocus.current?.focus?.();
+      } catch {
+        /* trigger unmounted — non-fatal */
+      }
+    };
+  }, [onClose]);
+  return (
+    <div
+      className="chat-lightbox"
+      role="dialog"
+      aria-modal="true"
+      aria-label="Pasted image"
+      onClick={onClose}
+    >
+      <img src={src} alt="pasted image, enlarged" onClick={(e) => e.stopPropagation()} />
+      <button
+        type="button"
+        ref={closeRef}
+        className="chat-lightbox-close"
+        aria-label="Close image"
+        title="Close image"
+        onClick={onClose}
+      >
+        ×
+      </button>
+    </div>
+  );
+}
+
 // User bubble keeps the collapsed chips in the transcript (Claude Code shows the
-// placeholder in history too — the real path went to the agent, not the log).
+// placeholder in history too — the real path went to the agent, not the log),
+// EXCEPT images, which render as clickable thumbnails in a strip UNDER the text
+// (inline they'd break the message's reading flow). Two spellings resolve to the
+// same thumbnail: a live chip ([image-1] → per-chat map) and the reloaded
+// transcript's expanded `_chat/attachments/` path (never printed raw).
 function UserBubble({ text }) {
-  return <div className="chat-bubble">{chipNodes(text, 'ub')}</div>;
+  const segs = extractAttachmentRefs(text);
+  const inline = [];
+  const images = [];
+  segs.forEach((seg, i) => {
+    if (seg.type === 'text') inline.push(<span key={`t-${i}`}>{seg.text}</span>);
+    else if (seg.type === 'chip' && seg.kind !== 'image')
+      inline.push(
+        <span className="chat-paste-chip" key={`c-${i}`}>
+          {seg.token}
+        </span>
+      );
+    else if (seg.type === 'chip')
+      images.push(<ChipOrThumb key={`c-${i}`} token={seg.token} kind={seg.kind} />);
+    else
+      images.push(
+        <ChatThumb key={`a-${i}`} src={attachmentSrc(seg.name)} label="Open pasted image" />
+      );
+  });
+  return (
+    <div className="chat-bubble">
+      {inline}
+      {images.length ? <div className="chat-thumbrow">{images}</div> : null}
+    </div>
+  );
 }
 
 function UserMessage() {
@@ -904,6 +1071,7 @@ function ChatThread({
   effortRef,
   activeCanvas,
   selected,
+  designRel,
   model,
   setModel,
   effort,
@@ -948,6 +1116,17 @@ function ChatThread({
     [conn, chatId, modelRef, effortRef]
   );
   const runtime = useLocalRuntime(adapter, { initialMessages });
+  // Image thumbnails + lightbox — one overlay per thread; bubbles reach it (and
+  // the chip → attachment-name resolution) through ChatMediaContext.
+  const [lightboxSrc, setLightboxSrc] = useState(null);
+  const media = useMemo(
+    () => ({
+      chipName: (token) => attachmentName(attachmentsRef.current.map.get(token) || ''),
+      openLightbox: setLightboxSrc,
+      designRel,
+    }),
+    [designRel]
+  );
   const [activeTools, setActiveTools] = useState([]);
   useEffect(() => conn.onActivity(setActiveTools), [conn]);
   // Post-turn-end continuation (the tail the client used to drop — RCA F2).
@@ -956,6 +1135,7 @@ function ChatThread({
 
   return (
     <AssistantRuntimeProvider runtime={runtime}>
+      <ChatMediaContext.Provider value={media}>
       <div className="chat-panel" style={hidden ? { display: 'none' } : undefined}>
         <StatusRow tools={activeTools} />
         <ThreadPrimitive.Root className="chat-thread">
@@ -984,7 +1164,11 @@ function ChatThread({
             attachmentsRef={attachmentsRef}
           />
         </ThreadPrimitive.Root>
+        {lightboxSrc ? (
+          <ChatLightbox src={lightboxSrc} onClose={() => setLightboxSrc(null)} />
+        ) : null}
       </div>
+      </ChatMediaContext.Provider>
     </AssistantRuntimeProvider>
   );
 }
@@ -993,6 +1177,7 @@ function ChatThread({
 export default function ChatPanel({
   activeCanvas,
   selected,
+  designRel,
   width,
   resizing,
   onClose,
@@ -1344,6 +1529,7 @@ export default function ChatPanel({
                 effortRef={effortRef}
                 activeCanvas={activeCanvas}
                 selected={selected}
+                designRel={designRel}
                 model={model}
                 setModel={setModel}
                 effort={effort}