fix(web): restore native terminal context menu

packages/app/src/web/panel-terminal.tsx

@@ -51,17 +51,20 @@ const terminalPanelStyle = (mobileMode: boolean, keyboardOpen: boolean): CSSProp
 })
 
 const headerStyle: CSSProperties = {
-  alignItems: "center",
+  alignItems: "stretch",
   background: "#101419",
   borderBottom: "1px solid #3a4652",
   display: "flex",
-  gap: "12px",
+  flexDirection: "column",
+  gap: "8px",
   justifyContent: "flex-start",
   padding: "10px 12px"
 }
 
 const compactHeaderStyle: CSSProperties = {
   ...headerStyle,
+  alignItems: "center",
+  flexDirection: "row",
   flexWrap: "wrap",
   gap: "6px",
   overflow: "visible",
@@ -139,14 +142,17 @@ const headerActionsStyle: CSSProperties = {
   flexShrink: 0,
   flexWrap: "wrap",
   gap: "8px",
-  justifyContent: "flex-end",
-  marginLeft: "auto"
+  justifyContent: "flex-start",
+  width: "100%"
 }
 
 const compactHeaderActionsStyle: CSSProperties = {
   ...headerActionsStyle,
   flexWrap: "wrap",
-  gap: "4px"
+  gap: "4px",
+  justifyContent: "flex-end",
+  marginLeft: "auto",
+  width: "auto"
 }
 
 const mobileControlsCollapsedStyle: CSSProperties = {
@@ -225,6 +231,27 @@ const compactStatusStyle = (status: TerminalStatus): CSSProperties => ({
   whiteSpace: "nowrap"
 })
 
+const headerTitleStyle: CSSProperties = {
+  color: "#f6fbff",
+  fontWeight: 700,
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}
+
+const headerStatusStyle = (status: TerminalStatus): CSSProperties => ({
+  color: statusColor(status),
+  whiteSpace: "nowrap"
+})
+
+const headerSubtitleStyle: CSSProperties = {
+  color: "#8fa6c4",
+  fontSize: "12px",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+}
+
 const resolveInitialTerminalStatus = (session: ActiveTerminalSession): TerminalStatus =>
   isPendingActiveTerminalSession(session) && session.pendingConnection.phase === "error" ? "error" : "connecting"
 
@@ -248,14 +275,14 @@ const TerminalHeaderTitle = (
       </div>
     )
     : (
-      <div style={{ display: "flex", flexDirection: "column", gap: "4px", minWidth: 0 }}>
-        <div style={{ color: "#f6fbff", fontWeight: 700 }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "4px", minWidth: 0, width: "100%" }}>
+        <div style={headerTitleStyle}>
           {session.header}
         </div>
-        <div style={{ color: statusColor(status) }}>
+        <div style={headerStatusStyle(status)}>
           {status}
         </div>
-        <div style={{ color: "#8fa6c4", fontSize: "12px" }}>
+        <div style={headerSubtitleStyle}>
           {session.subtitle}
         </div>
       </div>

packages/app/src/web/terminal-copy-interaction.ts

@@ -32,22 +32,45 @@ type TerminalCopyClipboardEvent = {
 
 type TerminalCopyMouseEvent = TerminalMouseButtonEvent & TerminalSelectionModifierEvent
 
+type TerminalSelectionDragEventType = "mousemove" | "mouseup"
+
+type TerminalSelectionDragListenerRegistration = (
+  type: TerminalSelectionDragEventType,
+  listener: (event: TerminalSelectionModifierEvent) => void,
+  options: true
+) => void
+
+type TerminalSelectionDragTarget = {
+  readonly addEventListener: TerminalSelectionDragListenerRegistration
+  readonly removeEventListener: TerminalSelectionDragListenerRegistration
+}
+
+type TerminalCopyListenerRegistration = {
+  (type: "copy", listener: (event: TerminalCopyClipboardEvent) => void, options: true): void
+  (type: "mousedown", listener: (event: TerminalCopyMouseEvent) => void, options: true): void
+  (
+    type: TerminalSelectionDragEventType,
+    listener: (event: TerminalSelectionModifierEvent) => void,
+    options: true
+  ): void
+}
+
 type TerminalCopyInteractionHost = {
-  readonly addEventListener: {
-    (type: "copy", listener: (event: TerminalCopyClipboardEvent) => void, options: true): void
-    (type: "mousedown", listener: (event: TerminalCopyMouseEvent) => void, options: true): void
-  }
-  readonly removeEventListener: {
-    (type: "copy", listener: (event: TerminalCopyClipboardEvent) => void, options: true): void
-    (type: "mousedown", listener: (event: TerminalCopyMouseEvent) => void, options: true): void
-  }
+  readonly ownerDocument?: TerminalSelectionDragTarget | null
+  readonly addEventListener: TerminalCopyListenerRegistration
+  readonly removeEventListener: TerminalCopyListenerRegistration
 }
 
 type TerminalCopyInteractionArgs = {
   readonly host: TerminalCopyInteractionHost
   readonly terminal: TerminalCopyInteractionTerminal
 }
 
+type TerminalSelectionDragController = {
+  readonly dispose: () => void
+  readonly start: () => void
+}
+
 const primaryMouseButton = 0
 const secondaryMouseButton = 2
 
@@ -104,17 +127,70 @@ export const writeTerminalSelectionToClipboardData = (
   return true
 }
 
+const resolveTerminalSelectionDragTarget = (
+  host: TerminalCopyInteractionHost
+): TerminalSelectionDragTarget => host.ownerDocument ?? host
+
+const createTerminalSelectionDragController = (
+  host: TerminalCopyInteractionHost
+): TerminalSelectionDragController => {
+  let forcedSelectionDrag = false
+  let selectionDragTarget: TerminalSelectionDragTarget | null = null
+
+  const clearSelectionDrag = (): void => {
+    if (selectionDragTarget === null) {
+      forcedSelectionDrag = false
+      return
+    }
+    selectionDragTarget.removeEventListener("mousemove", onMouseMove, true)
+    selectionDragTarget.removeEventListener("mouseup", onMouseUp, true)
+    selectionDragTarget = null
+    forcedSelectionDrag = false
+  }
+
+  const onMouseMove = (event: TerminalSelectionModifierEvent): void => {
+    if (!forcedSelectionDrag) {
+      return
+    }
+    forceTerminalSelectionModifier(event)
+  }
+
+  const onMouseUp = (event: TerminalSelectionModifierEvent): void => {
+    if (forcedSelectionDrag) {
+      forceTerminalSelectionModifier(event)
+    }
+    clearSelectionDrag()
+  }
+
+  const startSelectionDrag = (): void => {
+    clearSelectionDrag()
+    forcedSelectionDrag = true
+    selectionDragTarget = resolveTerminalSelectionDragTarget(host)
+    selectionDragTarget.addEventListener("mousemove", onMouseMove, true)
+    selectionDragTarget.addEventListener("mouseup", onMouseUp, true)
+  }
+
+  return {
+    dispose: clearSelectionDrag,
+    start: startSelectionDrag
+  }
+}
+
 export const attachTerminalCopyInteraction = (
   args: TerminalCopyInteractionArgs
 ): { readonly dispose: () => void } => {
+  const selectionDrag = createTerminalSelectionDragController(args.host)
+
   const onMouseDown = (event: TerminalCopyMouseEvent): void => {
-    if (
-      !shouldForceBrowserTerminalSelection(event, args.terminal) &&
-      !shouldForceTerminalSelectionContext(event, args.terminal)
-    ) {
+    const forceBrowserSelection = shouldForceBrowserTerminalSelection(event, args.terminal)
+    const forceSelectionContext = shouldForceTerminalSelectionContext(event, args.terminal)
+    if (!forceBrowserSelection && !forceSelectionContext) {
       return
     }
     forceTerminalSelectionModifier(event)
+    if (forceBrowserSelection) {
+      selectionDrag.start()
+    }
   }
   const onCopy = (event: TerminalCopyClipboardEvent): void => {
     if (!writeTerminalSelectionToClipboardData(args.terminal, event.clipboardData)) {
@@ -129,6 +205,7 @@ export const attachTerminalCopyInteraction = (
 
   return {
     dispose: () => {
+      selectionDrag.dispose()
       args.host.removeEventListener("mousedown", onMouseDown, true)
       args.host.removeEventListener("copy", onCopy, true)
     }

packages/app/tests/docker-git/panel-terminal-skiller.test.ts

@@ -56,6 +56,17 @@ const renderTerminalPanel = (overrides: TerminalPanelRenderOverrides = {}): stri
   }))
 
 describe("TerminalPanel Skiller action", () => {
+  it("keeps desktop terminal metadata and actions in separate rows", () => {
+    const html = renderTerminalPanel()
+
+    expect(html).toContain("align-items:stretch")
+    expect(html).toContain("flex-direction:column")
+    expect(html).toContain("width:100%")
+    expect(html).toContain("text-overflow:ellipsis")
+    expect(html).toContain("white-space:nowrap")
+    expect(html).toContain(session.subtitle)
+  })
+
   it("renders Skiller in the project terminal header action row", () => {
     const html = renderTerminalPanel()
 
@@ -83,6 +94,7 @@ describe("TerminalPanel Skiller action", () => {
   it("uses a compact image preview toggle label in compact terminal headers", () => {
     const html = renderTerminalPanel({ mobileMode: true })
 
+    expect(html).toContain("flex-direction:row")
     expect(html).toContain("Img on")
     expect(html).not.toContain("Images on")
   })