feat(sdk-app): code panel flyout with usage snippet#1733
Merged
jeffredodd merged 2 commits intomainfrom May 8, 2026
Merged
Conversation
8 tasks
jeffredodd
requested review from
dmortal,
hukid,
krisxcrash,
mariechatfield and
serikjensen
as code owners
serikjensen
approved these changes
May 8, 2026
Member
serikjensen
left a comment
serikjensen
left a comment
There was a problem hiding this comment.
Looks good! i assume this can't do real time code editing? This is a great addition on its own!
jeffredodd
force-pushed
the
feat/sdk-app-hide-chrome-shortcut
branch
from
26692fd to
9d86618
Compare
jeffredodd
force-pushed
the
feat/sdk-app-code-panel
branch
from
6ea619f to
0839911
Compare
Pressing ? opens a right-side flyout that shows the JSX a partner
would write to use the currently rendered component, complete with
import statement and current entity IDs filled in. Includes a
copy-to-clipboard button and an "Anonymize IDs" toggle that swaps
real IDs for {/* TODO */} placeholders.
Snippet generation is registry-driven (requiredEntityIds +
additionalRequiredProps + component-defaults + onEvent). Syntax
highlighting uses prism-react-renderer (~30kB gzipped, ships its
own grammar bundle so no network calls).
The Code Panel and the existing Settings panel are mutually
exclusive — opening one closes the other.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace the modal flyout with a docked, resizable side panel so the example and snippet stay visible together. Add a Code button right of Settings (with an active state) that toggles the panel; the existing ? shortcut still works. Drag the left edge to resize (persisted to localStorage, min 320px, max 85vw). Double-click the handle to reset. Remove the now-redundant Anonymize IDs toggle since this is a demo-only environment. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
jeffredodd
force-pushed
the
feat/sdk-app-code-panel
branch
from
0839911 to
0fa9eba
Compare
Contributor
There was a problem hiding this comment.
Pull request overview
Adds new secondary UI features to the sdk-app dev shell to improve demo ergonomics: a right-side Code Panel that shows a generated JSX usage snippet for the currently-rendered SDK component, plus global keyboard shortcuts for settings/theme/mode and a chrome-hide toggle.
Changes:
- Introduces a Code Panel (with syntax highlighting + copy-to-clipboard) and wiring to track the currently rendered component for snippet generation.
- Adds a
useGlobalShortcuthook and uses it to implement chrome hide/show, settings open, theme cycle, and mode toggle shortcuts. - Adds a Shortcut Helper modal UI and a sidebar “Press ? for shortcuts” hint.
Reviewed changes
Copilot reviewed 11 out of 13 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| sdk-app/src/useGlobalShortcut.ts | New hook for global keyboard shortcuts with typing-target filtering and optional “mod” modifier support. |
| sdk-app/src/useCurrentComponent.ts | Adds context + hooks for reading/registering the “currently rendered” component. |
| sdk-app/src/useCodePanel.ts | Manages Code Panel open/close state (persisted) and binds a global toggle shortcut. |
| sdk-app/src/useChromeVisibility.ts | Manages chrome hidden state (persisted) and binds \ + Esc shortcuts. |
| sdk-app/src/TopBar.tsx | Adds a “Code” button to toggle the Code Panel. |
| sdk-app/src/TopBar.module.scss | Styles the active state of the Code button. |
| sdk-app/src/Sidebar.tsx | Adds a “Press ? for shortcuts” hint button above search. |
| sdk-app/src/Sidebar.module.scss | Styles the shortcuts hint UI. |
| sdk-app/src/ShortcutHelper/useShortcutHelper.ts | Adds open/close state + global shortcut bindings for the shortcuts modal. |
| sdk-app/src/ShortcutHelper/ShortcutHelper.tsx | Adds the shortcuts modal UI and list of supported shortcuts. |
| sdk-app/src/ShortcutHelper/ShortcutHelper.module.scss | Styles the shortcuts modal and overlay. |
| sdk-app/src/ShortcutHelper/index.ts | Barrel exports for Shortcut Helper components/hooks. |
| sdk-app/src/RoutedComponentRenderer.tsx | Passes chromeHidden into ComponentRenderer via outlet context. |
| sdk-app/src/generateSnippet.ts | Registry-driven usage snippet generation (required IDs + defaults + onEvent). |
| sdk-app/src/CurrentComponentContext.tsx | Provider implementation for the current-component context. |
| sdk-app/src/ComponentRenderer.tsx | Registers the current component into context; hides some UI when chrome is hidden. |
| sdk-app/src/CodePanel.tsx | Implements the right-side Code Panel with resizing, copy, and syntax highlighting. |
| sdk-app/src/CodePanel.module.scss | Styles the Code Panel layout, header, code block, and resize handle. |
| sdk-app/src/assets/icons/icon-code.svg | New icon for the TopBar Code button. |
| sdk-app/src/App.tsx | Wires together chrome hiding, Code Panel, Shortcut Helper, and additional global shortcuts. |
| sdk-app/src/app.scss | Adds styling for the “Show chrome” restore pill. |
| package.json | Adds prism-react-renderer dependency for syntax highlighting. |
| package-lock.json | Locks prism-react-renderer (and transitive typings) into the dependency tree. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+49
to
+55
| useGlobalShortcut({ | ||
| key: TOGGLE_KEY, | ||
| onTrigger: event => { | ||
| event.preventDefault() | ||
| toggle() | ||
| }, | ||
| }) |
Comment on lines
+133
to
+142
| <div className={styles.subheader}> | ||
| <span className={styles.componentLabel}> | ||
| {current.entry.category}.{current.entry.name} | ||
| </span> | ||
| <div className={styles.actions}> | ||
| <button className={styles.copyBtn} onClick={handleCopy} type="button"> | ||
| {copyState === 'copied' ? 'Copied' : 'Copy'} | ||
| </button> | ||
| </div> | ||
| </div> |
Comment on lines
+50
to
+61
| const handleCopy = async () => { | ||
| if (!snippet) return | ||
| try { | ||
| await navigator.clipboard.writeText(snippet) | ||
| setCopyState('copied') | ||
| setTimeout(() => { | ||
| setCopyState('idle') | ||
| }, 1500) | ||
| } catch { | ||
| // Clipboard unavailable | ||
| } | ||
| } |
Comment on lines
+65
to
+71
| const handleResizePointerDown = useCallback((e: ReactPointerEvent<HTMLDivElement>) => { | ||
| e.preventDefault() | ||
| isResizingRef.current = true | ||
| ;(e.target as HTMLElement).setPointerCapture(e.pointerId) | ||
| document.body.style.cursor = 'col-resize' | ||
| document.body.style.userSelect = 'none' | ||
| }, []) |
| <TopBar | ||
| companyId={activeEntities.companyId} | ||
| <CurrentComponentProvider> | ||
| <div className={`app-layout${chromeHidden ? ' app-layout-chrome-hidden' : ''}`}> |
Comment on lines
+91
to
+99
| useEffect(() => { | ||
| if (codePanel.isOpen && settingsOpen) setSettingsOpen(false) | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [codePanel.isOpen]) | ||
|
|
||
| useEffect(() => { | ||
| if (settingsOpen && codePanel.isOpen) codePanel.close() | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [settingsOpen]) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Screenshots
Why
Demos consistently need to answer "what code do I actually write to use this component?" Today that's a Storybook archaeology session. This makes the answer live + copy-pasteable while the partner is looking at the rendered component.
Test plan
Branch base
This branch stacks on top of `feat/sdk-app-hide-chrome-shortcut` (#1732), which stacks on `feat/sdk-app-manual-token-mode` (#1727). Re-target to `al/create-secondary-ui-components` after the upstream PRs merge.
🤖 Generated with Claude Code