Skip to content

feat(studio): fit and polish promptwise's Timeline tab - #6

Merged
ernis2077 merged 2 commits into
mainfrom
claude/friendly-curie-p7d5j5
Nov 3, 2026
Merged

ernis2077 merged 2 commits into
mainfrom
claude/friendly-curie-p7d5j5

Conversation

@ernis2077

Copy link
Copy Markdown

What

Studio embedded in promptwise's Timeline tab now looks and behaves like part of promptwise:

  • No second header. Embedded, Studio draws no header (logo, the folder's UUID, Capture, Inspector, Window, Export). The tab's own toolbar carries Inspector and Export: it sends their presses as promptwise:command messages (accepted only from the parent page, only those two), and Studio reports their state back as promptwise:state.
  • A compact dock. Below a 1000px dock (the tab beside the chat is about 620px on a 1440px screen) the default layout is the preview over a 260px timeline, with one side group (Design, Layers, Renders, Compositions, Assets) beside the preview, hidden until Inspector or a selection asks for it.
  • BoardUI's gray pill tabs inside each panel's card, as in promptwise's own panels, instead of folder tabs on the shell.
  • An opening frame. A film opens a second in (halfway for one under two seconds), where its first shot has arrived, instead of on its empty first frame; a time in the link still wins.
  • A lighter stage. The preview's overlay buttons wear BoardUI's light surface with a hairline instead of black glass, and the stage a hairline and medium shadow instead of a heavy black one.
  • Quieter timeline. The Shift+drag hint shows only while the pointer is over the timeline.
  • The agent first. The empty Design panel leads with "Ask the agent", its one primary button, above "Record a gesture".

Why

In the tab, Studio sat under promptwise's toolbar with a header of its own, three columns that didn't fit (the Design panel wrapped one word a line and its tab read "esign"), and opened on a blank first frame.

Related work

Refs the promptwise change that adds Inspector and Export to the Timeline tab's toolbar (BebraAI/bebraai, branch claude/friendly-curie-p7d5j5). That side shows the two buttons only once Studio has reported its state, so it works with either release.

How

  • promptwise/usePromptwiseToolbar.ts is the message bridge; StudioHeader keeps the Inspector and Export logic in named functions shared by its buttons and the bridge, and renders nothing when embedded.
  • buildEditLayout builds the compact layout under 1000px (happy-dom's 1024px default keeps the existing dock tests on the three columns).
  • Pills, the strip inside the card and the hint are in promptwise/theme.css; toolbar toggles keep the accent tint, which BoardUI assigns to selection states.
  • useStudioUrlState seeks to openingTime when embedded and the link has no time. Its cognitive complexity (17) is inherited and unchanged, so it carries a fallow suppression with that reason.

Test plan

  • Unit tests added/updated: the embedded header (no markup, commands, state, foreign messages ignored), the compact layout, the opening frame, the empty state's order and its ask-agent message, the stage's ring.
  • Manual testing performed: Studio's dev server in an iframe at 640×820 and 900×860, light and dark, and in promptwise's web app with its Timeline tab (Inspector pressed from promptwise's toolbar).
  • All Studio tests pass (720 files), typecheck, oxlint, oxfmt and the fallow audit.

Generated by Claude Code

…act dock, BoardUI pill tabs

Embedded in promptwise, Studio sat under the tab's own toolbar with a header of its
own (logo, the folder's UUID, Capture, Inspector, Window, Export), and its three
columns didn't fit the tab beside the chat (about 620px on a 1440px screen): the
Design panel wrapped one word a line and its tab read "esign".

- Embedded, Studio draws no header. The tab's toolbar carries Inspector and Export:
  it sends their presses as promptwise:command messages (only from the parent page,
  only those two), and Studio sends back their state as promptwise:state.
- Below a 1000px dock the default layout is the preview over the timeline, with one
  side group (Design, Layers, Renders, Compositions, Assets) beside the preview,
  hidden until Inspector or a selection asks for it.
- Tabs are BoardUI's gray pill tabs inside each panel's card, as in promptwise's own
  panels, instead of folder tabs on the shell.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LktT8pcsaiimfx2qqdN7Bf
…r stage, agent first

- In promptwise a film opens a second in (halfway for one under two seconds), where its
  first shot has arrived, instead of on its empty first frame; a time in the link still wins.
- The preview's overlay buttons wear BoardUI's light surface with a hairline instead of
  black glass, and the stage a hairline and a medium shadow instead of a heavy black one.
- The compact dock gives the timeline 260px (three tracks), so the preview gets the rest,
  and the Shift+drag hint shows only while the pointer is over the timeline.
- The empty Design panel leads with "Ask the agent", its one primary button, above
  "Record a gesture": in promptwise most changes go through the agent.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01LktT8pcsaiimfx2qqdN7Bf
@ernis2077
ernis2077 merged commit a5d0670 into main Nov 3, 2026
ernis2077 added a commit that referenced this pull request Nov 3, 2026
ernis2077 added a commit that referenced this pull request Nov 10, 2026
…ine and takes its chat's files (#8)

* Reapply "feat(studio): fit and polish promptwise's Timeline tab (#6)" (#7)

This reverts commit 16041d3.

* feat(studio): embedded in promptwise, the timeline looks like promptwise's own

On top of the reapplied tab fit (no second header, a compact dock):

- The timeline toolbar starts with history, the tool, split and zoom. Snapping,
  ripple, meters, keyframes, beats and the thumbnail and selection zooms open
  with More.
- Clips are flat blocks with no title band or shadow: the name is a small chip
  on pictures, and a text layer shows its words in the interface's type on the
  tertiary surface. Effect badges show on the clip in hand. Audio clips keep
  Studio's fill, which their waveform is drawn for.
- A panel alone in its group has no tab to name it.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>

* feat(studio): promptwise's resize grip on the dock's dividers, and a play button that shows

- The dock's dividers no longer light up in the accent colour. Under the
  pointer or while dragged they show promptwise's sidebar grip, the white pill
  with three lines, turned on its side between the preview and the timeline.
- The play and pause glyph had a white fill, which vanished on the light
  surface. It is now promptwise's own Timeline's filled play and pause in the
  button's ink, and the button's hover is the toolbar's.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>

* feat(studio): files dragged out of promptwise's chat land on the timeline

promptwise's chat drags its images, videos and sounds as a list of URLs under
its own type (application/x-bebra-asset). The timeline now takes that drop:
each file becomes a clip that plays from its own address, as the clips of a
converted promptwise timeline do, one after the other from the drop point.

A remote file's kind comes from its path, its length from loading its
metadata, and a video lands audible, since the project's probe can't reach it.
Its address is written as it is, with only the attribute's own characters
escaped. Anything that isn't an http(s) URL is ignored.

Co-Authored-By: Claude Fable 5.2 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5.2 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants