diff --git a/apps/docs/components/ui/action-media.tsx b/apps/docs/components/ui/action-media.tsx
new file mode 100644
index 000000000..13c906368
--- /dev/null
+++ b/apps/docs/components/ui/action-media.tsx
@@ -0,0 +1,40 @@
+'use client'
+
+import { getAssetUrl } from '@/lib/utils'
+
+interface ActionImageProps {
+ src: string
+ alt: string
+}
+
+interface ActionVideoProps {
+ src: string
+ alt: string
+}
+
+export function ActionImage({ src, alt }: ActionImageProps) {
+ const resolvedSrc = getAssetUrl(src.startsWith('/') ? src.slice(1) : src)
+
+ return (
+
+ )
+}
+
+export function ActionVideo({ src, alt }: ActionVideoProps) {
+ const resolvedSrc = getAssetUrl(src.startsWith('/') ? src.slice(1) : src)
+
+ return (
+
+ )
+}
diff --git a/apps/docs/content/docs/en/quick-reference/index.mdx b/apps/docs/content/docs/en/quick-reference/index.mdx
index 02126a624..e0996d0b1 100644
--- a/apps/docs/content/docs/en/quick-reference/index.mdx
+++ b/apps/docs/content/docs/en/quick-reference/index.mdx
@@ -4,6 +4,7 @@ description: Essential actions for navigating and using the Sim workflow editor
---
import { Callout } from 'fumadocs-ui/components/callout'
+import { ActionImage, ActionVideo } from '@/components/ui/action-media'
A quick lookup for everyday actions in the Sim workflow editor. For keyboard shortcuts, see [Keyboard Shortcuts](/keyboard-shortcuts).
@@ -13,124 +14,362 @@ A quick lookup for everyday actions in the Sim workflow editor. For keyboard sho
## Workspaces
-| Action | How |
-|--------|-----|
-| Create a workspace | Click workspace dropdown in sidebar → **New Workspace** |
-| Rename a workspace | Workspace settings → Edit name |
-| Switch workspaces | Click workspace dropdown in sidebar → Select workspace |
-| Invite team members | Workspace settings → **Team** → **Invite** |
+
| Action | How | Preview |
|---|---|---|
| Create a workspace | +Click workspace dropdown → **New Workspace** | +|
| Switch workspaces | +Click workspace dropdown → Select workspace | +|
| Invite team members | +Sidebar → **Invite** | +|
| Rename a workspace | +Right-click workspace → **Rename** | +|
| Duplicate a workspace | +Right-click workspace → **Duplicate** | +|
| Export a workspace | +Right-click workspace → **Export** | +|
| Delete a workspace | +Right-click workspace → **Delete** | +
| Action | How | Preview |
|---|---|---|
| Create a workflow | +Click **+** button in sidebar | +|
| Reorder / move workflows | +Drag workflow up/down or onto a folder | +|
| Import a workflow | +Click import button in sidebar → Select file | +|
| Multi-select workflows | +`Mod+Click` or `Shift+Click` workflows in sidebar | +|
| Open in new tab | +Right-click workflow → **Open in New Tab** | +|
| Rename a workflow | +Right-click workflow → **Rename** | +|
| Assign workflow color | +Right-click workflow → **Change Color** | +|
| Duplicate a workflow | +Right-click workflow → **Duplicate** | +|
| Export a workflow | +Right-click workflow → **Export** | +|
| Delete a workflow | +Right-click workflow → **Delete** | +|
| Rename a folder | +Right-click folder → **Rename** | +|
| Create workflow in folder | +Right-click folder → **Create workflow** | +|
| Create folder in folder | +Right-click folder → **Create folder** | +|
| Duplicate a folder | +Right-click folder → **Duplicate** | +|
| Export a folder | +Right-click folder → **Export** | +|
| Delete a folder | +Right-click folder → **Delete** | +
| Action | How | Preview |
|---|---|---|
| Add a block | +Drag from Toolbar panel, or right-click canvas → **Add Block** | +|
| Multi-select blocks | +`Mod+Click` additional blocks, or shift-drag to draw selection box | +|
| Copy blocks | +`Mod+C` with blocks selected | +|
| Paste blocks | +`Mod+V` to paste copied blocks | +|
| Duplicate blocks | +Right-click → **Duplicate** | +|
| Delete blocks | +`Delete` or `Backspace` key, or right-click → **Delete** | +|
| Rename a block | +Click block name in header, or edit in the Editor panel | +|
| Enable/Disable a block | +Right-click → **Enable/Disable** | +|
| Toggle handle orientation | +Right-click → **Toggle Handles** | +|
| Configure a block | +Select block → use Editor panel on right | +
| Action | How | Preview |
|---|---|---|
| Create a connection | +Drag from output handle to input handle | +|
| Delete a connection | +Click edge to select → `Delete` key | +|
| Use output in another block | +Drag connection tag into input field | +
| Action | How | Preview |
|---|---|---|
| Search toolbar | +`Mod+F` | +|
| Search everything | +`Mod+K` | +|
| Toggle manual mode | +Click toggle button to switch between manual and selector | +|
| Collapse/expand sidebar | +Click collapse button on sidebar | +
| Action | How | Preview |
|---|---|---|
| Run workflow | +Click Run Workflow button or `Mod+Enter` | +|
| Stop workflow | +Click Stop button or `Mod+Enter` while running | +|
| Test with chat | +Use Chat panel on the right side | +|
| Select output to view | +Click dropdown in Chat panel → Select block output | +|
| Clear chat history | +Click clear button in Chat panel | +|
| View execution logs | +Open terminal panel at bottom, or `Mod+L` | +|
| Filter logs by block or status | +Click block filter in terminal or right-click log entry → **Filter by Block** or **Filter by Status** | +|
| Search logs | +Use search field in terminal or right-click log entry → **Search** | +|
| Copy log entry | +Clipboard Icon or Right-click log entry → **Copy** | +|
| Clear terminal | +Trash icon or `Mod+D` | +
| Action | How | Preview |
|---|---|---|
| Deploy a workflow | +Click **Deploy** button in panel | +|
| Update deployment | +Click **Update** when changes are detected | +|
| View deployment status | +Check status indicator (Live/Update/Deploy) in Deploy tab | +|
| Revert deployment | +Access previous versions in Deploy tab → **Promote to live** | +|
| Copy API endpoint | +Deploy tab → Copy API endpoint URL | +
| Action | How | Preview |
|---|---|---|
| Add / Edit / Delete workflow variable | +Panel -> Variables -> **Add Variable**, click to edit, or delete icon | +|
| Add environment variable | +Settings → **Environment Variables** → **Add** | +|
| Reference a workflow variable | +Use ` |
+ |
| Reference an environment variable | +Use `{{ENV_VAR}}` syntax in block inputs | +