feat: add prompt and side panel support to page actions

[CoffeePatch]

Summary

• Added an optional Prompt field to Page Actions.
• Added {{Prompt}} variable support.
• Added Side Panel as a Page Action Window Display Method.
• Reused the existing Side Panel infrastructure.
• Preserved existing display methods and backward compatibility.
• Kept the Global Icon Color Override changes separate.

Validation

• Automated tests passed.

• Lint passed.

• TypeScript type checking passed.

• Build passed.

• Manual browser testing passed, including:

  • Side Panel selection and persistence.
  • Page Action execution in Side Panel mode.
  • Prompt and {{Prompt}} behavior.
  • Re-execution while the Side Panel is already open.
  • Existing display methods.

Notes

The Global Icon Color Override work is handled separately in PR #457.

[Copilot]

🟡 Changes recommended

Moderate Side Panel, placeholder-detection, and Hub import issues remain unresolved.

Get a fresh assessment by requesting another Copilot review.

Pull request overview

This PR adds Prompt support, {{Prompt}} expansion, and Side Panel execution for Page Actions, with related UI, storage, tests, and localization updates.

Changes:

• Added Prompt fields and variable expansion.
• Added Side Panel display and execution support.
• Included Global Icon Color Override changes, overlapping PR #457.

File summaries

File	Summary
packages/shared/src/types/command.ts	Adds shared icon override types. Nit (3 votes): Icon-color changes overlap PR #457 and should be separated or documented.
packages/shared/src/constants/open-mode.ts	Adds the Side Panel open mode.
packages/hub/src/types/pageAction.ts	Adds Prompt to the Hub Page Action type.
packages/extension/src/types/schema.ts	Adds Prompt and icon override schema fields. Moderate (1 vote): Hub imports can lose overrideGlobalIconColor.
packages/extension/src/types/schema.test.ts	Tests the updated schema.
packages/extension/src/types/index.ts	Updates extension type exports.
packages/extension/src/services/storage/commandStorage.test.ts	Tests Side Panel setting persistence.
packages/extension/src/services/pageAction/pageActionTypes.ts	Adds runtime Prompt types.
packages/extension/src/services/pageAction/insertSymbols.ts	Adds Prompt symbols.
packages/extension/src/services/pageAction/helper.ts	Adds multi-stage variable expansion.
packages/extension/src/services/pageAction/helper.test.ts	Tests variable expansion.
packages/extension/src/services/pageAction/dispatcher.ts	Applies Prompt expansion during dispatch.
packages/extension/src/services/pageAction/dispatcher.test.ts	Tests dispatcher Prompt handling.
packages/extension/src/services/pageAction/backgroundDispatcher.ts	Applies Prompt expansion to background execution.
packages/extension/src/services/pageAction/backgroundDispatcher.test.ts	Updates background dispatcher tests.
packages/extension/src/services/pageAction/background.ts	Propagates Prompt through execution.
packages/extension/src/services/pageAction/background-sidePanel.ts	Adds Side Panel Prompt and reconnection handling.
packages/extension/src/services/pageAction/background-sidePanel.test.ts	Tests Side Panel execution.
packages/extension/src/services/option/userStyles.ts	Adds icon color settings.
packages/extension/src/services/ipc.ts	Updates IPC payload types.
packages/extension/src/lib/favicon.ts	Adds favicon detection.
packages/extension/src/lib/favicon.test.ts	Tests favicon detection.
packages/extension/src/hooks/usePopupContext.tsx	Provides icon color state.
packages/extension/src/hooks/pageAction/usePageActionRunner.ts	Propagates Prompt through the runner.
packages/extension/src/const.ts	Adds icon color constants.
packages/extension/src/components/Popup.tsx	Provides icon color state to the popup.
packages/extension/src/components/pageAction/InputPopup.tsx	Adds Prompt insertion UI.
packages/extension/src/components/pageAction/InputEditor.tsx	Enables Prompt insertion.
packages/extension/src/components/option/field/OpenModeToggleField.tsx	Adds the Side Panel option.
packages/extension/src/components/option/field/OpenModeToggleField.test.tsx	Tests open mode selection.
packages/extension/src/components/option/field/IconField.tsx	Adds icon color override UI.
packages/extension/src/components/option/field/IconField.test.tsx	Tests icon field behavior.
packages/extension/src/components/option/editor/UserStyleList.tsx	Adds icon color settings to the list.
packages/extension/src/components/option/editor/PageActionSection.tsx	Adds the Prompt editor.
packages/extension/src/components/option/editor/FolderEditDialog.tsx	Updates folder icon settings.
packages/extension/src/components/option/editor/CommandEditDialog.tsx	Saves Prompt and icon settings.
packages/extension/src/components/option/editor/commandChangedDetector.ts	Tracks Prompt changes.
packages/extension/src/components/option/editor/commandChangedDetector.test.ts	Tests change detection.
packages/extension/src/components/menu/MenuItem.tsx	Applies icon colors and favicon detection.
packages/extension/src/components/menu/MenuImage.tsx	Adds icon recoloring and accessibility handling.
packages/extension/src/components/menu/MenuImage.test.tsx	Tests icon rendering.
packages/extension/src/components/menu/MenuFolder.tsx	Applies folder icon settings.
packages/extension/src/components/menu/Menu.tsx	Adds icon URL context.
packages/extension/src/components/menu/Menu.module.css	Adds icon and text styles.
packages/extension/src/action/pageAction.ts	Adds Side Panel execution and Prompt propagation. Moderate (3 votes): Side Panel execution lacks clipboard fallback to selectedText, leaving {{SelectedText}} empty for no-selection shortcuts. Moderate (1 vote): Placeholder detection does not inspect Prompt content, hiding No-selection behavior for indirect references.
packages/extension/src/action/pageAction.test.ts	Tests Page Action execution.
packages/extension/public/_locales/zh_CN/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/ru/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/pt_PT/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/pt_BR/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/ms/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/ko/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/ja/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/it/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/id/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/hi/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/fr/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/es/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/en/messages.json	Updates Prompt and icon-color localization.
packages/extension/public/_locales/de/messages.json	Updates Prompt and icon-color localization.

Review details

Suppressed comments (2)

packages/extension/src/action/pageAction.ts:45

• このプロンプトを追加すると、prompt: "{{SelectedText}}" かつステップが {{Prompt}} の Page Action が作れますが、ショートカット設定の referencesPlaceholder はステップ値だけを走査するため、この間接的な選択テキスト参照を認識できません。その結果、No-selection behavior の選択欄が表示されず、ユーザーは「何もしない」を設定できません。プロンプトも選択テキスト／クリップボード参照の判定対象に含めてください。

    const hasPromptStep = command.pageActionOption.steps.some(
      (step) =>
        step.param.type === PAGE_ACTION_EVENT.input &&
        step.param.value.includes(toInsertTemplate(INSERT.PROMPT)),
    )

packages/extension/src/types/schema.ts:31

• このフィールドをスキーマで受理しても、Hub 経由の import では設定が保持されません。packages/extension/src/services/hub/background.ts の handleAddCommand は parsed コマンドを再構築する際に overrideGlobalIconColor を各分岐へコピーしていないため、Hub から追加したコマンドでは値が失われ、グローバル色で再描画されます。import 経路にもこの値を引き継いでください。

• Files reviewed: 60/60 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.