feat: introduce prompt library and navigation enhancements

- Added a new 'Prompts' view with a dedicated prompt library component.
- Integrated prompt usage events in the agent panel for seamless interaction.
- Updated sidebar and command palette to include navigation to the prompt library.
- Enhanced view context to support 'prompts' as a navigable option.
- Refactored settings panel to streamline its functionality and removed unused state.
- Introduced new prompt templates and categories for better organization and accessibility.

Author: BunsDev

app/page.tsx

@@ -70,10 +70,6 @@ const WidgetPipWindow = dynamic(
   () => import('@/components/plugins/widget-pip-window').then((m) => m.WidgetPipWindow),
   { ssr: false },
 )
-const SettingsPanel = dynamic(
-  () => import('@/components/settings-panel').then((m) => m.SettingsPanel),
-  { ssr: false },
-)
 const OnboardingTour = dynamic(
   () => import('@/components/onboarding-tour').then((m) => m.OnboardingTour),
   { ssr: false },
@@ -90,6 +86,7 @@ const VIEW_ICONS: Record<string, { icon: string; label: string }> = {
   diff: { icon: 'lucide:git-compare', label: 'Diff' },
   git: { icon: 'lucide:git-branch', label: 'Git' },
   skills: { icon: 'lucide:sparkles', label: 'Skills' },
+  prompts: { icon: 'lucide:book-open', label: 'Prompts' },
   mcp: { icon: 'lucide:plug', label: 'MCP' },
   settings: { icon: 'lucide:settings', label: 'Settings' },
   terminal: { icon: 'lucide:terminal', label: 'Terminal' },
@@ -135,7 +132,9 @@ export default function EditorLayout() {
   const terminalStartupCommand = useCenteredTerminal ? 'openclaw tui' : undefined
   const mobileViewTabs = useMemo(() => {
     // On mobile, curate tabs to useful views + always include settings
-    const mobile = visibleViews.filter((v) => !['preview', 'diff', 'skills', 'mcp'].includes(v))
+    const mobile = visibleViews.filter(
+      (v) => !['preview', 'diff', 'skills', 'prompts', 'mcp'].includes(v),
+    )
     if (!mobile.includes('terminal')) mobile.push('terminal')
     return mobile.slice(0, 5)
   }, [visibleViews])
@@ -167,10 +166,6 @@ export default function EditorLayout() {
   const [globalSearchVisible, setGlobalSearchVisible] = useState(false)
   const [commandPaletteVisible, setCommandPaletteVisible] = useState(false)
   const [shortcutsVisible, setShortcutsVisible] = useState(false)
-  const [settingsVisible, setSettingsVisible] = useState(false)
-  const [settingsTab, setSettingsTab] = useState<
-    'general' | 'editor' | 'agent' | 'keybindings' | 'plugins' | undefined
-  >(undefined)
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
   const [onboardingOpen, setOnboardingOpen] = useState(false)
 
@@ -307,12 +302,10 @@ export default function EditorLayout() {
   useEffect(() => {
     const unsubs = [
       on('open-settings', () => {
-        setSettingsTab(undefined)
-        setSettingsVisible(true)
+        setView('settings')
       }),
       on('open-agent-settings', () => {
-        setSettingsTab('agent')
-        setSettingsVisible(true)
+        setView('settings')
       }),
       on('open-folder', () => localOpenFolder()),
       on('open-recent', (detail) => {
@@ -547,10 +540,7 @@ export default function EditorLayout() {
 
               <button
                 type="button"
-                onClick={() => {
-                  setSettingsTab(undefined)
-                  setSettingsVisible(true)
-                }}
+                onClick={() => setView('settings')}
                 className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl border border-[var(--border)] bg-[color-mix(in_srgb,var(--bg)_92%,transparent)] text-[var(--text-secondary)] transition hover:bg-[color-mix(in_srgb,var(--text-primary)_5%,transparent)] hover:text-[var(--text-primary)]"
                 title="Settings"
               >
@@ -905,6 +895,9 @@ export default function EditorLayout() {
             case 'view-skills':
               setView('skills')
               break
+            case 'view-prompts':
+              setView('prompts')
+              break
             case 'find-files':
               setQuickOpenVisible(true)
               break
@@ -939,16 +932,7 @@ export default function EditorLayout() {
         }}
       />
       <ShortcutsOverlay open={shortcutsVisible} onClose={() => setShortcutsVisible(false)} />
-      {settingsVisible && activeView !== 'settings' && (
-        <SettingsPanel
-          open={settingsVisible}
-          onClose={() => {
-            setSettingsVisible(false)
-            setSettingsTab(undefined)
-          }}
-          initialTab={settingsTab}
-        />
-      )}
+
       <OnboardingTour open={onboardingOpen} onClose={() => setOnboardingOpen(false)} />
     </div>
   )

components/agent-panel.tsx

@@ -830,6 +830,14 @@ export function AgentPanel() {
     })
   }, [])
 
+  // ─── Listen for prompt-use events (from prompt library) ────
+  useEffect(() => {
+    return on('prompt-use', (detail) => {
+      if (detail.text) setInput(detail.text)
+      inputRef.current?.focus()
+    })
+  }, [])
+
   // ─── Listen for focus-agent-input (⌘L from anywhere) ──────
   useEffect(() => {
     return on('focus-agent-input', () => inputRef.current?.focus())

components/chat-home.tsx

@@ -13,6 +13,7 @@ import { useLocal } from '@/context/local-context'
 import { useGateway } from '@/context/gateway-context'
 import { useGitHubAuth } from '@/context/github-auth-context'
 import { useEditor } from '@/context/editor-context'
+import { useView } from '@/context/view-context'
 import { emit } from '@/lib/events'
 import { getRecentFolders } from '@/context/local-context'
 import { getAgentConfig } from '@/lib/agent-session'
@@ -118,6 +119,7 @@ export const ChatHome = memo(function ChatHome({
   const { repo, setRepo } = useRepo()
   const local = useLocal()
   const { status } = useGateway()
+  const { setView } = useView()
   const { files: openFiles } = useEditor()
   const { token: ghToken, authenticated: ghAuthenticated } = useGitHubAuth()
 
@@ -533,8 +535,15 @@ export const ChatHome = memo(function ChatHome({
           )}
         </div>
 
-        {/* "Explore more" link — desktop only */}
-        <div className="hidden sm:flex justify-end mb-2">
+        {/* Quick links — desktop only */}
+        <div className="hidden sm:flex justify-end gap-4 mb-2">
+          <button
+            onClick={() => setView('prompts')}
+            className="inline-flex items-center gap-1 text-[12px] text-[var(--text-disabled)] hover:text-[var(--text-secondary)] transition-colors cursor-pointer"
+          >
+            <Icon icon="lucide:book-open" width={11} height={11} />
+            Browse prompt library
+          </button>
           <button
             onClick={() => emit('open-folder')}
             className="text-[12px] text-[var(--text-disabled)] hover:text-[var(--text-secondary)] transition-colors cursor-pointer"

components/command-palette.tsx

@@ -30,6 +30,7 @@ type CommandId =
   | 'view-preview'
   | 'view-git'
   | 'view-skills'
+  | 'view-prompts'
   | 'view-settings'
   | 'open-onboarding'
   | 'open-new-window'
@@ -229,6 +230,14 @@ const COMMANDS: CommandItem[] = [
     icon: 'lucide:sparkles',
     group: 'navigate',
   },
+  {
+    id: 'view-prompts',
+    label: 'Go to Prompt Library',
+    hint: 'Browse curated prompt templates',
+    keywords: ['prompts', 'templates', 'library', 'recipes'],
+    icon: 'lucide:book-open',
+    group: 'navigate',
+  },
 
   {
     id: 'open-new-window',
@@ -349,6 +358,7 @@ const VIEW_CONTEXT_COMMANDS: Partial<Record<ViewId, CommandId[]>> = {
   ],
   git: ['git-commit', 'toggle-git-panel', 'git-push', 'git-pull', 'git-stash', 'toggle-terminal'],
   skills: ['view-skills', 'open-new-window', 'view-editor'],
+  prompts: ['view-prompts', 'view-editor', 'open-new-window'],
 
   preview: ['preview-refresh', 'view-editor'],
 }