Phase 5: Panel Editor — custom AI-powered action panels

[sonnes]

Goal

Let users create custom action panels with AI-powered buttons. Panels can be linked to specific apps and auto-appear when that app is focused. AI generates complete panels from natural language descriptions.

Design Reference

Panel Editor

Deliverables

Data Model

• Panel (SwiftData) — id, name, icon, description, gridSize (rows × cols), linkedAppBundleIDs, buttons, createdAt, updatedAt
• PanelButton (SwiftData) — id, label, iconName (SF Symbol), color (enum: blue, green, orange, purple, pink, red, gradient), actionType (AI Prompt), prompt, size (S/M/L/XL), gridPosition

Panel Editor — Three-Column Layout

• Panels List (200px, left sidebar):

  • Header: traffic-light dots (52px)
  • Section title "Panels" + blue "+" add button
  • Panel items: icon + name + details ("4 buttons · 2×2 · Safari, Notes")
  • Active panel: blue left indicator bar
  • Example panels: "Quick Actions" (4 buttons, 2×2), "Voice Shortcuts" (6 buttons, 3×2), "Translation" (3 buttons, 1×3)

• Center Column (fills remaining):

  • Toolbar (44px, fill #F9F9FB): tool buttons (cursor/add/text/icon — 32×32, corner radius 6), grid toggle, panel name centered, undo/redo/more actions right
  • Canvas (fill #F2F2F4): centered panel preview (320px wide, corner radius 16, white fill, shadow) with button grid. Buttons show icon + label, colored per their color property (Rewrite=blue, Grammar=green, Summarize=orange, Translate=purple)
  • AI Progress (fill #F9F9FB): spinner + status text "Building your panel..." + gradient progress bar (blue #007AFF → purple #5856D6)
  • AI Chat Bar (fill #F9F9FB, padding 12/16): text input "Describe your panel — e.g. shortcuts for writing, translation tools..." + gradient send button (44×44). Suggestion chips row: "Writing assistant", "Code helpers", "Email tools", "Social media"

• Inspector (260px, right):

  • Header: "Inspector" (44px, bottom border)
  • Linked Apps: tag pills (e.g., "Safari", "Notes") + "+ Add" button. Subtitle: "Panel appears when app is in focus"
  • Button Properties (when a button is selected):
    • Label text field
    • Icon dropdown (SF Symbol picker, shows current icon)
    • Color swatches — 7 circles: blue, green, orange, purple, pink, red, gradient
    • Action dropdown — "AI Prompt" (default)
    • Prompt textarea — e.g., "Rewrite the selected text to be more concise and clear."
    • Size segmented control: 1×1 / 1×2 (selected) / 2×2
  • Delete Button — red outline, "Delete Button", corner radius 8

AI Panel Generation

• Natural language → panel — user describes what they want, AI generates a complete panel with buttons, icons, colors, and prompts
• Progress indicator — spinner + gradient progress bar during generation
• Suggestion chips — quick-start templates for common panel types

App Linking

• Link panels to apps — uses AppObserver from Phase 4
• Auto-display — when a linked app gains focus, the panel floats into view

Panel Runtime

• Floating panel display — shows the panel buttons in a compact floating view
• Button execution — tapping a button sends selected text + button prompt to the AI provider, inserts the result

Acceptance Criteria

• Can create a new panel with a custom name and grid size
• Can add/edit/delete buttons with label, icon, color, prompt, and size
• Canvas preview updates in real-time as button properties change
• AI generates a complete panel from "Writing assistant" description
• Linking a panel to Safari makes it appear when Safari is focused
• Tapping "Rewrite" button sends selected text + rewrite prompt to AI and inserts result
• Panel data persists via SwiftData

Dependencies

• Phase 2 (AI provider for prompt execution and panel generation)
• Phase 4 (AppObserver for app linking)