feat(app): add copy session ID actions

packages/app/src/components/session/session-header.tsx

@@ -343,6 +343,22 @@ export function SessionHeader() {
       .catch((err: unknown) => showRequestError(language, err))
   }
 
+  const copySessionID = () => {
+    const id = params.id
+    if (!id) return
+    navigator.clipboard
+      .writeText(id)
+      .then(() => {
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("session.share.copy.copied"),
+          description: id,
+        })
+      })
+      .catch((err: unknown) => showRequestError(language, err))
+  }
+
   const share = useSessionShare({
     globalSDK,
     currentSession,
@@ -407,6 +423,20 @@ export function SessionHeader() {
                             {language.t("session.header.open.copyPath")}
                           </span>
                         </Button>
+                        <Show when={params.id}>
+                          <div class="self-stretch w-px bg-border-weak-base" />
+                          <Button
+                            variant="ghost"
+                            class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 border-none shadow-none"
+                            onClick={copySessionID}
+                            aria-label={language.t("session.header.open.copySessionID")}
+                          >
+                            <Icon name="copy" size="small" class="text-icon-base" />
+                            <span class="text-12-regular text-text-strong">
+                              {language.t("session.header.open.copySessionID")}
+                            </span>
+                          </Button>
+                        </Show>
                       </div>
                     }
                   >
@@ -497,6 +527,20 @@ export function SessionHeader() {
                                   {language.t("session.header.open.copyPath")}
                                 </DropdownMenu.ItemLabel>
                               </DropdownMenu.Item>
+                              <DropdownMenu.Item
+                                onSelect={() => {
+                                  setMenu("open", false)
+                                  copySessionID()
+                                }}
+                                disabled={!params.id}
+                              >
+                                <div class="flex size-5 shrink-0 items-center justify-center">
+                                  <Icon name="copy" size="small" class="text-icon-weak" />
+                                </div>
+                                <DropdownMenu.ItemLabel>
+                                  {language.t("session.header.open.copySessionID")}
+                                </DropdownMenu.ItemLabel>
+                              </DropdownMenu.Item>
                             </DropdownMenu.Content>
                           </DropdownMenu.Portal>
                         </DropdownMenu>

packages/app/src/i18n/en.ts

@@ -541,6 +541,7 @@ export const dict = {
   "session.header.open.ariaLabel": "Open in {{app}}",
   "session.header.open.menu": "Open options",
   "session.header.open.copyPath": "Copy path",
+  "session.header.open.copySessionID": "Copy session ID",
 
   "status.popover.trigger": "Status",
   "status.popover.ariaLabel": "Server configurations",

packages/app/src/pages/session/use-session-commands.tsx

@@ -79,6 +79,30 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     return lines.slice(0, 2).join("\n")
   }
 
+  const write = (value: string) => {
+    const body = typeof document === "undefined" ? undefined : document.body
+    if (body) {
+      const textarea = document.createElement("textarea")
+      textarea.value = value
+      textarea.setAttribute("readonly", "")
+      textarea.style.position = "fixed"
+      textarea.style.opacity = "0"
+      textarea.style.pointerEvents = "none"
+      body.appendChild(textarea)
+      textarea.select()
+      const copied = document.execCommand("copy")
+      body.removeChild(textarea)
+      if (copied) return Promise.resolve(true)
+    }
+
+    const clipboard = typeof navigator === "undefined" ? undefined : navigator.clipboard
+    if (!clipboard?.writeText) return Promise.resolve(false)
+    return clipboard.writeText(value).then(
+      () => true,
+      () => false,
+    )
+  }
+
   const addSelectionToContext = (path: string, selection: FileSelection) => {
     const preview = selectionPreview(path, selection)
     prompt.context.add({ type: "file", path, selection, preview })
@@ -395,30 +419,6 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
         onSelect: async () => {
           if (!params.id) return
 
-          const write = (value: string) => {
-            const body = typeof document === "undefined" ? undefined : document.body
-            if (body) {
-              const textarea = document.createElement("textarea")
-              textarea.value = value
-              textarea.setAttribute("readonly", "")
-              textarea.style.position = "fixed"
-              textarea.style.opacity = "0"
-              textarea.style.pointerEvents = "none"
-              body.appendChild(textarea)
-              textarea.select()
-              const copied = document.execCommand("copy")
-              body.removeChild(textarea)
-              if (copied) return Promise.resolve(true)
-            }
-
-            const clipboard = typeof navigator === "undefined" ? undefined : navigator.clipboard
-            if (!clipboard?.writeText) return Promise.resolve(false)
-            return clipboard.writeText(value).then(
-              () => true,
-              () => false,
-            )
-          }
-
           const copy = async (url: string, existing: boolean) => {
             const ok = await write(url)
             if (!ok) {