From a3c3ce4f5192bda6d049be836e563ef69c998962 Mon Sep 17 00:00:00 2001
From: Quang Tran <16215255+trmquang93@users.noreply.github.com>
Date: Mon, 27 Apr 2026 23:13:19 +0700
Subject: [PATCH] feat: copy screen ID to clipboard from Sidebar and
 ScreensPanel

Surfaces screen IDs in the UI so users can grab them for AI agent prompts
without opening the .drawd JSON. The selected-screen Sidebar shows a
monospace ID chip under the screen name; clicking it copies the ID and
flips in place to "Copied!" for COPY_FEEDBACK_MS. The ScreensPanel
right-click menu also gains a "Copy Screen ID" entry as its first item,
so users can copy without selecting first. Both affordances are
read-only-safe (copying is non-mutating).

Mirrors the existing ShareModal clipboard pattern. No new hook/util.
Connections, hotspots, documents, and data-models are deferred per
backlog 5.2 scope decision (MVP-only-screens).
---
 src/components/ScreensPanel.jsx | 25 ++++++++++++++++++
 src/components/Sidebar.jsx      | 46 +++++++++++++++++++++++++++++++--
 src/pages/docs/userGuide.md     | 10 +++++++
 3 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/src/components/ScreensPanel.jsx b/src/components/ScreensPanel.jsx
index 3e1610f..4990f12 100644
--- a/src/components/ScreensPanel.jsx
+++ b/src/components/ScreensPanel.jsx
@@ -465,6 +465,31 @@ export function ScreensPanel({
             overflow: "hidden",
           }}
         >
+          <button
+            onClick={() => {
+              if (navigator.clipboard) {
+                navigator.clipboard.writeText(contextMenu.screenId);
+              }
+              closeContextMenu();
+            }}
+            style={{
+              display: "block",
+              width: "100%",
+              padding: "9px 14px",
+              background: "none",
+              border: "none",
+              color: COLORS.text,
+              cursor: "pointer",
+              textAlign: "left",
+              fontFamily: FONTS.ui,
+              fontSize: 12,
+            }}
+            onMouseEnter={(e) => { e.currentTarget.style.background = COLORS.surfaceHover; }}
+            onMouseLeave={(e) => { e.currentTarget.style.background = "none"; }}
+          >
+            ⧉ Copy Screen ID
+          </button>
+          <div style={{ borderTop: `1px solid ${COLORS.border}` }} />
           <button
             onClick={() => { onSetScopeRoot?.(contextMenu.screenId === scopeRoot ? null : contextMenu.screenId); closeContextMenu(); }}
             style={{
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 6a6476b..5aeacac 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1,6 +1,6 @@
 import { COLORS, FONTS, STATUS_CONFIG, STATUS_CYCLE, COMPONENT_CONFIG } from "../styles/theme";
-import { useState } from "react";
-import { SIDEBAR_WIDTH } from "../constants";
+import { useEffect, useState } from "react";
+import { COPY_FEEDBACK_MS, SIDEBAR_WIDTH } from "../constants";
 
 export function Sidebar({ screen, screens, connections, onClose, onRename, onAddHotspot, onEditHotspot, onAddState, onSelectScreen, onUpdateStateName, onUpdateNotes, onUpdateCodeRef, onUpdateCriteria, onUpdateStatus, onUpdateTbd, onUpdateRoles, onSetComponent, isReadOnly }) {
   const [draftNotes, setDraftNotes] = useState(screen.notes || "");
@@ -12,6 +12,13 @@ export function Sidebar({ screen, screens, connections, onClose, onRename, onAdd
   const [tbdScreenId, setTbdScreenId] = useState(screen.id);
   const [newRole, setNewRole] = useState("");
   const [rolesScreenId, setRolesScreenId] = useState(screen.id);
+  const [idCopied, setIdCopied] = useState(false);
+
+  // Reset the "Copied!" flag when switching to a different screen so it
+  // never lingers from a previous screen's click.
+  useEffect(() => {
+    setIdCopied(false);
+  }, [screen.id]);
 
   // Reset drafts when screen changes
   if (screen.id !== notesScreenId) {
@@ -46,6 +53,14 @@ export function Sidebar({ screen, screens, connections, onClose, onRename, onAdd
     ? screens.filter((s) => s.componentId === screen.componentId && s.id !== screen.id).length
     : 0;
 
+  const handleCopyId = () => {
+    if (!navigator.clipboard) return;
+    navigator.clipboard.writeText(screen.id).then(() => {
+      setIdCopied(true);
+      setTimeout(() => setIdCopied(false), COPY_FEEDBACK_MS);
+    });
+  };
+
   return (
     <div
       style={{
@@ -116,6 +131,33 @@ export function Sidebar({ screen, screens, connections, onClose, onRename, onAdd
         )}
       </div>
 
+      {/* Screen ID chip — click to copy. Always visible (read-only-safe). */}
+      <button
+        onClick={handleCopyId}
+        title={idCopied ? "Copied!" : "Click to copy screen ID"}
+        style={{
+          display: "block",
+          width: "100%",
+          padding: "6px 12px",
+          marginBottom: 12,
+          background: COLORS.bg,
+          border: `1px solid ${COLORS.border}`,
+          borderRadius: 6,
+          color: idCopied ? COLORS.accentLight : COLORS.textMuted,
+          fontFamily: FONTS.mono,
+          fontSize: 11,
+          textAlign: "left",
+          cursor: "pointer",
+          letterSpacing: "0.02em",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          boxSizing: "border-box",
+        }}
+      >
+        {idCopied ? "Copied!" : screen.id}
+      </button>
+
       {/* TBD toggle */}
       <div style={{ marginBottom: 12 }}>
         <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: screen.tbd ? 8 : 0 }}>
diff --git a/src/pages/docs/userGuide.md b/src/pages/docs/userGuide.md
index 5f32b0c..ae685df 100644
--- a/src/pages/docs/userGuide.md
+++ b/src/pages/docs/userGuide.md
@@ -873,6 +873,16 @@ When the MCP server starts, it opens a tiny HTTP listener on `localhost:3337`. T
 
 If the user hasn't interacted with the app in the last 60 seconds, the tool returns `{ selection: null, reason: "no_recent_selection" }` so the agent knows to ask instead of acting on stale state.
 
+### Copying screen IDs for agent prompts
+
+When you ask an AI agent to "edit screen `s_xyz`" or "add a hotspot to `s_xyz`", you'll need that screen's ID. Drawd surfaces it in two places:
+
+- **Sidebar** — Open a screen's inspector. The monospace ID chip under the screen name is clickable; one click copies it to your clipboard. The chip flips to `Copied!` to confirm.
+- **Screens panel** — Right-click any screen row and choose `⧉ Copy Screen ID`. You don't need to select the screen first.
+
+> [!TIP]
+> Connection, hotspot, document, and data-model IDs are not yet copyable from the UI. For those, refer to the `.drawd` JSON or use the MCP server's `list_*` tools.
+
 ### Pre-loading a flow
 
 Start the MCP server with an existing `.drawd` file pre-loaded: