@fonlan/dsh-task-kanban 0.1.0 → 0.1.1

package/lib/types/server/prompts.d.ts

@@ -1,6 +1,13 @@
 import type { KanbanCard } from '../shared/card.js';
 /** Refinement session prompt: analyze the repo read-only and write back a plan. */
 export declare function refinementPrompt(requirement: string, workspacePath: string): string;
+/**
+ * Interactive refinement prompt for a card created with a skill (e.g.
+ * `/grill-me`). The refinement session is explicit — the user can reply —
+ * so instead of deciding autonomously, the agent follows the skill's
+ * interview and asks whatever it needs before writing the plan back.
+ */
+export declare function interactiveRefinementPrompt(requirement: string, workspacePath: string): string;
 /** Phase implementation session prompt; identical on retries (the model reads git status/diff itself). */
 export declare function phasePrompt(card: KanbanCard, phaseIndex: number, workdir: string): string;
 /** Merge-conflict resolution session prompt: resolve conflicts only, never commit. */

package/lib/types/server/runner.d.ts

@@ -36,6 +36,7 @@ export declare class KanbanRunner implements KanbanToolResolver {
         requirement: string;
         model: string;
         provider?: string;
+        skill?: string;
     }): Promise<KanbanCard>;
     moveTask(cardId: string, toLane: Lane): Promise<{
         ok: boolean;
@@ -59,6 +60,28 @@ export declare class KanbanRunner implements KanbanToolResolver {
     private requestStop;
     private fail;
     private runRefinement;
+    /**
+     * Drive the refinement session to a terminal card state. Non-interactive
+     * cards follow the original contract: the agent finishes one turn and must
+     * have written the plan. Interactive cards (created with a refinement
+     * skill) may ask the user clarifying questions — the session is explicit
+     * and visible in the workspace chat, so the runner waits for each reply
+     * instead of failing, and only settles when the plan is written or the
+     * session errors out.
+     */
+    private driveRefinement;
+    /**
+     * A promise resolving when the card stops being 'refining' (planned,
+     * failed, or gone), plus a disposer stopping the polling interval.
+     */
+    private waitForCardSettlement;
+    /**
+     * A promise resolving when a NEW human message enters the given session,
+     * plus a disposer detaching the listener. Messages injected by plugins with
+     * non-`user` sources (such as our skill-invocation instructions) never
+     * resolve it — only real human replies drive the interactive refinement.
+     */
+    private waitForUserReply;
     private createAgent;
     private keepHandle;
     /**

package/lib/types/server/skills.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Skill wiring for requirement refinement.
+ *
+ * A task card may carry a skill name (e.g. `grill-me`) chosen in the
+ * create-task requirement input via a leading `/skill-name` gesture, matching
+ * the harness's user-invocation convention (the same whitespace-bounded token
+ * shape `tool-skill` scans for). The server strips the gesture from the stored
+ * requirement, records the skill on the card, and injects the canonical
+ * `renderSkillContent` block into the refinement session as an instructions-
+ * form user message with the harness's `skill-invocation` source, so the
+ * transcript UI renders it exactly like a user-invoked skill in chat.
+ */
+import type { Context } from '@deepseek-ai/cordis';
+import { type SkillDefinition, type SkillSummary } from '@deepseek-ai/dsh-skill';
+/** A parsed leading skill gesture: the skill name plus the cleaned requirement. */
+export interface SkillGestureParse {
+    /** The skill name from the leading `/name` token, if the input led with one. */
+    skill?: string;
+    /** The requirement text with the leading gesture removed. */
+    requirement: string;
+}
+/**
+ * Extract a leading `/skill-name` gesture from raw create-task input. Only a
+ * token at the very start selects a skill; tokens later in the text are
+ * ordinary requirement prose (the user might legitimately mention paths or
+ * fractions). The name is grammar-validated but not registry-checked here —
+ * unknown names surface as a refinement error with a clear message.
+ */
+export declare function parseSkillGesture(raw: string): SkillGestureParse;
+/**
+ * The minimal view of the hosted skill registry the plugin needs: list for a
+ * summary lookup and get for a full body, both honoring the calling scope.
+ */
+export interface SkillRegistryFace {
+    list(options?: {
+        cwd?: string;
+        scope?: unknown;
+    }): Promise<SkillSummary[]>;
+    get(name: string, options?: {
+        cwd?: string;
+        scope?: unknown;
+    }): Promise<SkillDefinition | undefined>;
+}
+/** Resolve the host skill registry, or undefined when this profile lacks one. */
+export declare function skillRegistry(ctx: Context): SkillRegistryFace | undefined;
+/** Whether the provided skill name is a syntactically valid skill name. */
+export declare function validSkillName(name: string): boolean;
+/**
+ * Build the instructions-form message carrying the rendered skill body, the
+ * same shape a user `/grill-me` invocation injects through `tool-skill`. The
+ * `skill-invocation` source is what the transcript UI decorates as a skill
+ * chip; the content is the canonical `<skill_content>` block.
+ */
+export declare function skillInvocationMessage(skill: Pick<SkillDefinition, 'name' | 'provider' | 'resourceBase' | 'content'>): {
+    content: {
+        type: "text";
+        text: string;
+    }[];
+    source: {
+        kind: "skill-invocation";
+        name: string;
+        form: "instructions";
+    };
+} & Pick<import("@deepseek-ai/dsh-llm").UserMessage, "id" | "role">;
+/**
+ * Load the skill body the card names, scoped to the refinement agent so
+ * preset-layer providers (the filesystem skill roots) are visible. Returns
+ * undefined when the skill is unknown, not user-invocable, or the registry is
+ * absent — the caller decides how to surface that.
+ */
+export declare function loadCardSkill(ctx: Context, name: string | undefined, cwd: string, scope: unknown): Promise<Pick<SkillDefinition, 'name' | 'provider' | 'resourceBase' | 'content'> | undefined>;

package/lib/types/server/task-store.d.ts

@@ -18,6 +18,7 @@ export declare class TaskStore {
         requirement: string;
         model: string;
         provider?: string;
+        skill?: string;
         status?: KanbanCard['status'];
     }): Promise<KanbanCard>;
     /** Run a mutation under the card's lock; returns the updated card. */

package/lib/types/shared/card.d.ts

@@ -47,6 +47,8 @@ export interface KanbanCard {
     id: string;
     workspacePath: string;
     requirement: string;
+    /** Optional skill (e.g. `grill-me`) used to drive requirement refinement. */
+    skill?: string;
     model: string;
     /** Provider route for the model (from the modal selection). */
     provider?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fonlan/dsh-task-kanban",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "DSH web plugin: a task kanban that refines requirements into phased plans, auto-executes them in git worktrees (one session per phase), and auto-merges into the main branch on completion.",
   "license": "MIT",
   "repository": {
@@ -39,6 +39,9 @@
     "README.md",
     "LICENSE"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "build": "rm -rf lib && tsc -p tsconfig.build.json && tsdown",
     "typecheck": "tsc --noEmit -p tsconfig.json && tsc --noEmit -p tsconfig.client.json",
@@ -73,6 +76,7 @@
     "@deepseek-ai/dsh-tools": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-llm": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-skill": "^0.1.0-rc.6",
     "@deepseek-ai/schemastery": "^3.18.1",
     "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
@@ -94,6 +98,7 @@
     "@deepseek-ai/dsh-llm": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-session": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-skill": "^0.1.0-rc.6",
     "@deepseek-ai/schemastery": "^3.18.1",
     "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
     "@deepseek-ai/dsh-client-ui-sidebar": "^0.1.0-rc.6",

package/src/client/api.ts

@@ -28,10 +28,51 @@ async function call<T>(method: string, payload: Record<string, unknown> = {}): P
   return parsed.value as T
 }
 
+/** One row of the host `skill.list` catalog (same shape DSH's chat autocomplete uses). */
+export interface SkillOption {
+  name: string
+  description: string
+  whenToUse?: string
+  modelInvocable: boolean
+}
+
+/**
+ * Call the host gateway's `skill.list` unary RPC over the same-origin HTTP
+ * bridge (the exact wire shape DSH's chat input uses for its /-autocomplete).
+ * The requested `sessionId` scopes the catalog to that session's agent
+ * preset, which is where the filesystem skill roots are registered.
+ */
+export async function gatewaySkillList(sessionId: string): Promise<SkillOption[]> {
+  let response: Response
+  try {
+    response = await fetch('/api/skill.list', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        type: 'client-request',
+        rpcId: `task-kanban-${Math.random().toString(36).slice(2)}`,
+        method: 'skill.list',
+        payload: { sessionId },
+      }),
+    })
+  } catch (error) {
+    throw new KanbanApiError('network', error instanceof Error ? error.message : String(error))
+  }
+  const parsed: { type?: string; result?: { ok?: boolean; value?: { skills?: SkillOption[] }; error?: { code?: string; message?: string } } } | null
+    = await response.json().catch(() => null)
+  if (!response.ok || parsed === null || parsed.type !== 'server-response' || parsed.result?.ok !== true) {
+    throw new KanbanApiError(
+      parsed?.result?.error?.code ?? 'http',
+      parsed?.result?.error?.message ?? `HTTP ${response.status}`,
+    )
+  }
+  return parsed.result.value?.skills ?? []
+}
+
 export const api = {
   list: (workspacePath: string) => call<KanbanCard[]>('list', { workspacePath }),
-  create: (workspacePath: string, requirement: string, model: string, provider?: string) =>
-    call<KanbanCard>('create', { workspacePath, requirement, model, provider }),
+  create: (workspacePath: string, requirement: string, model: string, provider?: string, skill?: string) =>
+    call<KanbanCard>('create', { workspacePath, requirement, model, provider, ...(skill !== undefined && skill !== '' ? { skill } : {}) }),
   move: (cardId: string, toLane: Lane) => call<{ ok: boolean; message?: string }>('move', { cardId, toLane }),
   stop: (cardId: string) => call<{ ok: boolean; message?: string }>('stop', { cardId }),
   retry: (cardId: string) => call<{ ok: boolean; message?: string }>('retry', { cardId }),

package/src/client/board.css

@@ -1,4 +1,7 @@
-/* @fonlan/dsh-task-kanban board styles (kb- prefixed, plain CSS) */
+/* @fonlan/dsh-task-kanban board styles (kb- prefixed, plain CSS).
+   Surfaces use the DSH theme tokens (--dsw-alias-*) so they follow the
+   shell's selected light/dark appearance; the var() fallbacks cover shells
+   that do not define them. */
 .kb-board {
   height: 100%;
   display: flex;
@@ -6,8 +9,8 @@
   box-sizing: border-box;
   padding: 12px 16px;
   overflow: hidden;
-  color: var(--dsh-fg, #e6e6e6);
-  background: var(--dsh-bg, #141418);
+  color: var(--dsw-alias-label-primary, var(--dsh-fg, #e6e6e6));
+  background: var(--dsw-alias-bg-base, var(--dsh-bg, #141418));
   font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
 }
 .kb-empty {
@@ -81,7 +84,7 @@
   padding: 8px 10px;
   font-weight: 600;
   font-size: 13px;
-  color: var(--dsh-fg-soft, #b8b8c0);
+  color: var(--dsw-alias-label-secondary, var(--dsh-fg-soft, #b8b8c0));
   border-bottom: 1px solid rgba(128, 128, 128, 0.12);
   flex: 0 0 auto;
 }
@@ -121,6 +124,11 @@
 .kb-card-running .kb-card-badge { background: rgba(59, 130, 246, 0.3); }
 .kb-card-error .kb-card-badge { background: rgba(239, 68, 68, 0.3); }
 .kb-card-phase { opacity: 0.8; }
+.kb-card-skill {
+  background: rgba(139, 92, 246, 0.22);
+  border-radius: 4px;
+  padding: 1px 6px;
+}
 .kb-card-model { opacity: 0.55; }
 .kb-card-error-text { margin-top: 6px; font-size: 12px; color: #f87171; word-break: break-all; }
 .kb-card-worktree { margin-top: 4px; font-size: 11px; opacity: 0.5; word-break: break-all; }
@@ -129,9 +137,9 @@
   left: 50%;
   bottom: 24px;
   transform: translateX(-50%);
-  background: rgba(30, 30, 36, 0.95);
-  border: 1px solid rgba(128, 128, 128, 0.4);
-  color: #eee;
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l2);
+  color: var(--dsw-alias-label-primary);
   padding: 8px 16px;
   border-radius: 8px;
   font-size: 13px;
@@ -152,11 +160,11 @@
   max-width: 90vw;
   max-height: 85vh;
   overflow-y: auto;
-  background: #1c1c22;
-  border: 1px solid rgba(128, 128, 128, 0.35);
+  background: var(--dsw-alias-bg-layer-1);
+  border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 12px;
   padding: 18px;
-  color: #e6e6e6;
+  color: var(--dsw-alias-label-primary);
 }
 .kb-modal-wide { width: 640px; }
 /* Task-detail bottom panel: docks at the bottom of the board page, fills the
@@ -168,11 +176,11 @@
   display: flex;
   flex-direction: column;
   margin-top: 10px;
-  background: #1c1c22;
-  border: 1px solid rgba(128, 128, 128, 0.35);
+  background: var(--dsw-alias-bg-layer-2);
+  border: 1px solid var(--dsw-alias-border-l1);
   border-radius: 12px;
   overflow: hidden;
-  color: #e6e6e6;
+  color: var(--dsw-alias-label-primary);
 }
 .kb-detail-panel-head {
   display: flex;
@@ -210,6 +218,53 @@
 .kb-modal-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
 .kb-field { display: block; margin-bottom: 12px; }
 .kb-field > span { display: block; font-size: 12px; opacity: 0.75; margin-bottom: 4px; }
+.kb-field-hint {
+  display: block;
+  font-size: 11px;
+  opacity: 0.55;
+  margin-top: 4px;
+}
+.kb-field-hint-skill {
+  opacity: 0.9;
+  color: #a78bfa;
+}
+.kb-skill-menu-wrap { position: relative; }
+.kb-skill-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 20;
+  margin: 2px 0 0;
+  padding: 4px;
+  list-style: none;
+  max-height: 180px;
+  overflow-y: auto;
+  border-radius: 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-overlay);
+  color: var(--dsw-alias-label-primary);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
+}
+.kb-skill-menu-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--dsw-alias-label-primary);
+}
+.kb-skill-menu-item-active { background: var(--dsw-alias-interactive-bg-hover); }
+.kb-skill-menu-name { font-weight: 600; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
+.kb-skill-menu-desc {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .kb-field-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
 .kb-input {
   width: 100%;
@@ -226,6 +281,14 @@
 .kb-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
 .kb-detail-section { margin-bottom: 12px; }
 .kb-detail-label { font-size: 12px; opacity: 0.65; margin-bottom: 4px; }
+.kb-detail-skill {
+  display: inline-block;
+  font-size: 11px;
+  background: rgba(139, 92, 246, 0.22);
+  border-radius: 4px;
+  padding: 1px 6px;
+  margin-bottom: 4px;
+}
 .kb-detail-text { white-space: pre-wrap; word-break: break-all; font-size: 13px; }
 .kb-detail-error .kb-detail-text { color: #f87171; }
 .kb-detail-status {
@@ -280,11 +343,10 @@
   font-size: 14px;
   line-height: 22px;
 }
-@media (prefers-color-scheme: light) {
-  .kb-board { color: #1c1c22; background: #f5f5f7; }
-  .kb-modal { background: #ffffff; color: #1c1c22; }
-  .kb-detail-panel { background: #ffffff; color: #1c1c22; }
-}
+/* Theme following is handled by the --dsw-alias-* tokens above: they change
+   value with the shell's selected light/dark appearance, so no OS-level
+   prefers-color-scheme override is needed (and one would fight the app
+   theme when the two disagree). */
 /* Same-line placement WITHOUT moving any DOM: the sidebar foot area becomes
    a reversed flex row, so its LAST child (the settings area) renders on the
    LEFT and the FIRST child (footer actions = the kanban button) on the RIGHT

package/src/client/board.tsx

@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { KanbanCard, Lane } from '../shared/card'
 import { DROP_RULES, laneOf } from '../shared/lanes'
-import { api } from './api'
+import { api, gatewaySkillList, type SkillOption } from './api'
 import { exitBoard, getClient } from './kanban-state'
 import { en, zh } from './locales'
 import './board.css'
@@ -9,12 +9,28 @@ import './board.css'
 interface BoardProps {
   t?: (key: string, params?: Record<string, unknown>) => string
   useWorkspaces?: (selector: (state: unknown) => unknown) => unknown
+  useSessions?: (selector: (state: unknown) => unknown) => unknown
+}
+
+/** Session-list snapshot shape the standard `useSessions` feed carries. */
+interface SessionListStateLike {
+  current?: string
 }
 
 function firstLine(text: string): string {
   return text.split('\n').find((l) => l.trim() !== '')?.trim() ?? ''
 }
 
+/** The leading `/skill-name` gesture at the start of the requirement input. */
+const SKILL_GESTURE = /^\s*\/([a-z0-9]+(?:-[a-z0-9]+)*)(?=\s|$)/
+
+/** Extract a leading `/skill-name` token plus the cleaned remainder. */
+function parseSkillGesture(raw: string): { skill?: string; requirement: string } {
+  const m = SKILL_GESTURE.exec(raw)
+  if (m === null) return { requirement: raw.trim() }
+  return { skill: m[1], requirement: raw.slice(m[0].length).trim() }
+}
+
 function statusLabel(card: KanbanCard, t: (key: string) => string): string {
   if (card.status === 'error') {
     switch (card.error?.kind) {
@@ -64,6 +80,9 @@ export function BoardRoot(props: BoardProps): JSX.Element {
   const useWorkspaces = props.useWorkspaces
   const wsState = useWorkspaces !== undefined ? (useWorkspaces((s: unknown) => s) as { items?: WorkspaceRow[] } | undefined) : undefined
   const items: WorkspaceRow[] = wsState?.items ?? []
+  const useSessions = props.useSessions
+  const sessionState = useSessions !== undefined ? (useSessions((s: unknown) => s) as SessionListStateLike | undefined) : undefined
+  const currentSessionId = sessionState?.current
 
   const [selectedPath, setSelectedPath] = useState<string>(() => {
     try {
@@ -211,6 +230,7 @@ export function BoardRoot(props: BoardProps): JSX.Element {
           t={t}
           workspaces={items}
           selectedPath={selectedPath}
+          sessionId={currentSessionId}
           onClose={() => setNewTaskOpen(false)}
           onCreated={() => {
             setNewTaskOpen(false)
@@ -264,6 +284,7 @@ function CardView({ card, t, onToggle }: CardViewProps): JSX.Element {
       <div className="kb-card-meta">
         <span className="kb-card-badge">{badge}</span>
         {phaseInfo !== '' && <span className="kb-card-phase">{phaseInfo}</span>}
+        {card.skill !== undefined && card.skill !== '' && <span className="kb-card-skill">/ {card.skill}</span>}
         {card.model !== '' && <span className="kb-card-model">{card.model}</span>}
       </div>
       {card.status === 'error' && card.error !== undefined && (
@@ -280,18 +301,27 @@ interface NewTaskModalProps {
   t: (key: string, params?: Record<string, unknown>) => string
   workspaces: WorkspaceRow[]
   selectedPath: string
+  /** Current session id, scoping the host skill.list catalog lookup. */
+  sessionId?: string
   onClose: () => void
   onCreated: () => void
   onError: (message: string) => void
 }
 
-function NewTaskModal({ t, workspaces, selectedPath, onClose, onCreated, onError }: NewTaskModalProps): JSX.Element {
+/** An in-progress leading `/query` token (menu-open state). */
+const SKILL_MENU_RE = /^\s*\/([a-z0-9-]*)$/
+
+function NewTaskModal({ t, workspaces, selectedPath, sessionId, onClose, onCreated, onError }: NewTaskModalProps): JSX.Element {
   const [requirement, setRequirement] = useState('')
   const [project, setProject] = useState(selectedPath)
   const [model, setModel] = useState('')
   const [modelProvider, setModelProvider] = useState('')
   const [models, setModels] = useState<Array<{ provider: string; id: string; name?: string }>>([])
+  const [skills, setSkills] = useState<SkillOption[]>([])
+  const [menuQuery, setMenuQuery] = useState<string | null>(null)
+  const [menuIndex, setMenuIndex] = useState(0)
   const [busy, setBusy] = useState(false)
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null)
 
   useEffect(() => {
     let alive = true
@@ -308,6 +338,73 @@ function NewTaskModal({ t, workspaces, selectedPath, onClose, onCreated, onError
     return () => { alive = false }
   }, [])
 
+  // Load the host skill catalog once (scoped to the current session), the
+  // same feed DSH's chat input uses for its /-autocomplete.
+  useEffect(() => {
+    if (sessionId === undefined) return
+    let alive = true
+    gatewaySkillList(sessionId)
+      .then((list) => { if (alive) setSkills(list) })
+      .catch(() => { if (alive) setSkills([]) })
+    return () => { alive = false }
+  }, [sessionId])
+
+  const matches = skills.filter((s) => s.name.startsWith(menuQuery ?? ''))
+  const menuVisible = menuQuery !== null && matches.length > 0
+  const selected = menuVisible ? matches[Math.min(menuIndex, matches.length - 1)] : undefined
+
+  /** Re-evaluate the leading-token menu state from the current value + caret. */
+  const syncMenu = (value: string, caret: number): void => {
+    const head = value.slice(0, caret)
+    const m = SKILL_MENU_RE.exec(head)
+    if (m !== null) {
+      setMenuQuery(m[1])
+      setMenuIndex(0)
+      return
+    }
+    setMenuQuery(null)
+  }
+
+  const selectSkill = (name: string): void => {
+    const el = textareaRef.current
+    const caret = el?.selectionStart ?? requirement.length
+    const head = requirement.slice(0, caret)
+    const m = SKILL_MENU_RE.exec(head)
+    // Replace the leading `/query` token with `/name `.
+    const inserted = `/${name} `
+    const newValue = m !== null ? inserted + requirement.slice(caret) : inserted + requirement
+    setRequirement(newValue)
+    setMenuQuery(null)
+    requestAnimationFrame(() => {
+      const next = textareaRef.current
+      if (next !== null) {
+        next.focus()
+        const pos = inserted.length
+        next.setSelectionRange(pos, pos)
+      }
+    })
+  }
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>): void => {
+    if (!menuVisible) return
+    if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      setMenuIndex((i) => (i + 1) % matches.length)
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      setMenuIndex((i) => (i - 1 + matches.length) % matches.length)
+    } else if (e.key === 'Enter') {
+      e.preventDefault()
+      if (selected !== undefined) selectSkill(selected.name)
+    } else if (e.key === 'Escape') {
+      e.preventDefault()
+      setMenuQuery(null)
+    } else if (e.key === 'Tab') {
+      e.preventDefault()
+      if (selected !== undefined) selectSkill(selected.name)
+    }
+  }
+
   const submit = async (): Promise<void> => {
     if (requirement.trim() === '') {
       onError(t('requirementLabel') + ' ' + t('error'))
@@ -317,9 +414,10 @@ function NewTaskModal({ t, workspaces, selectedPath, onClose, onCreated, onError
       onError(t('noWorkspace'))
       return
     }
+    const parsed = parseSkillGesture(requirement)
     setBusy(true)
     try {
-      await api.create(project, requirement.trim(), model, modelProvider)
+      await api.create(project, parsed.requirement, model, modelProvider, parsed.skill)
       onCreated()
     } catch (error) {
       onError(error instanceof Error ? error.message : String(error))
@@ -327,18 +425,52 @@ function NewTaskModal({ t, workspaces, selectedPath, onClose, onCreated, onError
     }
   }
 
+  const activeSkill = parseSkillGesture(requirement).skill
+
   return (
     <div className="kb-modal-backdrop" onClick={busy ? undefined : onClose}>
       <div className="kb-modal" onClick={(e) => e.stopPropagation()}>
         <div className="kb-modal-title">{t('newTask')}</div>
         <label className="kb-field">
           <span>{t('requirementLabel')}</span>
-          <textarea
-            className="kb-input kb-textarea"
-            value={requirement}
-            placeholder={t('requirementPlaceholder')}
-            onChange={(e) => setRequirement(e.target.value)}
-          />
+          <div className="kb-skill-menu-wrap">
+            <textarea
+              ref={textareaRef}
+              className="kb-input kb-textarea"
+              value={requirement}
+              placeholder={t('requirementPlaceholder')}
+              onChange={(e) => {
+                const value = e.target.value
+                setRequirement(value)
+                syncMenu(value, e.target.selectionStart ?? value.length)
+              }}
+              onKeyDown={onKeyDown}
+            />
+            {menuVisible && (
+              <ul className="kb-skill-menu" role="listbox">
+                {matches.map((s, i) => (
+                  <li
+                    key={s.name}
+                    role="option"
+                    aria-selected={i === menuIndex}
+                    className={'kb-skill-menu-item' + (i === menuIndex ? ' kb-skill-menu-item-active' : '')}
+                    onMouseDown={(e) => { e.preventDefault(); selectSkill(s.name) }}
+                    onMouseEnter={() => setMenuIndex(i)}
+                  >
+                    <span className="kb-skill-menu-name">/{s.name}</span>
+                    <span className="kb-skill-menu-desc">
+                      {s.modelInvocable ? s.description : `${t('skillMenuUserOnly')} · ${s.description}`}
+                    </span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+          {activeSkill !== undefined ? (
+            <span className="kb-field-hint kb-field-hint-skill">{t('skillHint', { skill: activeSkill })}</span>
+          ) : (
+            <span className="kb-field-hint">{t('skillGestureHint')}</span>
+          )}
         </label>
         <label className="kb-field">
           <span>{t('project')}</span>
@@ -419,6 +551,9 @@ function DetailPanel({ card, t, onClose, onChanged, onToast, onOpenSession }: De
       <div className="kb-detail-panel-body">
         <div className="kb-detail-section">
           <div className="kb-detail-label">{t('requirement')}</div>
+          {card.skill !== undefined && card.skill !== '' && (
+            <div className="kb-detail-skill">{t('skillBadge', { skill: card.skill })}</div>
+          )}
           <div className="kb-detail-text">{card.requirement}</div>
         </div>