@agent-native/core 0.152.1 → 0.153.0

package/corpus/templates/slides/.agents/skills/turn-into-app/references/spreadsheet-source.md

@@ -0,0 +1,148 @@
+# Spreadsheet source review
+
+Use this reference after a workbook upload or Google Sheets link is supplied to
+`/turn-into-app`. It defines the bounded review contract before app creation.
+
+## 1. Establish the source boundary
+
+Record the source before interpreting it:
+
+| Field        | Record                                                                            |
+| ------------ | --------------------------------------------------------------------------------- |
+| Source kind  | `xlsx`, `xls`, `csv`, or Google Sheets URL                                        |
+| Provenance   | Original file name or spreadsheet ID and URL; never credentials or workbook bytes |
+| Access       | Upload preview, authenticated provider read, or unavailable                       |
+| Coverage     | Worksheet names, selected range(s), row/column bounds, and sample counts          |
+| Completeness | Complete within the requested bound, partial, truncated, unreadable, or empty     |
+| Refresh      | One-time snapshot or live refreshable source                                      |
+
+For an uploaded XLS/XLSX file, the framework preview contains worksheet names,
+dimensions, and representative displayed values within bounds. It does not
+currently preserve cell fills or font colors in that text preview. Treat the
+original workbook as the formatting authority only when a tool actually returns
+cell formatting metadata. Never describe a text-only upload as style-verified.
+
+For a Google Sheets URL:
+
+1. Parse the spreadsheet ID and preserve the original URL as provenance.
+2. Use the authenticated `google_drive` provider path. Inspect
+   `provider-api-catalog` first, use `provider-api-docs` if the endpoint or
+   fields are uncertain, and then call `provider-api-request`.
+3. Read spreadsheet metadata and only bounded worksheet/range data. Request
+   formatting metadata when the I/O decision depends on colors, including
+   `userEnteredFormat.backgroundColor` and
+   `userEnteredFormat.textFormat.foregroundColor` where the provider supports
+   it. Do not use a public export URL to bypass access.
+4. Preserve the spreadsheet ID, worksheet title, A1 range, account/connection
+   choice without secrets, row limits, and refresh behavior in the brief.
+
+Keep provider responses bounded. For large sheets, stage or save the response
+and reduce it with the available dataset/code tools. A failed page, truncated
+response, or unavailable connection is not an empty sheet.
+
+## 2. Infer cells and ranges, then show the evidence
+
+Classify source material into three separate buckets. Include representative
+cell addresses or ranges and the evidence behind each classification.
+
+| Bucket             | Default signal                                                                                                     | App treatment                                                          |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- |
+| Inputs             | Yellow cell background, editable assumptions, user-entered constants, or labels such as `assumption` / `driver`    | Editable controls or bounded source parameters                         |
+| Outputs            | Blue text, formula-derived result cells, summary blocks, or labels such as `forecast` / `recommendation`           | Read-only results, charts, recommendations, exports, or review actions |
+| Static historicals | Black text used intentionally for prior-period/source records, raw rows, or labels such as `actual` / `historical` | Read-only context; never turn into editable inputs by default          |
+
+These are conventions, not permission to guess. A default black font with no
+explicit style metadata is not enough to label a range as historical. Resolve
+conflicts using labels, formulas, neighboring headers, repeated patterns, and
+the user's stated goal. If the evidence still conflicts, lower confidence and
+ask the user to confirm the proposed mapping.
+
+Keep source cells and app behavior distinct:
+
+- `Source inputs` are the workbook cells or ranges the user is expected to
+  change or refresh.
+- `Source outputs` are the workbook cells or ranges the source already derives
+  or presents.
+- `Static historicals` are context the app may filter, compare, or summarize,
+  but should not edit.
+- `App outputs` are the new app's visible results, saved records, exports,
+  alerts, or downstream handoffs. Do not invent these until the repeatable job
+  or user confirmation makes them clear.
+
+## 3. Offer candidate apps, not a tab dump
+
+Group related worksheets into candidate repeatable jobs. A candidate should
+have a recognizable user, trigger, inputs, transformation or judgment, and
+outputs. Utility tabs such as lookups, raw imports, instructions, pivots, and
+calculation helpers can support a candidate without becoming destinations.
+
+Present a compact Q&A review with multi-select options. In generated app code,
+use `askUserQuestion` from `@agent-native/core/client/agent-chat` with
+`allowMultiple: true`, stable candidate IDs as option values, and
+`allowFreeText: true` for corrections. It renders inline in the agent panel;
+do not build a custom modal. Each option should fit in a scannable row or
+choice card:
+
+```text
+Candidate: Pipeline forecast
+Uses: Assumptions, Historical Pipeline, Forecast
+Inputs: yellow assumptions in Assumptions!B4:B12 (high confidence)
+Outputs: blue forecast summary in Forecast!B3:H10 (medium confidence)
+Historical context: Historical Pipeline!A1:K500
+Question: Confirm that forecast assumptions should be editable?
+```
+
+Mark the strongest recommendation with `recommended: true`, but do not silently
+select it. Let the user select none, one, or several candidates, correct a
+proposed tab/range, or answer the unresolved question. Keep each question to
+2-4 grouped candidate jobs; for a larger workbook, group related tabs into
+jobs rather than showing a tab dump or asking a separate question for every
+worksheet. If there is only one high-confidence candidate, keep the review
+compact and ask for confirmation only when the I/O mapping or source access is
+unclear.
+
+When several candidates are selected, pass a stable candidate ID, display name,
+source worksheet/ranges, I/O mapping, confidence, and confirmation status for
+each. The generated app should expose them as separate named left-navigation
+destinations or tabs, not merge them into an opaque dashboard and not create a
+separate workspace app for every worksheet.
+
+## 4. Confirm before building or publishing
+
+The confirmation view is a source-integrity checkpoint, not a product-design
+questionnaire. Show:
+
+- the source file or spreadsheet ID and snapshot/live choice;
+- selected candidate destinations and their source tabs/ranges;
+- editable inputs, read-only outputs, and static historical context;
+- the evidence and confidence for each mapping;
+- truncation, unreadable, missing-connection, and refresh limitations;
+- the app outputs/actions that will be created.
+
+Use clear actions such as `Confirm and build`, `Edit mapping`, and `Use a
+different source`. If the host has a structured question or multi-select UI,
+use it. Otherwise, ask one concise assistant message that presents the same
+options and requires an explicit confirmation/correction before handoff.
+
+After confirmation, the online host may call
+`start-workspace-app-creation`; the Builder run itself remains autonomous and
+must record any remaining non-blocking assumptions. In a local generated app,
+persist the confirmation state in SQL/application state and keep the user on
+the review surface while the agent builds. Never claim a full import, live
+refresh, or output write until the corresponding source/action has succeeded.
+
+## 5. Failure and recovery states
+
+Keep these states distinct in the review and in the handoff:
+
+- `unreadable` - parser/provider could not read the source;
+- `partial` - only some worksheets, ranges, rows, or pages were read;
+- `truncated` - the bounded preview ended before full coverage;
+- `empty` - the requested readable range contains no values;
+- `not-connected` - authenticated Google access is required but unavailable;
+- `confirmed` - the user approved the candidate and I/O mapping.
+
+For unreadable or not-connected sources, request a CSV/XLSX export or the
+required connection. For partial or truncated sources, continue only with a
+clearly bounded snapshot or ask for a narrower range. Do not coerce any of
+these states into a successful empty source.

package/corpus/templates/slides/.agents/skills/workspace-conventions/SKILL.md

@@ -0,0 +1,93 @@
+---
+name: workspace-conventions
+description: >-
+  Shared conventions for a multi-app Agent Native workspace: finding
+  version-matched framework docs and source, shared vs app-owned code, file and
+  blob storage, env and secrets, agent scratch files, and Dispatch Resources.
+  Use when working across workspace apps, storing files or credentials, or
+  looking up framework APIs.
+scope: dev
+---
+
+# Workspace Conventions
+
+The long-form detail behind the workspace `AGENTS.md` core rules. Read this
+before adding shared code, storing files or secrets, creating workspace
+resources, or looking up framework APIs.
+
+## Framework Docs Lookup
+
+Read `agent-native-docs` for the lookup workflow (`framework-search` first, then
+the focused `docs-search` / `source-search` readers, and the `rg` fallback).
+
+The workspace-specific slugs it does not list are `workspace` and
+`multi-app-workspace`. Feature flags and other specialized workflows are
+optional; read their skill only when the app uses them. Use package docs for framework APIs,
+the package corpus for reusable framework/template patterns, and this
+`AGENTS.md` plus `.agents/skills/` for workspace-specific conventions.
+
+Before building common workspace or agent UI, read `agent-native-toolkit` to
+inventory existing public kits and installed package seams. Read
+`customizing-agent-native` before adapting shared UI. Use the supported
+ladder: configure → compose → eject the smallest unit → propose a shared seam.
+Preview before `--apply`, commit `agent-native.ejections.json`, and never edit
+`node_modules` or eject protected runtime contracts.
+
+## Shared Conventions
+
+- All AI/LLM behavior goes through the app's agent chat. UI and server code
+  must not call model providers, AI SDK `generateText()` / `streamText()`, or
+  other inline LLM APIs directly. Use `sendToAgentChat()` for local app-agent
+  work, including hidden `context` and `submit: false` prefill/review flows.
+  Keep actions deterministic and focused. If a workflow is framed as research,
+  analysis, generation, recommendation, or synthesis, let the agent
+  orchestrate provider/data actions in the open AgentSidebar instead of hiding
+  the work in one opaque action or a separate follow-up textbox.
+  Only use `useAgentChatContext`, `setAgentChatContextItem`,
+  `listAgentChatContext`, `removeAgentChatContextItem`, and
+  `clearAgentChatContext` when UI needs two-way sync with staged context chips.
+  Read `.agents/skills/delegate-to-agent/SKILL.md` before building agent-driven
+  UI or "AI" features.
+- Put shared code in `packages/shared` only when multiple apps need it.
+- Keep app-specific screens, actions, state, and skills inside `apps/<app>`.
+- SQL is for structured records, metadata, references, and searchable text. Store
+  large files/blob payloads (base64, `data:` URLs, images, video/audio, PDFs,
+  ZIPs, screenshots, thumbnails, session replay chunks) in configured file/blob
+  storage and persist only URLs, ids, or handles.
+- Store shared runtime configuration in the workspace root `.env`; use
+  `apps/<app>/.env` only for app-specific overrides. Never hardcode API keys,
+  tokens, webhook URLs, signing secrets, private Builder/internal data, customer
+  data, or credential-looking literals in source, docs, prompts, fixtures,
+  application state, action responses, or generated app content. Use
+  secrets/OAuth/runtime configuration and obvious placeholders in examples.
+- Each app deploys its own `/*` page function, and that function ships whatever
+  the app's server bundle depends on — including a dependency only a background
+  job uses. Before an app takes on a heavy runtime (headless browser, ffmpeg,
+  media processing, ML), read `.agents/skills/performance/SKILL.md` §9 and keep
+  that work in a background function or job. A dependency belonging to one app
+  does not belong in `packages/shared`.
+- Prefer framework defaults until the workspace has a real custom rule,
+  component, plugin, action, or skill to share.
+- Keep the Workspace files view for user-authored or user-requested resources.
+  Agents may create hidden `agent_scratch` resources for temporary working
+  notes, scripts, task plans, or intermediate outputs, but should promote them
+  to normal workspace visibility only when the user explicitly asks to keep or
+  manage the file.
+- Runtime-editable global resources can be managed from Dispatch Resources.
+  Use `AGENTS.md` or `instructions/<slug>.md` for always-on guardrails,
+  `skills/<slug>/SKILL.md` for workspace skills, `context/<slug>.md` for
+  personas/positioning/messaging/company facts/brand guidelines, and
+  `agents/<slug>.md` for custom agent profiles. Scope them to All apps when
+  every workspace app should inherit them. All-app resources are inherited at
+  runtime; do not copy or sync them into individual apps.
+
+## Related Skills
+
+- **adding-workspace-apps** — Creating and mounting a new app under `apps/`.
+- **agent-native-docs** — The full docs and source-corpus lookup workflow.
+- **agent-native-toolkit** — Inventory of shared workspace and agent UI.
+- **customizing-agent-native** — The configure → compose → eject ladder.
+- **delegate-to-agent** — Routing every AI feature through the agent chat.
+- **performance** — Load cost, and (§9) cold-start artifact size per app.
+- **secrets** — Registering API keys and service credentials.
+- **storing-data** — Where structured data and large payloads belong.

package/corpus/templates/slides/AGENTS.md

@@ -40,6 +40,10 @@ Read the relevant skill before deeper work:
 - Preserve freeform objects and their `data-slide-object-id` values. They are
   absolutely positioned `.fmd-slide` children; keep generated flex/grid in
   normal flow and mint ids only for duplicates. Use styled HTML, not inline SVG.
+- Freeform dragging shows transient peer/canvas alignment guides and snaps
+  within tolerance; hold Cmd/Ctrl to bypass snapping. With 2+ compatible
+  selected objects, use the contextual toolbar to align to selection bounds;
+  distribute only when 3+ objects are selected.
 - Follow linked design-system tokens; read `design-systems` for per-source actions.
 - Import/export actions are shortcuts, not capability limits. For exact Google
   Drive API needs, use `provider-api-catalog`, `provider-api-docs`, and

package/corpus/templates/slides/actions/add-slide-comment.ts

@@ -34,7 +34,7 @@ export default defineAction({
   }),
   run: async (args) => {
     const { deckId, slideId, content, quotedText, parentId } = args;
-    await assertAccess("deck", deckId, "viewer");
+    await assertAccess("deck", deckId, "commenter");
 
     const id = Math.random().toString(36).slice(2, 14);
     const threadId = args.threadId ?? id;

package/corpus/templates/slides/actions/delete-slide-comment.ts

@@ -30,7 +30,7 @@ export default defineAction({
 
     const userEmail = getRequestUserEmail();
     if (comment.authorEmail === userEmail) {
-      await assertAccess("deck", comment.deckId, "viewer");
+      await assertAccess("deck", comment.deckId, "commenter");
     } else {
       await assertAccess("deck", comment.deckId, "editor");
     }

package/corpus/templates/slides/actions/get-layout-overflows.ts

@@ -5,6 +5,66 @@ import { z } from "zod";
 import { hashSlideContent, type DeckFitState } from "../shared/slide-fit.js";
 import { readAppStateForCurrentTab } from "./_tab-state.js";
 
+type CurrentSlideFitMeasurement = DeckFitState["slides"][string] & {
+  slideId: string;
+};
+
+function getCurrentSlideFitMeasurement(
+  value: unknown,
+  slide: { id: string; content?: string },
+  deckId: string,
+): CurrentSlideFitMeasurement | null {
+  if (!value || typeof value !== "object") return null;
+
+  const measurement = value as Record<string, unknown>;
+  const slideId = measurement.slideId;
+  const measurementDeckId = measurement.deckId;
+  const contentHash = measurement.contentHash;
+  const contentHeight = measurement.contentHeight;
+  const contentWidth = measurement.contentWidth;
+  const viewportHeight = measurement.viewportHeight;
+  const viewportWidth = measurement.viewportWidth;
+  const verticalOverflow = measurement.verticalOverflow;
+  const horizontalOverflow = measurement.horizontalOverflow;
+  const measuredAt = measurement.measuredAt;
+
+  if (
+    typeof slideId !== "string" ||
+    slideId !== slide.id ||
+    (measurementDeckId !== undefined && measurementDeckId !== deckId) ||
+    typeof contentHash !== "string" ||
+    contentHash !== hashSlideContent(slide.content ?? "") ||
+    typeof contentHeight !== "number" ||
+    !Number.isFinite(contentHeight) ||
+    typeof contentWidth !== "number" ||
+    !Number.isFinite(contentWidth) ||
+    typeof viewportHeight !== "number" ||
+    !Number.isFinite(viewportHeight) ||
+    typeof viewportWidth !== "number" ||
+    !Number.isFinite(viewportWidth) ||
+    typeof verticalOverflow !== "number" ||
+    !Number.isFinite(verticalOverflow) ||
+    typeof horizontalOverflow !== "number" ||
+    !Number.isFinite(horizontalOverflow) ||
+    typeof measuredAt !== "number" ||
+    !Number.isFinite(measuredAt)
+  ) {
+    return null;
+  }
+
+  return {
+    slideId,
+    contentHash,
+    contentHeight,
+    contentWidth,
+    viewportHeight,
+    viewportWidth,
+    verticalOverflow,
+    horizontalOverflow,
+    measuredAt,
+  };
+}
+
 export default defineAction({
   description:
     "Read the latest browser measurements for every slide in a deck. Returns status unknown until every slide has a finite measurement matching its current HTML, so never use a partial result to claim the deck fits.",
@@ -25,6 +85,10 @@ export default defineAction({
     const state = (await readAppStateForCurrentTab("deck-fit-checks", {
       fallbackToGlobal: false,
     })) as DeckFitState | null;
+    const currentSlideState = await readAppStateForCurrentTab(
+      "slide-fit-check",
+      { fallbackToGlobal: false },
+    );
 
     const unknownSlideIds: string[] = [];
     const overflows: Array<{
@@ -40,10 +104,11 @@ export default defineAction({
 
     slides.forEach((slide, index) => {
       const measurement =
-        state?.deckId === deckId &&
+        getCurrentSlideFitMeasurement(currentSlideState, slide, deckId) ??
+        (state?.deckId === deckId &&
         state.aspectRatio === (deck.aspectRatio ?? "16:9")
           ? state.slides?.[slide.id]
-          : undefined;
+          : undefined);
       if (
         !measurement ||
         measurement.contentHash !== hashSlideContent(slide.content ?? "") ||

package/corpus/templates/slides/actions/update-slide-comment.ts

@@ -42,7 +42,7 @@ export default defineAction({
     ) {
       await assertAccess("deck", comment.deckId, "editor");
     } else {
-      await assertAccess("deck", comment.deckId, "viewer");
+      await assertAccess("deck", comment.deckId, "commenter");
     }
 
     const updatedAt = new Date().toISOString();

package/corpus/templates/slides/actions/view-screen.ts

@@ -11,6 +11,66 @@ import { getDb, schema } from "../server/db/index.js";
 import { hashSlideContent, type DeckFitState } from "../shared/slide-fit.js";
 import { readAppStateForCurrentTab } from "./_tab-state.js";
 
+type CurrentSlideFitMeasurement = DeckFitState["slides"][string] & {
+  slideId: string;
+};
+
+function getCurrentSlideFitMeasurement(
+  value: unknown,
+  slide: { id: string; content?: string } | null,
+  deckId: string,
+): CurrentSlideFitMeasurement | null {
+  if (!slide || !value || typeof value !== "object") return null;
+
+  const measurement = value as Record<string, unknown>;
+  const slideId = measurement.slideId;
+  const measurementDeckId = measurement.deckId;
+  const contentHash = measurement.contentHash;
+  const contentHeight = measurement.contentHeight;
+  const contentWidth = measurement.contentWidth;
+  const viewportHeight = measurement.viewportHeight;
+  const viewportWidth = measurement.viewportWidth;
+  const verticalOverflow = measurement.verticalOverflow;
+  const horizontalOverflow = measurement.horizontalOverflow;
+  const measuredAt = measurement.measuredAt;
+
+  if (
+    typeof slideId !== "string" ||
+    slideId !== slide.id ||
+    (measurementDeckId !== undefined && measurementDeckId !== deckId) ||
+    typeof contentHash !== "string" ||
+    contentHash !== hashSlideContent(slide.content ?? "") ||
+    typeof contentHeight !== "number" ||
+    !Number.isFinite(contentHeight) ||
+    typeof contentWidth !== "number" ||
+    !Number.isFinite(contentWidth) ||
+    typeof viewportHeight !== "number" ||
+    !Number.isFinite(viewportHeight) ||
+    typeof viewportWidth !== "number" ||
+    !Number.isFinite(viewportWidth) ||
+    typeof verticalOverflow !== "number" ||
+    !Number.isFinite(verticalOverflow) ||
+    typeof horizontalOverflow !== "number" ||
+    !Number.isFinite(horizontalOverflow) ||
+    typeof measuredAt !== "number" ||
+    !Number.isFinite(measuredAt)
+  ) {
+    return null;
+  }
+
+  return {
+    slideId,
+    contentHash,
+    contentHeight,
+    contentWidth,
+    viewportHeight,
+    viewportWidth,
+    verticalOverflow,
+    horizontalOverflow,
+    measuredAt,
+  };
+}
+
 export default defineAction({
   description:
     "See what the user is currently looking at. Returns the CURRENT deck ID, current slide ID, and the full list of slide IDs in the open deck (or the deck list if the user is on the home page). Call this before any slide operation to get the exact IDs you need for add-slide / update-slide / create-deck.",
@@ -195,36 +255,23 @@ export default defineAction({
       // here whenever the natural content bounds exceed the canvas content
       // area. If this block is present, the current slide's HTML needs to be
       // rewritten to fit the canvas.
-      const overflow = (await readAppStateForCurrentTab("slide-fit-check")) as {
-        slideId?: string;
-        contentHash?: string;
-        verticalOverflow?: number;
-        horizontalOverflow?: number;
-        contentHeight?: number;
-        contentWidth?: number;
-        viewportHeight?: number;
-        viewportWidth?: number;
-      } | null;
-      const verticalOverflow = overflow?.verticalOverflow ?? 0;
-      const horizontalOverflow = overflow?.horizontalOverflow ?? 0;
+      const currentSlideMeasurement = getCurrentSlideFitMeasurement(
+        await readAppStateForCurrentTab("slide-fit-check"),
+        currentSlide,
+        rows[0].id,
+      );
+      const verticalOverflow = currentSlideMeasurement?.verticalOverflow ?? 0;
+      const horizontalOverflow =
+        currentSlideMeasurement?.horizontalOverflow ?? 0;
       if (
-        overflow &&
-        typeof overflow.contentHash === "string" &&
-        currentSlide?.content &&
-        overflow.contentHash === hashSlideContent(currentSlide.content) &&
-        Number.isFinite(overflow.verticalOverflow) &&
-        (overflow.horizontalOverflow === undefined ||
-          Number.isFinite(overflow.horizontalOverflow)) &&
-        Number.isFinite(overflow.contentHeight) &&
-        Number.isFinite(overflow.viewportHeight) &&
-        (verticalOverflow > 0 || horizontalOverflow > 0) &&
-        overflow.slideId === currentSlide?.id
+        currentSlideMeasurement &&
+        (verticalOverflow > 0 || horizontalOverflow > 0)
       ) {
         lines.push(``);
         lines.push(`### ⚠ Layout overflows the canvas`);
         lines.push(
-          `This slide's natural rendered content is ${overflow.contentWidth ?? "unknown"}x${overflow.contentHeight}px, ` +
-            `but the canvas content area is ${overflow.viewportWidth ?? "unknown"}x${overflow.viewportHeight}px ` +
+          `This slide's natural rendered content is ${currentSlideMeasurement.contentWidth}x${currentSlideMeasurement.contentHeight}px, ` +
+            `but the canvas content area is ${currentSlideMeasurement.viewportWidth}x${currentSlideMeasurement.viewportHeight}px ` +
             `(overflow: ${verticalOverflow}px vertical, ${horizontalOverflow}px horizontal). The renderer no longer ` +
             `auto-shrinks overflowing slides — you must rewrite the slide HTML so ` +
             `the rendered content fits the measured content area. Options, ` +
@@ -255,7 +302,10 @@ export default defineAction({
             };
         const measured: DeckFitSummary[] = slides.flatMap(
           (slide, index): DeckFitSummary[] => {
-            const measurement = deckFit.slides[slide.id];
+            const measurement =
+              slide.id === currentSlideMeasurement?.slideId
+                ? currentSlideMeasurement
+                : deckFit.slides[slide.id];
             if (
               !measurement ||
               measurement.contentHash !==

package/corpus/templates/slides/app/components/comments/SlideCommentsPanel.tsx

@@ -29,6 +29,7 @@ import {
 interface SlideCommentsPanelProps {
   deckId: string | null;
   slideId: string | null;
+  canComment: boolean;
   pendingComment: { quotedText: string } | null;
   onPendingDone: () => void;
   onClose: () => void;
@@ -59,9 +60,11 @@ function Avatar({ email, name }: { email: string; name?: string | null }) {
 function CommentItem({
   comment,
   onDelete,
+  canDelete,
 }: {
   comment: SlideComment;
   onDelete: () => void;
+  canDelete: boolean;
 }) {
   const t = useT();
   const [hovered, setHovered] = useState(false);
@@ -81,7 +84,7 @@ function CommentItem({
             <span className="text-[10px] text-muted-foreground">
               {formatRelativeTime(comment.created_at)}
             </span>
-            {hovered && (
+            {hovered && canDelete && (
               <Tooltip>
                 <TooltipTrigger asChild>
                   <button
@@ -284,10 +287,12 @@ function ThreadCard({
   thread,
   deckId,
   slideId,
+  canComment,
 }: {
   thread: CommentThread;
   deckId: string;
   slideId: string;
+  canComment: boolean;
 }) {
   const t = useT();
   const [replyOpen, setReplyOpen] = useState(false);
@@ -330,7 +335,7 @@ function ThreadCard({
               <span className="text-[10px] text-muted-foreground">
                 {formatRelativeTime(rootComment.created_at)}
               </span>
-              {hovered && !thread.resolved && (
+              {hovered && !thread.resolved && canComment && (
                 <>
                   <Tooltip>
                     <TooltipTrigger asChild>
@@ -399,13 +404,14 @@ function ThreadCard({
               key={r.id}
               comment={r}
               onDelete={() => deleteComment.mutate({ id: r.id })}
+              canDelete={canComment}
             />
           ))}
         </div>
       )}
 
       {/* Reply & resolve actions */}
-      {!thread.resolved && (
+      {!thread.resolved && canComment && (
         <div className="mt-2 ml-7 flex items-center gap-3">
           {!replyOpen && (
             <button
@@ -418,7 +424,7 @@ function ThreadCard({
         </div>
       )}
 
-      {replyOpen && (
+      {replyOpen && canComment && (
         <div className="ml-7">
           <ReplyInput
             deckId={deckId}
@@ -435,6 +441,7 @@ function ThreadCard({
 export function SlideCommentsPanel({
   deckId,
   slideId,
+  canComment,
   pendingComment,
   onPendingDone,
   onClose,
@@ -452,10 +459,14 @@ export function SlideCommentsPanel({
 
   // When pending comment arrives, cancel any manual "add comment" mode
   useEffect(() => {
+    if (pendingComment && !canComment) {
+      onPendingDone();
+      return;
+    }
     if (pendingComment) setAddingComment(false);
-  }, [pendingComment]);
+  }, [canComment, onPendingDone, pendingComment]);
 
-  const showInput = pendingComment || addingComment;
+  const showInput = canComment && Boolean(pendingComment || addingComment);
 
   return (
     <div className="flex h-full w-[17rem] flex-shrink-0 flex-col bg-[var(--slides-editor-surface)]">
@@ -465,7 +476,7 @@ export function SlideCommentsPanel({
           {t("comments.title")}
         </span>
         <div className="flex items-center gap-1">
-          {!showInput && deckId && slideId && (
+          {canComment && !showInput && deckId && slideId && (
             <Tooltip>
               <TooltipTrigger asChild>
                 <button
@@ -536,6 +547,7 @@ export function SlideCommentsPanel({
               thread={thread}
               deckId={deckId ?? ""}
               slideId={slideId ?? ""}
+              canComment={canComment}
             />
           ))}
 
@@ -555,7 +567,7 @@ export function SlideCommentsPanel({
         {!showLoadError &&
           !showInput &&
           visibleThreads.length === 0 &&
-          (deckId && slideId ? (
+          (deckId && slideId && canComment ? (
             <button
               type="button"
               onClick={() => setAddingComment(true)}
@@ -572,6 +584,16 @@ export function SlideCommentsPanel({
                 {t("comments.clickToAddComment")}
               </p>
             </button>
+          ) : deckId && slideId ? (
+            <div className="text-center py-10">
+              <IconMessageCircle
+                size={28}
+                className="mx-auto mb-2 text-muted-foreground/60"
+              />
+              <p className="text-[12px] text-muted-foreground">
+                {t("comments.noCommentsYet")}
+              </p>
+            </div>
           ) : (
             <div className="text-center py-10">
               <IconMessageCircle

package/corpus/templates/slides/app/components/design-system/DesignSystemCard.tsx

@@ -31,7 +31,7 @@ interface DesignSystemCardProps {
   data: DesignSystemData;
   isDefault: boolean;
   visibility?: "private" | "org" | "public" | null;
-  accessRole?: "owner" | "admin" | "editor" | "viewer";
+  accessRole?: "owner" | "admin" | "editor" | "commenter" | "viewer";
   canManage?: boolean;
   onClick: () => void;
   onSetDefault: () => void;
@@ -121,6 +121,7 @@ export function DesignSystemCard({
           <ShareButton
             resourceType="design-system"
             resourceId={id}
+            allowedRoles={["viewer", "editor", "admin"]}
             resourceTitle={title}
           />
           {(canManage || canSetWorkspaceDefault) && (