diff --git a/packages/studio/src/components/StudioHeader.embed.dom.test.tsx b/packages/studio/src/components/StudioHeader.embed.dom.test.tsx
new file mode 100644
index 00000000000..c6c30e47468
--- /dev/null
+++ b/packages/studio/src/components/StudioHeader.embed.dom.test.tsx
@@ -0,0 +1,79 @@
+// @vitest-environment happy-dom
+
+/** Embedded in promptwise: no header; the Timeline tab's toolbar drives Inspector and Export by message. */
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const layout = { rightCollapsed: true, setRightCollapsed: vi.fn(), setRightPanelTab: vi.fn() };
+
+vi.mock("../promptwise/embed", () => ({ embeddedInPromptwise: true }));
+vi.mock("../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({
+    projectId: "773d81ab-4ac0-4f9d-acd7-4cd8838312dd",
+    renderQueue: { isRendering: false, ffmpegMissing: false },
+  }),
+}));
+vi.mock("../contexts/PanelLayoutContext", () => ({ usePanelLayoutContext: () => layout }));
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+
+const { StudioHeader } = await import("./StudioHeader");
+
+function command(name: string) {
+  act(() => {
+    window.dispatchEvent(
+      new MessageEvent("message", {
+        data: { type: "promptwise:command", command: name },
+        source: window.parent,
+      }),
+    );
+  });
+}
+
+it("draws no header, runs the toolbar's presses and reports their state", () => {
+  const posted: unknown[] = [];
+  const postMessage = vi.spyOn(window.parent, "postMessage").mockImplementation((message) => {
+    posted.push(message);
+  });
+  const onExport = vi.fn();
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() =>
+    root.render(
+      <StudioHeader
+        captureFrameHref="blob:frame"
+        captureFrameFilename="frame.png"
+        handleCaptureFrameClick={vi.fn()}
+        refreshCaptureFrameTime={vi.fn()}
+        inspectorButtonActive={false}
+        inspectorPanelActive={false}
+        onExport={onExport}
+      />,
+    ),
+  );
+
+  expect(host.innerHTML).toBe("");
+  expect(posted).toEqual([{ type: "promptwise:state", inspectorOpen: false, rendering: false }]);
+
+  command("inspector");
+  expect(layout.setRightPanelTab).toHaveBeenLastCalledWith("design");
+  expect(layout.setRightCollapsed).toHaveBeenLastCalledWith(false);
+
+  command("export");
+  expect(layout.setRightPanelTab).toHaveBeenLastCalledWith("renders");
+  expect(onExport).toHaveBeenCalledOnce();
+
+  // Only the parent page may drive Studio, and only with the commands it knows.
+  window.dispatchEvent(
+    new MessageEvent("message", { data: { type: "promptwise:command", command: "export" } }),
+  );
+  command("delete-everything");
+  expect(onExport).toHaveBeenCalledOnce();
+
+  act(() => root.unmount());
+  host.remove();
+  postMessage.mockRestore();
+});
diff --git a/packages/studio/src/components/StudioHeader.tsx b/packages/studio/src/components/StudioHeader.tsx
index 87a3a019592..4347e015756 100644
--- a/packages/studio/src/components/StudioHeader.tsx
+++ b/packages/studio/src/components/StudioHeader.tsx
@@ -7,6 +7,8 @@ import { Button, cn, Tooltip } from "./ui";
 import { ButtonGroup, ButtonGroupItem } from "../boardui/components/base/buttons/button-group";
 import { Dock } from "./dock/Dock";
 import { PromptwiseMark } from "../promptwise/PromptwiseMark";
+import { embeddedInPromptwise } from "../promptwise/embed";
+import { usePromptwiseToolbar } from "../promptwise/usePromptwiseToolbar";
 import { ShowThemeToggle, ThemeToggle } from "./ThemeToggle";
 
 interface StudioHeaderProps {
@@ -55,6 +57,39 @@ export const StudioHeader = memo(function StudioHeader({
   const isRendering = renderQueue.isRendering;
   const ffmpegMissing = renderQueue.ffmpegMissing;
 
+  const toggleInspector = () => {
+    if (shouldOpenInspector(rightCollapsed, inspectorPanelActive)) {
+      trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
+      setRightPanelTab("design");
+      setRightCollapsed(false);
+      return;
+    }
+    trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: true });
+    // Keep the current selection when collapsing the Inspector — closing
+    // the panel shouldn't deselect the element.
+    setRightCollapsed(true);
+  };
+
+  const exportVideo = () => {
+    if (isRendering) return;
+    setRightPanelTab("renders");
+    setRightCollapsed(false);
+    // Without an encoder this render cannot finish, so the click
+    // delivers the user to the prompt that fixes it instead of
+    // queueing a job that exists only to fail. Disabling the button
+    // would leave them staring at a dead control with no route to
+    // the explanation.
+    if (ffmpegMissing) return;
+    onExport?.();
+  };
+
+  usePromptwiseToolbar(
+    { inspectorOpen: inspectorButtonActive, rendering: isRendering },
+    { inspector: toggleInspector, export: exportVideo },
+  );
+  // promptwise's Timeline tab has its own toolbar and tab name, so a second header would only repeat them.
+  if (embeddedInPromptwise) return null;
+
   return (
     <div className="flex h-12 shrink-0 items-center justify-between border-b border-border-button-default bg-background-primary-default px-3">
       <div className="flex items-center gap-3">
@@ -104,18 +139,7 @@ export const StudioHeader = memo(function StudioHeader({
               aria-pressed={inspectorButtonActive}
               selected={inspectorButtonActive}
               leadingIcon={RiLayoutRightLine}
-              onClick={() => {
-                if (shouldOpenInspector(rightCollapsed, inspectorPanelActive)) {
-                  trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: false });
-                  setRightPanelTab("design");
-                  setRightCollapsed(false);
-                  return;
-                }
-                trackStudioEvent("panel_toggle", { panel: "inspector", collapsed: true });
-                // Keep the current selection when collapsing the Inspector — closing
-                // the panel shouldn't deselect the element.
-                setRightCollapsed(true);
-              }}
+              onClick={toggleInspector}
             >
               Inspector
             </ButtonGroupItem>
@@ -137,18 +161,7 @@ export const StudioHeader = memo(function StudioHeader({
             variant="primary"
             data-testid="header-export"
             disabled={isRendering}
-            onClick={() => {
-              if (isRendering) return;
-              setRightPanelTab("renders");
-              setRightCollapsed(false);
-              // Without an encoder this render cannot finish, so the click
-              // delivers the user to the prompt that fixes it instead of
-              // queueing a job that exists only to fail. Disabling the button
-              // would leave them staring at a dead control with no route to
-              // the explanation.
-              if (ffmpegMissing) return;
-              onExport?.();
-            }}
+            onClick={exportVideo}
           >
             {isRendering ? "Rendering…" : "Export"}
           </Button>
diff --git a/packages/studio/src/components/dock/dockLayout.test.ts b/packages/studio/src/components/dock/dockLayout.test.ts
index bddf62e8da8..40c3a1271c2 100644
--- a/packages/studio/src/components/dock/dockLayout.test.ts
+++ b/packages/studio/src/components/dock/dockLayout.test.ts
@@ -132,3 +132,40 @@ describe("applySideMinimums", () => {
     expect(timeline.group.minimumWidth).toBe(120);
   });
 });
+
+describe("buildEditLayout on a narrow dock", () => {
+  let api: DockviewApi;
+  beforeEach(() => {
+    ({ api } = mountBareDockview());
+  });
+  afterEach(() => {
+    api.dispose();
+    document.body.innerHTML = "";
+  });
+
+  it("puts the preview over the timeline and one hidden side group beside it, as in promptwise's tab", () => {
+    api.layout(640, 820);
+    buildEditLayout(api, 640);
+    const side = api.getPanel("design")!.group;
+    expect(side.panels.map((panel) => panel.id)).toEqual([
+      "design",
+      "layers",
+      "renders",
+      "compositions",
+      "assets",
+    ]);
+    expect(side.api.isVisible).toBe(false);
+    expect(api.getPanel("preview")!.group.api.isVisible).toBe(true);
+    expect(api.getPanel("preview")!.group.width).toBe(640);
+    expect(api.getPanel("timeline")!.group.width).toBe(640);
+    expect(api.getPanel("timeline")!.group.height).toBe(260);
+    expect(api.getPanel("code")).toBeUndefined();
+  });
+
+  it("keeps the three columns on a wide one", () => {
+    api.layout(1200, 700);
+    buildEditLayout(api, 1200);
+    expect(api.getPanel("compositions")!.group).not.toBe(api.getPanel("design")!.group);
+    expect(api.getPanel("design")!.group.api.isVisible).toBe(true);
+  });
+});
diff --git a/packages/studio/src/components/dock/dockLayout.ts b/packages/studio/src/components/dock/dockLayout.ts
index 94886d93aea..acd9f8c1a35 100644
--- a/packages/studio/src/components/dock/dockLayout.ts
+++ b/packages/studio/src/components/dock/dockLayout.ts
@@ -10,6 +10,11 @@ const MIN_SIDE_W_FLOOR = 120;
 const DEFAULT_TIMELINE_H = 360;
 const DEFAULT_LEFT = ["compositions", "assets", "code", "catalog"] as const;
 const DEFAULT_RIGHT = ["design", "layers", "renders", "variables", "motionBlur"] as const;
+/** Below this dock width (promptwise's Timeline tab beside its chat) two side columns would crush the preview. */
+const COMPACT_DOCK_W = 1000;
+const COMPACT_SIDE = ["design", "layers", "renders", "compositions", "assets"] as const;
+/** Room for three tracks under the toolbar and ruler; the preview gets the rest. */
+const COMPACT_TIMELINE_H = 260;
 
 /** Preferred side widths; when they overflow the preview's floor the right yields first, then the left. */
 export function defaultSideWidths(viewportWidth: number) {
@@ -99,12 +104,20 @@ function addSideColumn(
   return first;
 }
 
-/** The default Edit layout: [library | preview | inspector] over a full-width timeline. */
+/**
+ * The default Edit layout: [library | preview | inspector] over a full-width timeline, or on a narrow
+ * dock the preview over the timeline with one side group beside the preview, shown when asked for
+ * (Inspector, a selection) since it would leave the preview too little room.
+ */
 export function buildEditLayout(
   api: DockviewApi,
   viewportWidth: number,
   panels: readonly PanelId[] = PANEL_IDS,
 ) {
+  if (viewportWidth < COMPACT_DOCK_W) {
+    buildCompactLayout(api, viewportWidth, panels);
+    return;
+  }
   api.clear();
   const widths = defaultSideWidths(viewportWidth);
   addRegisteredPanel(api, "preview");
@@ -116,3 +129,15 @@ export function buildEditLayout(
   if (right) api.getPanel(right)?.group.api.setSize({ width: widths.right });
   api.getPanel("timeline")?.group.api.setSize({ height: DEFAULT_TIMELINE_H });
 }
+
+function buildCompactLayout(api: DockviewApi, viewportWidth: number, panels: readonly PanelId[]) {
+  api.clear();
+  addRegisteredPanel(api, "preview");
+  addRegisteredPanel(api, "timeline", { referencePanel: "preview", direction: "below" });
+  const side = addSideColumn(api, COMPACT_SIDE, panels, "right");
+  applySideMinimums(api, viewportWidth);
+  api.getPanel("timeline")?.group.api.setSize({ height: COMPACT_TIMELINE_H });
+  const group = side ? api.getPanel(side)?.group : undefined;
+  group?.api.setSize({ width: Math.max(MIN_SIDE_W, defaultSideWidths(viewportWidth).right) });
+  group?.api.setVisible(false);
+}
diff --git a/packages/studio/src/components/editor/PropertyPanelEmptyState.embed.dom.test.tsx b/packages/studio/src/components/editor/PropertyPanelEmptyState.embed.dom.test.tsx
new file mode 100644
index 00000000000..2b21a6f6328
--- /dev/null
+++ b/packages/studio/src/components/editor/PropertyPanelEmptyState.embed.dom.test.tsx
@@ -0,0 +1,37 @@
+// @vitest-environment happy-dom
+
+/** In promptwise most changes go through the agent, so its button leads the empty Design panel. */
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("../../promptwise/embed", async (original) => ({
+  ...(await original<typeof import("../../promptwise/embed")>()),
+  embeddedInPromptwise: true,
+}));
+
+const { PropertyPanelEmptyState } = await import("./PropertyPanelEmptyState");
+
+it("puts the agent first, as the panel's one primary button, and asks promptwise to open its chat", () => {
+  const posted: unknown[] = [];
+  const postMessage = vi.spyOn(window.parent, "postMessage").mockImplementation((message) => {
+    posted.push(message);
+  });
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => root.render(<PropertyPanelEmptyState flat multiSelectCount={0} />));
+
+  const text = host.textContent ?? "";
+  expect(text.indexOf("Ask the agent")).toBeLessThan(text.indexOf("Record a gesture"));
+  const agent = host.querySelector("button")!;
+  expect(agent.textContent).toContain("Ask the agent");
+  act(() => agent.click());
+  expect(posted).toEqual([{ type: "promptwise:ask-agent" }]);
+
+  act(() => root.unmount());
+  host.remove();
+  postMessage.mockRestore();
+});
diff --git a/packages/studio/src/components/editor/PropertyPanelEmptyState.test.tsx b/packages/studio/src/components/editor/PropertyPanelEmptyState.test.tsx
index 2848c1ee0e3..1578a77bb71 100644
--- a/packages/studio/src/components/editor/PropertyPanelEmptyState.test.tsx
+++ b/packages/studio/src/components/editor/PropertyPanelEmptyState.test.tsx
@@ -28,7 +28,7 @@ describe("PropertyPanelEmptyState — flat empty", () => {
     expect(host.textContent).toContain("Nothing selected");
     expect(host.textContent).toContain("Record a gesture");
     // The agent chip only shows inside promptwise, whose chat it opens.
-    expect(host.textContent).not.toContain("Describe a change to the agent");
+    expect(host.textContent).not.toContain("Ask the agent");
     act(() => root.unmount());
   });
 });
diff --git a/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx b/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx
index 067d9068210..8385c190baa 100644
--- a/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx
+++ b/packages/studio/src/components/editor/PropertyPanelEmptyState.tsx
@@ -3,6 +3,7 @@ import type { DomEditSelection } from "./domEditingTypes";
 import { canHideSelections } from "../../utils/timelineInspector";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { askPromptwiseAgent, embeddedInPromptwise } from "../../promptwise/embed";
+import { Button } from "../ui";
 
 function FlatEmptyState() {
   return (
@@ -24,6 +25,17 @@ function FlatEmptyState() {
         Click any element on the canvas to edit it, or drag to select several.
       </div>
       <div className="mt-2 flex w-full flex-col gap-1.5">
+        {/* In promptwise the agent is the way most changes are made, so it comes first. */}
+        {embeddedInPromptwise && (
+          <Button
+            variant="primary"
+            onClick={askPromptwiseAgent}
+            icon={<span aria-hidden>✦</span>}
+            title="Describe a change to the agent"
+          >
+            Ask the agent
+          </Button>
+        )}
         <span className="flex items-center justify-between rounded-lg border border-panel-border bg-panel-bg px-3 py-2">
           <span className="flex items-center gap-2 text-caption-2-regular text-panel-text-2">
             <span className="text-danger-ink">●</span>
@@ -33,16 +45,6 @@ function FlatEmptyState() {
             R
           </span>
         </span>
-        {embeddedInPromptwise && (
-          <button
-            type="button"
-            onClick={askPromptwiseAgent}
-            className="flex items-center gap-2 rounded-lg border border-panel-border bg-panel-bg px-3 py-2 text-caption-2-regular text-panel-text-2 hover:bg-hover"
-          >
-            <span className="text-accent-ink">✦</span>
-            Describe a change to the agent
-          </button>
-        )}
       </div>
     </div>
   );
diff --git a/packages/studio/src/components/editor/SnapToolbar.tsx b/packages/studio/src/components/editor/SnapToolbar.tsx
index 8d5c72a2d55..63637d484b5 100644
--- a/packages/studio/src/components/editor/SnapToolbar.tsx
+++ b/packages/studio/src/components/editor/SnapToolbar.tsx
@@ -5,6 +5,10 @@ import { usePlayerStore } from "../../player/store/playerStore";
 import { usePreviewOverlayContext } from "./PreviewOverlayProvider";
 import { ownsPlainKeys } from "../../utils/typingTarget";
 
+/** A preview overlay button that's off: BoardUI's light surface with a hairline, readable over any frame. */
+const overlayButtonOff =
+  "bg-background-primary-default/90 text-foreground-icon-secondary shadow-xs ring-1 ring-border-button-default hover:bg-background-primary-hover hover:text-foreground-icon-primary";
+
 // fallow-ignore-next-line complexity
 export const SnapToolbar = memo(function SnapToolbar() {
   const [gridPopoverOpen, setGridPopoverOpen] = useState(false);
@@ -87,9 +91,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
         <button
           type="button"
           className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
-            motionPathArmed
-              ? "bg-studio-accent/20 text-accent-ink"
-              : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
+            motionPathArmed ? "bg-studio-accent/20 text-accent-ink" : overlayButtonOff
           }`}
           onClick={() => setMotionPathArmed(!motionPathArmed)}
           title={
@@ -113,9 +115,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
             key={key}
             type="button"
             className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
-              visible
-                ? "bg-studio-accent/20 text-accent-ink"
-                : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
+              visible ? "bg-studio-accent/20 text-accent-ink" : overlayButtonOff
             }`}
             onClick={() => {
               toggle();
@@ -132,9 +132,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
       <button
         type="button"
         className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
-          prefs.snapEnabled
-            ? "bg-studio-accent/20 text-accent-ink"
-            : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
+          prefs.snapEnabled ? "bg-studio-accent/20 text-accent-ink" : overlayButtonOff
         }`}
         onClick={toggleSnap}
         title={prefs.snapEnabled ? "Snap enabled (S)" : "Snap disabled (S)"}
@@ -148,9 +146,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
           ref={gridButtonRef}
           type="button"
           className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
-            prefs.gridVisible
-              ? "bg-studio-accent/20 text-accent-ink"
-              : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
+            prefs.gridVisible ? "bg-studio-accent/20 text-accent-ink" : overlayButtonOff
           }`}
           onClick={toggleGrid}
           onContextMenu={(e) => {
@@ -169,7 +165,7 @@ export const SnapToolbar = memo(function SnapToolbar() {
         </button>
         <button
           type="button"
-          className="absolute -right-0.5 -bottom-0.5 rounded-sm p-0.5 text-white/50 hover:text-white/90 bg-black/50"
+          className="absolute -right-0.5 -bottom-0.5 rounded-sm p-0.5 bg-background-tertiary-default text-foreground-icon-secondary hover:text-foreground-icon-primary"
           onClick={() => {
             if (gridPopoverOpen) settleGridSpacing();
             setGridPopoverOpen((v) => !v);
diff --git a/packages/studio/src/components/nle/NLEPreview.test.ts b/packages/studio/src/components/nle/NLEPreview.test.ts
index 5c0b088c376..e7987e8c71e 100644
--- a/packages/studio/src/components/nle/NLEPreview.test.ts
+++ b/packages/studio/src/components/nle/NLEPreview.test.ts
@@ -218,9 +218,9 @@ describe("NLEPreview", () => {
   it("draws the canvas boundary on the preview stage", () => {
     const view = renderPreview();
 
-    expect(view.stage.className).toContain(
-      "shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_4px_32px_rgba(0,0,0,0.7)]",
-    );
+    // A hairline and BoardUI's medium shadow, light enough beside promptwise's flat cards.
+    expect(view.stage.className).toContain("ring-1 ring-border-button-default");
+    expect(view.stage.className).toContain("shadow-md");
     view.cleanup();
   });
 
diff --git a/packages/studio/src/components/nle/NLEPreview.tsx b/packages/studio/src/components/nle/NLEPreview.tsx
index 209ec90c99a..87c9e19065b 100644
--- a/packages/studio/src/components/nle/NLEPreview.tsx
+++ b/packages/studio/src/components/nle/NLEPreview.tsx
@@ -506,7 +506,7 @@ export const NLEPreview = memo(function NLEPreview({
         >
           <div
             ref={stageRef}
-            className="relative shrink-0 pointer-events-auto shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_4px_32px_rgba(0,0,0,0.7)]"
+            className="relative shrink-0 pointer-events-auto shadow-md ring-1 ring-border-button-default"
             style={{
               width: `${stageSize.width}px`,
               height: `${stageSize.height}px`,
diff --git a/packages/studio/src/hooks/useStudioUrlState.opening.dom.test.tsx b/packages/studio/src/hooks/useStudioUrlState.opening.dom.test.tsx
new file mode 100644
index 00000000000..d00671bbb82
--- /dev/null
+++ b/packages/studio/src/hooks/useStudioUrlState.opening.dom.test.tsx
@@ -0,0 +1,56 @@
+// @vitest-environment happy-dom
+
+/** In promptwise's tab a film opens a second in, not on its empty first frame; a time in the link still wins. */
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it, vi } from "vitest";
+import { usePlayerStore } from "../player";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("../promptwise/embed", async (original) => ({
+  ...(await original<typeof import("../promptwise/embed")>()),
+  embeddedInPromptwise: true,
+}));
+
+const { useStudioUrlState } = await import("./useStudioUrlState");
+
+function Probe({ duration, currentTime }: { duration: number; currentTime: number | null }) {
+  useStudioUrlState({
+    projectId: "promo",
+    activeCompPath: "index.html",
+    duration,
+    isPlaying: false,
+    compositionLoading: false,
+    refreshKey: 0,
+    previewIframeRef: { current: null },
+    rightPanelTab: "design",
+    rightCollapsed: true,
+    activeCompPathHydrated: true,
+    domEditSelection: null,
+    domEditGroupSelections: [],
+    applyMarqueeSelection: vi.fn(),
+    buildDomSelectionFromTarget: vi.fn(async () => null),
+    applyDomSelection: vi.fn(),
+    setRightPanelTab: vi.fn(),
+    initialState: { currentTime, selection: null } as never,
+  });
+  return null;
+}
+
+function openAt(duration: number, currentTime: number | null) {
+  usePlayerStore.getState().clearSeekRequest();
+  const root = createRoot(document.createElement("div"));
+  act(() => root.render(<Probe duration={duration} currentTime={currentTime} />));
+  const seek = usePlayerStore.getState().requestedSeekTime;
+  act(() => root.unmount());
+  return seek;
+}
+
+it("opens a film a second in, a short one halfway, and a link's own time as it is", () => {
+  expect(openAt(11.5, null)).toBe(1);
+  expect(openAt(1.2, null)).toBe(0.6);
+  expect(openAt(11.5, 4.2)).toBe(4.2);
+  // The composition's length isn't known yet: wait for it rather than seek to 0.
+  expect(openAt(0, null)).toBeNull();
+});
diff --git a/packages/studio/src/hooks/useStudioUrlState.ts b/packages/studio/src/hooks/useStudioUrlState.ts
index 03b628c81af..08cb7a00dfe 100644
--- a/packages/studio/src/hooks/useStudioUrlState.ts
+++ b/packages/studio/src/hooks/useStudioUrlState.ts
@@ -3,6 +3,7 @@ import { usePlayerStore } from "../player";
 import { findElementForSelection, type DomEditSelection } from "../components/editor/domEditing";
 import { clampNumber, type RightPanelTab } from "../utils/studioHelpers";
 import { parseProjectIdFromHash } from "../utils/projectRouting";
+import { embeddedInPromptwise, openingTime } from "../promptwise/embed";
 import {
   buildStudioHash,
   parseStudioUrlStateFromHash,
@@ -11,6 +12,17 @@ import {
   type StudioUrlState,
 } from "../utils/studioUrlState";
 
+/** A link with a time seeks there; in promptwise one without seeks too, to the opening frame. */
+function seeksOnHydration(requested: number | null): boolean {
+  return requested != null || embeddedInPromptwise;
+}
+
+/** Where hydration seeks: the link's time, else the opening frame (promptwise only); null until the length is known. */
+function hydrationSeekTime(requested: number | null, duration: number): number | null {
+  if (requested == null) return duration > 0 ? openingTime(duration) : null;
+  return duration > 0 ? clampNumber(requested, 0, duration) : Math.max(0, requested);
+}
+
 interface UseStudioUrlStateParams {
   projectId: string | null;
   activeCompPath: string | null;
@@ -160,6 +172,8 @@ export async function resolveUrlSelections({
   return members;
 }
 
+// Inherited: cognitive 17 before the promptwise opening frame, which added none (fallow re-flags edited files).
+// fallow-ignore-next-line complexity
 export function useStudioUrlState({
   projectId,
   activeCompPath,
@@ -180,7 +194,8 @@ export function useStudioUrlState({
   initialState,
 }: UseStudioUrlStateParams) {
   const currentTime = usePlayerStore((s) => s.currentTime);
-  const hydratedSeekRef = useRef(initialState.currentTime == null);
+  // In promptwise a link without a time still opens on a frame that shows something (openingTime).
+  const hydratedSeekRef = useRef(!seeksOnHydration(initialState.currentTime));
   const hydratedInitialTimeRef = useRef(initialState.currentTime == null);
   const hydratedSelectionRef = useRef(initialState.selection == null);
   // Mirrors hydratedSelectionRef as state so the selection-hydration effect can
@@ -266,11 +281,8 @@ export function useStudioUrlState({
   );
 
   useEffect(() => {
-    if (!projectId || hydratedSeekRef.current || compositionLoading) return;
-    const nextTime =
-      duration > 0
-        ? clampNumber(initialState.currentTime ?? 0, 0, duration)
-        : Math.max(0, initialState.currentTime ?? 0);
+    const nextTime = hydrationSeekTime(initialState.currentTime, duration);
+    if (!projectId || hydratedSeekRef.current || compositionLoading || nextTime == null) return;
     // The request is honored even if it fires before the player runtime mounts:
     // initializeAdapter reconciles the store's requestedSeekTime when the adapter
     // becomes ready. currentTime then settles to nextTime, releasing the selection
diff --git a/packages/studio/src/player/components/TimelineShortcutHint.tsx b/packages/studio/src/player/components/TimelineShortcutHint.tsx
index 252586b6158..44880d81df7 100644
--- a/packages/studio/src/player/components/TimelineShortcutHint.tsx
+++ b/packages/studio/src/player/components/TimelineShortcutHint.tsx
@@ -6,7 +6,7 @@ interface TimelineShortcutHintProps {
 
 export function TimelineShortcutHint({ theme }: TimelineShortcutHintProps) {
   return (
-    <div className="absolute bottom-2 right-3 pointer-events-none z-20">
+    <div className="hf-timeline-shortcut-hint absolute bottom-2 right-3 pointer-events-none z-20">
       <div
         className="flex items-center gap-1.5 px-2 py-1 rounded-md border"
         style={{ background: "var(--timeline-shortcut-bg)", borderColor: theme.gutterBorder }}
diff --git a/packages/studio/src/promptwise/embed.ts b/packages/studio/src/promptwise/embed.ts
index 2fa085534e5..69cdd42cfab 100644
--- a/packages/studio/src/promptwise/embed.ts
+++ b/packages/studio/src/promptwise/embed.ts
@@ -3,3 +3,8 @@ export const embeddedInPromptwise = typeof window !== "undefined" && window.pare
 export function askPromptwiseAgent() {
   window.parent.postMessage({ type: "promptwise:ask-agent" }, "*");
 }
+
+/** Where a film opens in promptwise's tab: a second in, where its first shot has arrived, not its empty first frame. */
+export function openingTime(duration: number): number {
+  return Math.min(1, duration / 2);
+}
diff --git a/packages/studio/src/promptwise/theme.css b/packages/studio/src/promptwise/theme.css
index ad40ce20a80..2611f94da27 100644
--- a/packages/studio/src/promptwise/theme.css
+++ b/packages/studio/src/promptwise/theme.css
@@ -24,7 +24,8 @@
   --color-text-off: var(--color-text-tertiary);
 
   --panel-shell-bg: var(--color-background-secondary-default);
-  --panel-strip-bg: var(--color-background-secondary-default);
+  /* The tab strip sits inside each panel's card, as in promptwise's own panels. */
+  --panel-strip-bg: var(--panel-card-bg);
 
   /* The promptwise orange. */
   --color-accent: light-dark(var(--color-accent-600), var(--color-accent-500));
@@ -46,12 +47,32 @@
   padding: 0 4px;
 }
 
-/* BoardUI's card radius on the dock's panels and their tabs. */
+/* BoardUI's card radius on the dock's panels. */
 .hf-dock .dv-groupview {
   border-radius: 16px;
 }
 
-.hf-dock .dv-tab,
+/* Tabs are BoardUI's gray pill tabs (promptwise's PillTab "gray"): the shown one on the tertiary background. */
+.hf-dock .dv-tabs-and-actions-container {
+  padding: 6px 6px 0;
+}
+
+.hf-dock .dv-tab.dv-tab,
+.hf-dock-tab-fill {
+  height: 28px;
+  border-radius: var(--radius-md);
+}
+
 .hf-dock-tab-fill {
-  border-radius: 10px 10px 0 0;
+  background-color: var(--color-background-tertiary-default);
+}
+
+/* The Shift+drag hint shows while the pointer is over the timeline's panel, not all the time. */
+.hf-timeline-shortcut-hint {
+  opacity: 0;
+  transition: opacity 150ms ease-out;
+}
+
+.dv-groupview:hover .hf-timeline-shortcut-hint {
+  opacity: 1;
 }
diff --git a/packages/studio/src/promptwise/usePromptwiseToolbar.ts b/packages/studio/src/promptwise/usePromptwiseToolbar.ts
new file mode 100644
index 00000000000..fcc5e0bafa3
--- /dev/null
+++ b/packages/studio/src/promptwise/usePromptwiseToolbar.ts
@@ -0,0 +1,44 @@
+import { useEffect, useRef } from "react";
+import { embeddedInPromptwise } from "./embed";
+
+export type PromptwiseCommand = "inspector" | "export";
+
+export interface PromptwiseToolbarState {
+  inspectorOpen: boolean;
+  rendering: boolean;
+}
+
+function isCommand(value: unknown): value is PromptwiseCommand {
+  return value === "inspector" || value === "export";
+}
+
+/**
+ * Embedded in promptwise, Studio draws no header: the Timeline tab's toolbar carries Inspector and
+ * Export. It sends their presses as promptwise:command messages, and Studio sends back their state.
+ */
+export function usePromptwiseToolbar(
+  state: PromptwiseToolbarState,
+  commands: Record<PromptwiseCommand, () => void>,
+) {
+  const latest = useRef(commands);
+  latest.current = commands;
+
+  useEffect(() => {
+    if (!embeddedInPromptwise) return;
+    const onMessage = (event: MessageEvent) => {
+      if (event.source !== window.parent) return;
+      const data: unknown = event.data;
+      if (typeof data !== "object" || data === null) return;
+      const { type, command } = data as { type?: unknown; command?: unknown };
+      if (type === "promptwise:command" && isCommand(command)) latest.current[command]();
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, []);
+
+  const { inspectorOpen, rendering } = state;
+  useEffect(() => {
+    if (!embeddedInPromptwise) return;
+    window.parent.postMessage({ type: "promptwise:state", inspectorOpen, rendering }, "*");
+  }, [inspectorOpen, rendering]);
+}