Skip to content

feat(vscode): implement Workflows sub-tab in Agent Behaviour settings#7648

Merged
markijbema merged 9 commits into
mainfrom
mark/7601-workflows-subtab
Mar 26, 2026
Merged

feat(vscode): implement Workflows sub-tab in Agent Behaviour settings#7648
markijbema merged 9 commits into
mainfrom
mark/7601-workflows-subtab

Conversation

@markijbema
Copy link
Copy Markdown
Contributor

@markijbema markijbema commented Mar 25, 2026

Summary

  • Replaces the "Not yet implemented" placeholder in the Workflows sub-tab with a functional view
  • Lists custom commands from config.command, showing:
    • Command name with / prefix (monospace)
    • Description text (if present)
    • Command template (monospace, truncated)
  • Includes a description paragraph explaining what workflows are and how to invoke them via /command-name in chat
  • Shows an empty state when no custom commands are configured
  • i18n strings with proper translations across all 18 locale files

Closes #7601

CleanShot 2026-03-26 at 11 59 58

Comment thread packages/kilo-vscode/webview-ui/src/components/settings/AgentBehaviourTab.tsx Outdated
@kilo-code-bot
Copy link
Copy Markdown
Contributor

kilo-code-bot Bot commented Mar 25, 2026

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (27 files)
  • packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/settings/agent-behaviour-agents-chromium-linux.png
  • packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/settings/agent-behaviour-edit-custom-mode-chromium-linux.png
  • packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/settings/agent-behaviour-workflows-chromium-linux.png
  • packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/settings/agent-behaviour-workflows-empty-chromium-linux.png
  • packages/kilo-vscode/tests/visual-regression.spec.ts-snapshots/settings/settings-panel-chromium-linux.png
  • packages/kilo-vscode/webview-ui/src/components/settings/AgentBehaviourTab.tsx
  • packages/kilo-vscode/webview-ui/src/components/settings/agent-behaviour/WorkflowsTab.tsx
  • packages/kilo-vscode/webview-ui/src/i18n/ar.ts
  • packages/kilo-vscode/webview-ui/src/i18n/br.ts
  • packages/kilo-vscode/webview-ui/src/i18n/bs.ts
  • packages/kilo-vscode/webview-ui/src/i18n/da.ts
  • packages/kilo-vscode/webview-ui/src/i18n/de.ts
  • packages/kilo-vscode/webview-ui/src/i18n/en.ts
  • packages/kilo-vscode/webview-ui/src/i18n/es.ts
  • packages/kilo-vscode/webview-ui/src/i18n/fr.ts
  • packages/kilo-vscode/webview-ui/src/i18n/ja.ts
  • packages/kilo-vscode/webview-ui/src/i18n/ko.ts
  • packages/kilo-vscode/webview-ui/src/i18n/nl.ts
  • packages/kilo-vscode/webview-ui/src/i18n/no.ts
  • packages/kilo-vscode/webview-ui/src/i18n/pl.ts
  • packages/kilo-vscode/webview-ui/src/i18n/ru.ts
  • packages/kilo-vscode/webview-ui/src/i18n/th.ts
  • packages/kilo-vscode/webview-ui/src/i18n/tr.ts
  • packages/kilo-vscode/webview-ui/src/i18n/zh.ts
  • packages/kilo-vscode/webview-ui/src/i18n/zht.ts
  • packages/kilo-vscode/webview-ui/src/stories/settings.stories.tsx
  • packages/kilo-vscode/webview-ui/src/types/messages.ts

Reviewed by gpt-5.4-20260305 · 1,237,540 tokens

markijbema and others added 8 commits March 26, 2026 11:45
Replace the placeholder Workflows sub-tab with a functional view that
lists custom commands from config.command. Each entry shows the
command name (with / prefix), description, and the command template.
Includes a description paragraph explaining how workflows work and
how to invoke them via /command-name in chat.

Shows an empty state when no custom commands are configured.

Closes #7601
…mmand

The CLI's Config.Command uses 'template' not 'command' for the
command body. Update CommandConfig type to match and use cmd.template
in the workflows subtab display.
Add two stories for the Workflows subtab in AgentBehaviourTab:
- AgentBehaviourWorkflows: shows commands list with descriptions
- AgentBehaviourWorkflowsEmpty: shows empty state

Also adds a reusable SubtabWrapper helper that clicks into a
specific subtab on mount, similar to EditModeWrapper.
Create a dedicated agent-behaviour directory within settings components
and add a standalone WorkflowsTab component, preparing for further
extraction of subtab content from the monolithic AgentBehaviourTab.
…Subtab

Replace the inline renderWorkflowsSubtab function in AgentBehaviourTab
with the extracted WorkflowsTab component from agent-behaviour/.
…x clipping

The StoryProviders wrapper adds 12px padding on each side, so a 420px
inner div inside a 420px viewport overflows by 24px, clipping content
on the right edge. Remove the width constraint and let the content
fill the padded container naturally.
Workflow commands are now collapsed by default, showing only the name
and description. Clicking the chevron or row expands the full detail
view with description and template (using pre-wrap, not truncated).
Matches the existing MCP server expand/collapse pattern.

Adds i18n keys for workflow detail labels across all 18 locales.
@markijbema markijbema force-pushed the mark/7601-workflows-subtab branch from 599920a to 8beb615 Compare March 26, 2026 10:49
@markijbema markijbema merged commit 9c4c441 into main Mar 26, 2026
17 checks passed
@markijbema markijbema deleted the mark/7601-workflows-subtab branch March 26, 2026 11:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

feat(vscode): implement Workflows sub-tab in Agent Behaviour settings

2 participants