Skip to content

Genie Picker: merge search and freeform into a unified input #316

@pierrelzw

Description

@pierrelzw

Current Behavior

Genie Picker 目前有两个独立的输入区域:

  1. Search genies (顶部) — 过滤 genie 列表
  2. Describe what you want (底部) — 自由输入 prompt

用户在默认的顶部搜索框,搜不到结果,需要使用鼠标点击才能切换到底部的输入框区域

Proposed Behavior

合并为一个统一的输入框(类似 Spotlight / Raycast 的体验):

  1. 用户在输入框输入文字
  2. 如果匹配到 genie → 显示匹配列表,选中即可执行
  3. 如果搜索不到想要的 genie → 按 Enter 直接将输入文字作为 freeform prompt 执行(即当前 "Describe what you want" 的功能)

这样用户的操作流就变成:输入 → 有匹配就选 genie,没匹配就直接执行自定义 prompt。一个输入框完成两种操作。

Key Files

  • src/components/GeniePicker/GeniePicker.tsx — 主组件(search input + freeform textarea)
  • src/components/GeniePicker/genie-picker.css — 样式
  • src/hooks/usePromptHistory.ts — freeform 输入的历史记录 / ghost text
  • src/stores/geniePickerStore.ts — picker 状态

Design Considerations

  • 保留 prompt history 功能(Up/Down 翻历史、ghost text、Ctrl+R 历史搜索)
  • 当列表为空时,显示提示如 "No matching genies — press Enter to run as prompt"
  • 输入框需要支持多行(Shift+Enter 换行,Enter 提交)
  • Quick chips(Polish / Condense / Grammar / Rephrase)可以保留在列表区域
  • Scope cycling(Tab 切换 scope)保持不变

Mockup

┌──────────────────────────────────────┐
│ 🔍 Type to search or describe...     │  ← 统一输入框
├──────────────────────────────────────┤
│ ★ Recently Used                      │
│   ▸ Polish Writing                   │
│   ▸ Fix Grammar                      │
│                                      │
│ 📝 Writing                           │
│   ▸ Condense                         │
│   ▸ Rephrase                         │
│                                      │
│ (when no match)                      │
│   Press Enter to run as prompt       │
├──────────────────────────────────────┤
│ scope: selection · via Claude    Tab │
└──────────────────────────────────────┘

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions