diff --git a/main/src/app-events/__tests__/when-ready.test.ts b/main/src/app-events/__tests__/when-ready.test.ts
index a639ebdf3..70bb2e17d 100644
--- a/main/src/app-events/__tests__/when-ready.test.ts
+++ b/main/src/app-events/__tests__/when-ready.test.ts
@@ -21,6 +21,9 @@ vi.mock('electron-store', () => ({
 vi.mock('../../db/database')
 vi.mock('../../db/migrator')
 vi.mock('../../db/reconcile-from-store')
+vi.mock('../../chat/agents/registry', () => ({
+  seedBuiltinAgents: vi.fn(),
+}))
 vi.mock('../../auto-update')
 vi.mock('../../cli')
 vi.mock('../../app-state')
diff --git a/main/src/app-events/when-ready.ts b/main/src/app-events/when-ready.ts
index 40090fbcd..cf1220462 100644
--- a/main/src/app-events/when-ready.ts
+++ b/main/src/app-events/when-ready.ts
@@ -2,6 +2,7 @@ import { app, nativeTheme, session } from 'electron'
 import { getDb } from '../db/database'
 import { runMigrations } from '../db/migrator'
 import { reconcileFromStore } from '../db/reconcile-from-store'
+import { seedBuiltinAgents } from '../chat/agents/registry'
 import { resetUpdateState, initAutoUpdate } from '../auto-update'
 import { validateCliAlignment, handleValidationResult } from '../cli'
 import { setCliValidationResult, getTray } from '../app-state'
@@ -25,6 +26,7 @@ export function register() {
       getDb()
       runMigrations()
       reconcileFromStore()
+      seedBuiltinAgents()
     } catch (err) {
       log.error('[DB] Database initialization failed:', err)
     }
diff --git a/main/src/chat/__tests__/streaming.test.ts b/main/src/chat/__tests__/streaming.test.ts
new file mode 100644
index 000000000..e6814f375
--- /dev/null
+++ b/main/src/chat/__tests__/streaming.test.ts
@@ -0,0 +1,251 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+const mockAgentStream = vi.hoisted(() => vi.fn())
+const mockToolLoopAgentCtor = vi.hoisted(() => vi.fn())
+const mockConvertToModelMessages = vi.hoisted(() =>
+  vi.fn().mockResolvedValue([])
+)
+const mockStepCountIs = vi.hoisted(() => vi.fn(() => 'step-count-marker'))
+const mockCreateIdGenerator = vi.hoisted(() => vi.fn(() => () => 'msg_1'))
+
+const mockCreateModelFromRequest = vi.hoisted(() =>
+  vi.fn(() => ({ id: 'model' }))
+)
+const mockCreateMcpTools = vi.hoisted(() =>
+  vi.fn().mockResolvedValue({ tools: {}, clients: [], enabledTools: {} })
+)
+const mockGetCachedUiMetadata = vi.hoisted(() => vi.fn(() => ({})))
+const mockCreateBuiltinAgentTools = vi.hoisted(() =>
+  vi.fn(() => ({ tools: {}, cleanup: vi.fn() }))
+)
+const mockStreamUIMessagesOverIPC = vi.hoisted(() => vi.fn())
+const mockUpdateThreadMessages = vi.hoisted(() =>
+  vi.fn(() => ({ success: true }))
+)
+const mockGetAgent = vi.hoisted(() => vi.fn())
+const mockResolveAgentForThread = vi.hoisted(() => vi.fn())
+
+vi.mock('ai', () => ({
+  ToolLoopAgent: class {
+    constructor(...args: unknown[]) {
+      mockToolLoopAgentCtor(...args)
+    }
+    stream = (...args: unknown[]) => mockAgentStream(...args)
+  },
+  stepCountIs: mockStepCountIs,
+  convertToModelMessages: mockConvertToModelMessages,
+  createIdGenerator: mockCreateIdGenerator,
+}))
+
+vi.mock('@sentry/electron/main', () => ({
+  startSpanManual: vi.fn(
+    async (
+      _opts: unknown,
+      fn: (span: unknown, finish: () => void) => unknown
+    ) =>
+      fn(
+        {
+          spanContext: () => ({}),
+          setStatus: vi.fn(),
+          setAttribute: vi.fn(),
+          setAttributes: vi.fn(),
+        },
+        vi.fn()
+      )
+  ),
+  startSpan: vi.fn(
+    (_opts: unknown, fn: (span: { addLink: () => void }) => unknown) =>
+      fn({ addLink: vi.fn() })
+  ),
+}))
+
+vi.mock('../../logger', () => ({
+  default: { debug: vi.fn(), info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+}))
+
+vi.mock('../providers', () => ({
+  CHAT_PROVIDERS: [{ id: 'openai', name: 'OpenAI' }],
+}))
+
+vi.mock('../mcp-tools', () => ({
+  createMcpTools: mockCreateMcpTools,
+  getCachedUiMetadata: mockGetCachedUiMetadata,
+}))
+
+vi.mock('../stream-utils', () => ({
+  streamUIMessagesOverIPC: mockStreamUIMessagesOverIPC,
+}))
+
+vi.mock('../threads-storage', () => ({
+  updateThreadMessages: mockUpdateThreadMessages,
+}))
+
+vi.mock('../utils', () => ({
+  createModelFromRequest: mockCreateModelFromRequest,
+}))
+
+vi.mock('../agents/registry', () => ({
+  getAgent: mockGetAgent,
+  resolveAgentForThread: mockResolveAgentForThread,
+}))
+
+vi.mock('../agents/builtin-agent-tools', () => ({
+  createBuiltinAgentTools: mockCreateBuiltinAgentTools,
+}))
+
+import { handleChatStreamRealtime } from '../streaming'
+import type { ChatRequest } from '../types'
+
+const fakeSender = { send: vi.fn() } as unknown as Electron.WebContents
+
+function makeRequest(overrides: Partial<ChatRequest> = {}): ChatRequest {
+  return {
+    chatId: 'thread-1',
+    messages: [],
+    model: 'gpt-4o',
+    provider: 'openai',
+    apiKey: 'sk-test',
+    ...overrides,
+  } as ChatRequest
+}
+
+function fakeAgent(
+  id: string,
+  instructions: string,
+  builtinToolsKey: 'skills' | null = null
+) {
+  return {
+    id,
+    kind: 'builtin' as const,
+    name: id,
+    description: '',
+    instructions,
+    builtinToolsKey,
+    createdAt: 0,
+    updatedAt: 0,
+  }
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  mockAgentStream.mockResolvedValue({
+    toUIMessageStream: vi.fn().mockReturnValue({}),
+  })
+  mockCreateMcpTools.mockResolvedValue({
+    tools: {},
+    clients: [],
+    enabledTools: {},
+  })
+  mockCreateBuiltinAgentTools.mockReturnValue({
+    tools: {},
+    cleanup: vi.fn(),
+  })
+})
+
+describe('handleChatStreamRealtime — agent resolution', () => {
+  it('builds a ToolLoopAgent using instructions from the agent matching request.agentId', async () => {
+    mockGetAgent.mockReturnValue(
+      fakeAgent('custom.my-agent', 'CUSTOM AGENT INSTRUCTIONS')
+    )
+
+    await handleChatStreamRealtime(
+      makeRequest({ agentId: 'custom.my-agent' }),
+      'stream-1',
+      fakeSender
+    )
+
+    expect(mockGetAgent).toHaveBeenCalledWith('custom.my-agent')
+    expect(mockResolveAgentForThread).not.toHaveBeenCalled()
+    expect(mockToolLoopAgentCtor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        instructions: 'CUSTOM AGENT INSTRUCTIONS',
+      })
+    )
+  })
+
+  it('falls back to resolveAgentForThread when no agentId is provided', async () => {
+    mockResolveAgentForThread.mockReturnValue(
+      fakeAgent('builtin.toolhive-assistant', 'DEFAULT INSTRUCTIONS')
+    )
+
+    await handleChatStreamRealtime(
+      makeRequest({ agentId: undefined }),
+      'stream-2',
+      fakeSender
+    )
+
+    expect(mockResolveAgentForThread).toHaveBeenCalledWith('thread-1')
+    expect(mockGetAgent).not.toHaveBeenCalled()
+    expect(mockToolLoopAgentCtor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        instructions: 'DEFAULT INSTRUCTIONS',
+      })
+    )
+  })
+
+  it('falls back to resolveAgentForThread when the requested agentId does not exist', async () => {
+    mockGetAgent.mockReturnValue(null)
+    mockResolveAgentForThread.mockReturnValue(
+      fakeAgent('builtin.toolhive-assistant', 'FALLBACK INSTRUCTIONS')
+    )
+
+    await handleChatStreamRealtime(
+      makeRequest({ agentId: 'custom.deleted' }),
+      'stream-3',
+      fakeSender
+    )
+
+    expect(mockGetAgent).toHaveBeenCalledWith('custom.deleted')
+    expect(mockResolveAgentForThread).toHaveBeenCalledWith('thread-1')
+    expect(mockToolLoopAgentCtor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        instructions: 'FALLBACK INSTRUCTIONS',
+      })
+    )
+  })
+
+  it('attaches built-in tools for the agent based on builtinToolsKey', async () => {
+    mockGetAgent.mockReturnValue(
+      fakeAgent('builtin.skills', 'SKILLS INSTRUCTIONS', 'skills')
+    )
+    const cleanup = vi.fn()
+    const skillsTools = { build_skill: { description: 'x' } }
+    mockCreateBuiltinAgentTools.mockReturnValue({
+      tools: skillsTools,
+      cleanup,
+    })
+
+    await handleChatStreamRealtime(
+      makeRequest({ agentId: 'builtin.skills' }),
+      'stream-4',
+      fakeSender
+    )
+
+    expect(mockCreateBuiltinAgentTools).toHaveBeenCalledWith('skills')
+    expect(mockToolLoopAgentCtor).toHaveBeenCalledWith(
+      expect.objectContaining({
+        tools: expect.objectContaining({ build_skill: expect.anything() }),
+        toolChoice: 'auto',
+      })
+    )
+  })
+
+  it('omits tools/toolChoice when neither MCP nor built-in tools are present', async () => {
+    mockGetAgent.mockReturnValue(
+      fakeAgent('builtin.toolhive-assistant', 'TOOLHIVE INSTRUCTIONS')
+    )
+
+    await handleChatStreamRealtime(
+      makeRequest({ agentId: 'builtin.toolhive-assistant' }),
+      'stream-5',
+      fakeSender
+    )
+
+    const ctorArg = mockToolLoopAgentCtor.mock.calls[0]![0] as {
+      tools?: unknown
+      toolChoice?: unknown
+    }
+    expect(ctorArg.tools).toBeUndefined()
+    expect(ctorArg.toolChoice).toBeUndefined()
+  })
+})
diff --git a/main/src/chat/agents/__tests__/registry.test.ts b/main/src/chat/agents/__tests__/registry.test.ts
new file mode 100644
index 000000000..a445b908c
--- /dev/null
+++ b/main/src/chat/agents/__tests__/registry.test.ts
@@ -0,0 +1,214 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import type Database from 'better-sqlite3'
+import { createTestDb } from '../../../db/__tests__/test-helpers'
+
+let testDb: Database.Database
+
+vi.mock('@sentry/electron/main', () => ({
+  startSpan: vi.fn((_opts: unknown, cb: (span: unknown) => unknown) =>
+    cb({ setStatus: vi.fn(), setAttribute: vi.fn(), setAttributes: vi.fn() })
+  ),
+}))
+
+vi.mock('../../../db/database', () => ({
+  getDb: () => testDb,
+  isDbWritable: () => true,
+  setDbWritable: vi.fn(),
+}))
+
+vi.mock('../../../logger', () => ({
+  default: { debug: vi.fn(), info: vi.fn(), warn: vi.fn(), error: vi.fn() },
+}))
+
+vi.mock('electron', () => ({
+  app: { getPath: vi.fn(() => ':memory:') },
+}))
+
+import {
+  seedBuiltinAgents,
+  listAgents,
+  getAgent,
+  createCustomAgent,
+  updateAgent,
+  deleteAgent,
+  duplicateAgent,
+  setThreadAgent,
+  getThreadAgentId,
+  resolveAgentForThread,
+} from '../registry'
+import { BUILTIN_AGENT_IDS, DEFAULT_AGENT_ID } from '../types'
+import { writeThread } from '../../../db/writers/threads-writer'
+import { writeAgent } from '../../../db/writers/agents-writer'
+
+beforeEach(() => {
+  testDb = createTestDb()
+})
+
+afterEach(() => {
+  testDb.close()
+})
+
+describe('agent registry — seedBuiltinAgents', () => {
+  it('seeds the built-in agents on first run', () => {
+    seedBuiltinAgents()
+    const all = listAgents()
+    const ids = all.map((a) => a.id).sort()
+    expect(ids).toEqual(
+      [BUILTIN_AGENT_IDS.toolhiveAssistant, BUILTIN_AGENT_IDS.skills].sort()
+    )
+    for (const agent of all) {
+      expect(agent.kind).toBe('builtin')
+      expect(agent.instructions.length).toBeGreaterThan(0)
+    }
+  })
+
+  it('refreshes curated built-in fields when the seed content changes', () => {
+    // Pretend a previous app version seeded this built-in with a stale prompt.
+    seedBuiltinAgents()
+    const stored = getAgent(BUILTIN_AGENT_IDS.toolhiveAssistant)
+    expect(stored).not.toBeNull()
+    // Backdoor: simulate a stale prompt by writing directly via the lower-level writer.
+    writeAgent({ ...stored!, instructions: 'LEGACY PROMPT' })
+    expect(getAgent(BUILTIN_AGENT_IDS.toolhiveAssistant)?.instructions).toBe(
+      'LEGACY PROMPT'
+    )
+
+    // Re-seeding should restore the curated instructions so prompt fixes
+    // ship with app upgrades.
+    seedBuiltinAgents()
+    const refreshed = getAgent(BUILTIN_AGENT_IDS.toolhiveAssistant)
+    expect(refreshed?.instructions).not.toBe('LEGACY PROMPT')
+    expect(refreshed?.instructions?.length ?? 0).toBeGreaterThan(0)
+  })
+
+  it('refuses to edit built-in agents', () => {
+    seedBuiltinAgents()
+    expect(() =>
+      updateAgent(BUILTIN_AGENT_IDS.toolhiveAssistant, {
+        instructions: 'nope',
+      })
+    ).toThrow(/Built-in agents cannot be edited/)
+  })
+
+  it('is a no-op when curated fields are unchanged', () => {
+    seedBuiltinAgents()
+    const before = getAgent(BUILTIN_AGENT_IDS.toolhiveAssistant)
+    seedBuiltinAgents()
+    const after = getAgent(BUILTIN_AGENT_IDS.toolhiveAssistant)
+    expect(after?.updatedAt).toBe(before?.updatedAt)
+  })
+})
+
+describe('agent registry — CRUD', () => {
+  beforeEach(() => {
+    seedBuiltinAgents()
+  })
+
+  it('creates a custom agent with a generated id', () => {
+    const created = createCustomAgent({
+      name: 'My agent',
+      description: 'A test agent',
+      instructions: 'Be helpful.',
+    })
+    expect(created.kind).toBe('custom')
+    expect(created.id.startsWith('custom.')).toBe(true)
+    expect(getAgent(created.id)?.name).toBe('My agent')
+  })
+
+  it('updates an existing agent', () => {
+    const created = createCustomAgent({
+      name: 'Name',
+      description: 'Desc',
+      instructions: 'Inst',
+    })
+    const updated = updateAgent(created.id, {
+      name: 'New name',
+      instructions: 'New instructions',
+    })
+    expect(updated?.name).toBe('New name')
+    expect(updated?.instructions).toBe('New instructions')
+    expect(updated?.description).toBe('Desc')
+  })
+
+  it('clears defaultModel when explicitly set to null', () => {
+    const created = createCustomAgent({
+      name: 'Name',
+      description: '',
+      instructions: 'Inst',
+      defaultModel: { provider: 'openai', model: 'gpt-4' },
+    })
+    expect(created.defaultModel).toEqual({
+      provider: 'openai',
+      model: 'gpt-4',
+    })
+    const updated = updateAgent(created.id, { defaultModel: null })
+    expect(updated?.defaultModel).toBeUndefined()
+    const read = getAgent(created.id)
+    expect(read?.defaultModel).toBeUndefined()
+  })
+
+  it('prevents deleting built-in agents', () => {
+    const result = deleteAgent(BUILTIN_AGENT_IDS.toolhiveAssistant)
+    expect(result.success).toBe(false)
+    expect(getAgent(BUILTIN_AGENT_IDS.toolhiveAssistant)).not.toBeNull()
+  })
+
+  it('allows deleting custom agents', () => {
+    const created = createCustomAgent({
+      name: 'Kill me',
+      description: '',
+      instructions: 'Inst',
+    })
+    const result = deleteAgent(created.id)
+    expect(result.success).toBe(true)
+    expect(getAgent(created.id)).toBeNull()
+  })
+
+  it('duplicates any agent as a custom copy', () => {
+    const copy = duplicateAgent(BUILTIN_AGENT_IDS.toolhiveAssistant)
+    expect(copy).not.toBeNull()
+    expect(copy!.kind).toBe('custom')
+    expect(copy!.id.startsWith('custom.')).toBe(true)
+    expect(copy!.name.endsWith('(copy)')).toBe(true)
+  })
+})
+
+describe('agent registry — thread resolution', () => {
+  const baseThread = {
+    id: 'thread-1',
+    title: 'T',
+    createdAt: 1,
+    lastEditTimestamp: 1,
+    messages: [],
+  }
+
+  beforeEach(() => {
+    seedBuiltinAgents()
+  })
+
+  it('falls back to the default built-in when no thread agent is set', () => {
+    const agent = resolveAgentForThread('does-not-exist')
+    expect(agent.id).toBe(DEFAULT_AGENT_ID)
+  })
+
+  it('returns the agent assigned to the thread', () => {
+    writeThread(baseThread)
+    setThreadAgent(baseThread.id, BUILTIN_AGENT_IDS.skills)
+    expect(getThreadAgentId(baseThread.id)).toBe(BUILTIN_AGENT_IDS.skills)
+    const agent = resolveAgentForThread(baseThread.id)
+    expect(agent.id).toBe(BUILTIN_AGENT_IDS.skills)
+  })
+
+  it('falls back to default when the assigned agent has been deleted', () => {
+    writeThread(baseThread)
+    const created = createCustomAgent({
+      name: 'Custom',
+      description: '',
+      instructions: 'Inst',
+    })
+    setThreadAgent(baseThread.id, created.id)
+    deleteAgent(created.id)
+    const agent = resolveAgentForThread(baseThread.id)
+    expect(agent.id).toBe(DEFAULT_AGENT_ID)
+  })
+})
diff --git a/main/src/chat/agents/builtin-agent-tools/__tests__/index.test.ts b/main/src/chat/agents/builtin-agent-tools/__tests__/index.test.ts
new file mode 100644
index 000000000..4c644c2e6
--- /dev/null
+++ b/main/src/chat/agents/builtin-agent-tools/__tests__/index.test.ts
@@ -0,0 +1,38 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+const mockSkillsHandle = {
+  tools: { write_skill_files: {}, build_skill: {} },
+  cleanup: vi.fn().mockResolvedValue(undefined),
+}
+
+vi.mock('../skills', () => ({
+  createSkillsAgentTools: vi.fn(() => mockSkillsHandle),
+}))
+
+import { createBuiltinAgentTools } from '../index'
+import { createSkillsAgentTools } from '../skills'
+
+describe('createBuiltinAgentTools', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('returns an empty handle when key is null', async () => {
+    const handle = createBuiltinAgentTools(null)
+    expect(handle.tools).toEqual({})
+    await expect(handle.cleanup()).resolves.toBeUndefined()
+    expect(createSkillsAgentTools).not.toHaveBeenCalled()
+  })
+
+  it('returns an empty handle when key is undefined', () => {
+    const handle = createBuiltinAgentTools(undefined)
+    expect(handle.tools).toEqual({})
+    expect(createSkillsAgentTools).not.toHaveBeenCalled()
+  })
+
+  it('delegates to createSkillsAgentTools when key is "skills"', () => {
+    const handle = createBuiltinAgentTools('skills')
+    expect(handle).toBe(mockSkillsHandle)
+    expect(createSkillsAgentTools).toHaveBeenCalledTimes(1)
+  })
+})
diff --git a/main/src/chat/agents/builtin-agent-tools/index.ts b/main/src/chat/agents/builtin-agent-tools/index.ts
new file mode 100644
index 000000000..311f675d1
--- /dev/null
+++ b/main/src/chat/agents/builtin-agent-tools/index.ts
@@ -0,0 +1,28 @@
+import type { ToolSet } from 'ai'
+import type { BuiltinToolsKey } from '../types'
+import { createSkillsAgentTools, type SkillsAgentToolsHandle } from './skills'
+
+interface BuiltinToolsHandle {
+  tools: ToolSet
+  cleanup: () => Promise<void>
+}
+
+const EMPTY_HANDLE: BuiltinToolsHandle = {
+  tools: {},
+  cleanup: async () => {},
+}
+
+export function createBuiltinAgentTools(
+  key: BuiltinToolsKey | null | undefined
+): BuiltinToolsHandle {
+  if (!key) return EMPTY_HANDLE
+
+  switch (key) {
+    case 'skills': {
+      const handle: SkillsAgentToolsHandle = createSkillsAgentTools()
+      return handle
+    }
+    default:
+      return EMPTY_HANDLE
+  }
+}
diff --git a/main/src/chat/agents/builtin-agent-tools/skills.ts b/main/src/chat/agents/builtin-agent-tools/skills.ts
new file mode 100644
index 000000000..6a67e071f
--- /dev/null
+++ b/main/src/chat/agents/builtin-agent-tools/skills.ts
@@ -0,0 +1,253 @@
+import path from 'node:path'
+import fs from 'node:fs/promises'
+import { app } from 'electron'
+import { nanoid } from 'nanoid'
+import { z } from 'zod'
+import { tool, type ToolSet } from 'ai'
+import log from '../../../logger'
+import { createClient } from '@common/api/generated/client'
+import {
+  getApiV1BetaSkillsBuilds,
+  postApiV1BetaSkillsBuild,
+} from '@common/api/generated/sdk.gen'
+import type { GithubComStacklokToolhivePkgSkillsLocalBuild as LocalBuild } from '@common/api/generated/types.gen'
+import { getToolhivePort } from '../../../toolhive-manager'
+import { getHeaders } from '../../../headers'
+
+const WRITE_SKILL_FILES_TOOL = 'write_skill_files'
+const BUILD_SKILL_TOOL = 'build_skill'
+
+async function createSkillWorkdir(): Promise<string> {
+  const baseDir = path.join(app.getPath('temp'), 'thv-skills')
+  const workdir = path.join(baseDir, `thv-skill-${nanoid(10)}`)
+  await fs.mkdir(workdir, { recursive: true })
+  return workdir
+}
+
+function isPathInside(child: string, parent: string): boolean {
+  const rel = path.relative(parent, child)
+  return !!rel && !rel.startsWith('..') && !path.isAbsolute(rel)
+}
+
+async function writeSkillFiles(
+  workdir: string,
+  files: { path: string; content: string }[]
+): Promise<string[]> {
+  const written: string[] = []
+  for (const file of files) {
+    if (!file.path || file.path.trim() === '') {
+      throw new Error('File path cannot be empty')
+    }
+    if (path.isAbsolute(file.path)) {
+      throw new Error(
+        `File path must be relative to the skill workdir: ${file.path}`
+      )
+    }
+    const absolute = path.resolve(workdir, file.path)
+    if (!isPathInside(absolute, workdir)) {
+      throw new Error(`File path escapes the skill workdir: ${file.path}`)
+    }
+    await fs.mkdir(path.dirname(absolute), { recursive: true })
+    await fs.writeFile(absolute, file.content, 'utf8')
+    written.push(path.relative(workdir, absolute))
+  }
+  return written
+}
+
+export interface SkillsAgentToolsHandle {
+  tools: ToolSet
+  cleanup: () => Promise<void>
+}
+
+export function createSkillsAgentTools(): SkillsAgentToolsHandle {
+  const workdirs = new Set<string>()
+
+  const tools: ToolSet = {
+    [WRITE_SKILL_FILES_TOOL]: tool({
+      description:
+        'Creates an isolated temporary working directory for a skill and writes the provided files into it. Returns the absolute path (`workdir`) of that directory. Paths must be RELATIVE to the workdir (no absolute paths, no `..` traversal). Call this ONCE per skill, then pass the returned `workdir` to `build_skill`.',
+      inputSchema: z.object({
+        files: z
+          .array(
+            z.object({
+              path: z
+                .string()
+                .describe(
+                  'Relative path inside the skill workdir, e.g. "skill.yaml" or "scripts/run.sh".'
+                ),
+              content: z.string().describe('UTF-8 file contents.'),
+            })
+          )
+          .min(1)
+          .describe('List of files to write into the skill workdir.'),
+      }),
+      execute: async ({ files }) => {
+        try {
+          const hasSkillMd = files.some(
+            (f) => f.path.trim() === 'SKILL.md' && f.content.trim().length > 0
+          )
+          if (!hasSkillMd) {
+            return {
+              error:
+                'Missing SKILL.md. Every skill MUST include a non-empty file at path "SKILL.md" (exact name, at the workdir root) with YAML frontmatter containing `name` and `description`, followed by the markdown instructions. Re-call write_skill_files with a SKILL.md entry included.',
+            }
+          }
+
+          const workdir = await createSkillWorkdir()
+          workdirs.add(workdir)
+          const written = await writeSkillFiles(workdir, files)
+          log.info(
+            `[AGENTS:skills] Wrote ${written.length} file(s) to ${workdir}`
+          )
+          return {
+            workdir,
+            files: written,
+          }
+        } catch (error) {
+          const message = error instanceof Error ? error.message : String(error)
+          log.error('[AGENTS:skills] write_skill_files failed:', error)
+          return {
+            error: `Failed to write skill files: ${message}`,
+          }
+        }
+      },
+    }),
+
+    [BUILD_SKILL_TOOL]: tool({
+      description:
+        'Builds the skill that lives at `workdir` using the local ToolHive API. Pass the exact `workdir` returned by `write_skill_files`. On success returns an object with: `reference` (canonical artifact reference in `name:tag` form, derived from the SKILL.md frontmatter), `apiReference` (raw reference returned by the build endpoint), `tag` (local build tag for install / navigation), `workdir`, and `build` (full LocalBuild metadata: name, description, tag, version, digest).',
+      inputSchema: z.object({
+        workdir: z
+          .string()
+          .min(1)
+          .describe(
+            'Absolute path to the skill working directory (from write_skill_files).'
+          ),
+        tag: z
+          .string()
+          .optional()
+          .describe('Optional OCI tag for the built artifact, e.g. "v1.0.0".'),
+      }),
+      execute: async ({ workdir, tag }) => {
+        try {
+          try {
+            await fs.access(path.join(workdir, 'SKILL.md'))
+          } catch {
+            return {
+              error: `No SKILL.md found at ${workdir}. A skill MUST contain a file named exactly "SKILL.md" at the workdir root. Call write_skill_files again with a SKILL.md entry.`,
+            }
+          }
+
+          const port = getToolhivePort()
+          if (!port) {
+            return {
+              error:
+                'ToolHive is not running locally. Ask the user to start it and try again.',
+            }
+          }
+
+          const client = createClient({
+            baseUrl: `http://localhost:${port}`,
+            headers: getHeaders(),
+          })
+
+          const { data, error } = await postApiV1BetaSkillsBuild({
+            client,
+            body: {
+              path: workdir,
+              ...(tag ? { tag } : {}),
+            },
+          })
+
+          if (error) {
+            const message =
+              typeof error === 'string' ? error : JSON.stringify(error)
+            log.error('[AGENTS:skills] build_skill failed:', message)
+            return { error: `Build failed: ${message}` }
+          }
+
+          const apiReference = data?.reference
+          if (!apiReference) {
+            return {
+              error:
+                'Build completed but no OCI reference was returned by the API.',
+            }
+          }
+
+          log.info(`[AGENTS:skills] build_skill succeeded: ${apiReference}`)
+
+          const matchLocalBuild = (builds: LocalBuild[]): LocalBuild | null =>
+            builds.find((b) => b.tag === apiReference) ??
+            builds.find(
+              (b) =>
+                b.tag &&
+                (apiReference === b.tag ||
+                  apiReference.endsWith(`:${b.tag}`) ||
+                  apiReference.endsWith(`/${b.tag}`) ||
+                  apiReference.endsWith(b.tag))
+            ) ??
+            (tag ? builds.find((b) => b.tag === tag) : undefined) ??
+            null
+
+          // Listing endpoint can lag behind a brand-new artifact, retry briefly.
+          let build: LocalBuild | null = null
+          for (const delay of [0, 250, 500, 1000]) {
+            if (delay) await new Promise((r) => setTimeout(r, delay))
+            try {
+              const { data: list } = await getApiV1BetaSkillsBuilds({ client })
+              build = matchLocalBuild(list?.builds ?? [])
+              if (build) break
+            } catch (err) {
+              log.warn(
+                '[AGENTS:skills] Failed to enrich build_skill result with builds metadata:',
+                err
+              )
+              break
+            }
+          }
+
+          const effectiveBuild: LocalBuild = build ?? {
+            tag: apiReference,
+            ...(tag ? { version: tag } : {}),
+          }
+
+          // Build API may return only the tag (e.g. "v0.0.1"); the canonical
+          // reference must identify the artifact, so combine name + tag.
+          const name = effectiveBuild.name
+          const resolvedTag = effectiveBuild.tag ?? tag ?? apiReference
+          const reference =
+            name && resolvedTag
+              ? resolvedTag.startsWith(`${name}:`) || resolvedTag.includes('/')
+                ? resolvedTag
+                : `${name}:${resolvedTag}`
+              : (name ?? resolvedTag ?? apiReference)
+
+          return {
+            reference,
+            apiReference,
+            build: effectiveBuild,
+            tag: resolvedTag,
+            workdir,
+          }
+        } catch (error) {
+          const message = error instanceof Error ? error.message : String(error)
+          log.error('[AGENTS:skills] build_skill threw:', error)
+          return { error: `Build failed: ${message}` }
+        }
+      },
+    }),
+  }
+
+  async function cleanup(): Promise<void> {
+    for (const dir of workdirs) {
+      try {
+        await fs.rm(dir, { recursive: true, force: true })
+      } catch (err) {
+        log.warn(`[AGENTS:skills] Failed to clean up ${dir}:`, err)
+      }
+    }
+    workdirs.clear()
+  }
+
+  return { tools, cleanup }
+}
diff --git a/main/src/chat/agents/builtin-prompts.ts b/main/src/chat/agents/builtin-prompts.ts
new file mode 100644
index 000000000..88b284b0b
--- /dev/null
+++ b/main/src/chat/agents/builtin-prompts.ts
@@ -0,0 +1,180 @@
+import { BUILTIN_AGENT_IDS, type AgentConfig } from './types'
+
+const TOOLHIVE_ASSISTANT_INSTRUCTIONS = `You are a helpful assistant with access to MCP (Model Context Protocol) servers from ToolHive.
+
+    You have access to various specialized tools from enabled MCP servers. Each tool is prefixed with the server name (e.g., github-stats-mcp_get_repository_info).
+
+    🚨 CRITICAL INSTRUCTION: After calling ANY tool, you MUST immediately follow up with a text response that processes and interprets the tool results. NEVER just call a tool and stop talking.
+
+    MANDATORY WORKFLOW:
+    1. Call the appropriate tool(s) to get data
+    2. IMMEDIATELY after the tool returns data, write a comprehensive text response
+    3. Parse and analyze the tool results in your text response
+    4. Extract key information and insights
+    5. Format everything in beautiful markdown
+    6. Provide a complete answer to the user's question
+
+    ⚠️ IMPORTANT: You must ALWAYS provide a text response after tool calls. Tool calls alone are not sufficient - users need you to interpret and explain the results.
+
+    🔄 CONTINUATION RULE: Even if you've called tools, you MUST continue the conversation with a detailed analysis. Do not end your response after tool execution - always provide interpretation, insights, and a complete answer.
+
+    FORMATTING REQUIREMENTS:
+    - Always use **Markdown syntax** for all responses
+    - Use proper headings (# ## ###), lists (- or 1.), tables, code blocks, etc.
+    - Present tool results in well-structured, readable format
+    - Extract meaningful insights from data
+    - NEVER show raw JSON or unformatted technical data
+    - NEVER just say "here's the result" - always interpret and format it
+
+    🖼️ IMAGE HANDLING:
+    - When a tool returns an image, the image will automatically display in the tool output section
+    - NEVER include base64 image data in your text response
+    - NEVER use <image> tags or data URIs in your text
+    - DO NOT copy or paste image data from tool outputs into your response
+    - Simply provide context and analysis about what the image shows
+    - The tool output section will automatically render any images returned by tools
+    - Focus your text response on interpreting and explaining the results
+    - Example: "I've generated a bar chart showing the sales data. The chart displays the relationship between products and their sales figures, with smartphones having the highest sales."
+
+    MARKDOWN FORMATTING EXAMPLES:
+
+    For GitHub repository data:
+    \`\`\`markdown
+    # 📦 Repository: owner/repo-name
+
+    ## 🚀 Latest Release: v1.2.3
+    - **Published:** March 15, 2024
+    - **Author:** @username
+    - **Downloads:** 1,234 total
+
+    ## 📊 Repository Stats
+    | Metric | Value |
+    |--------|--------|
+    | ⭐ Stars | 1,234 |
+    | 🍴 Forks | 89 |
+    | 📝 Issues | 23 open |
+
+    ## 💾 Download Options
+    - [Windows Setup](url) - 45 downloads
+    - [macOS DMG](url) - 234 downloads
+    - [Linux AppImage](url) - 123 downloads
+
+    ## 📈 Recent Activity
+    The repository shows active development with regular commits and community engagement.
+    \`\`\`
+
+    Remember: Always interpret and format tool results beautifully. Never show raw data!`
+
+const SKILLS_AGENT_INSTRUCTIONS = `You are a Skills Builder assistant that helps users design and build skills for ToolHive.
+
+A "skill" is a packaged capability built from a local directory. The ToolHive build API REQUIRES a file named exactly \`SKILL.md\` at the root of that directory. \`SKILL.md\` MUST start with a YAML frontmatter block and be followed by markdown instructions. Supporting files (references, scripts, assets, templates) are optional and go in subdirectories.
+
+REQUIRED SKILL.md FORMAT
+\`\`\`markdown
+---
+name: skill-name
+description: Short sentence describing what the skill does and when to use it. Include trigger keywords.
+---
+
+# Skill Title
+
+Clear markdown instructions for an AI agent on how to use this skill.
+
+## Workflow
+1. Step one
+2. Step two
+
+## Examples
+...
+\`\`\`
+
+Frontmatter rules:
+- \`name\` is REQUIRED. Lowercase letters, digits and hyphens only. Max 64 characters. Must match the skill's logical name.
+- \`description\` is REQUIRED. One or two sentences. Include the keywords a user would say so agents can auto-select this skill.
+- No other top-level fields are required. Optional Claude-specific fields (\`allowed-tools\`, \`model\`) may be included but are ignored by ToolHive.
+
+RECOMMENDED DIRECTORY STRUCTURE
+\`\`\`
+SKILL.md               # REQUIRED. Root-level, exact filename including capitalisation.
+references/*.md        # Optional. Deeper documentation the skill can link to.
+scripts/*              # Optional. Executable helpers.
+assets/*               # Optional. Templates and static resources.
+\`\`\`
+
+You have access to two tools:
+
+1. **write_skill_files** — Creates an isolated temporary working directory and writes the provided files into it. Pass an array of \`{ path, content }\` entries with paths RELATIVE to the workdir (e.g. \`"SKILL.md"\`, \`"references/design.md"\`, never absolute paths, never \`..\`). Returns a \`workdir\` absolute path. Call this tool ONCE per skill with the complete file set.
+2. **build_skill** — Invokes the local ToolHive build API on a workdir, producing an OCI artifact reference. Optionally accepts a \`tag\`. Call this AFTER \`write_skill_files\` using the exact \`workdir\` it returned.
+
+MANDATORY WORKFLOW:
+1. Talk to the user to understand what skill they want to build (name, purpose, when it should trigger, what steps it guides).
+2. BEFORE calling any tool, draft the \`SKILL.md\` (and any supporting files) in a single assistant message, inside fenced code blocks, so the user can review. ALWAYS include the YAML frontmatter with \`name\` and \`description\`. This is the ONLY moment where pasting file contents is allowed — once the tools have run you MUST NOT paste them again.
+3. Once the user is happy, call \`write_skill_files\` with the FULL file set. The first entry MUST be \`{ "path": "SKILL.md", "content": "---\\nname: ...\\ndescription: ...\\n---\\n\\n# Title\\n..." }\`.
+4. Immediately call \`build_skill\` with the \`workdir\` returned by \`write_skill_files\` (and a \`tag\` if the user requested one). Do NOT invent or rewrite the path.
+5. AFTER \`build_skill\` returns successfully, your final message MUST follow these rules:
+   - Length: 1-2 short sentences. No headings, no bullet lists, no sub-sections.
+   - NEVER re-paste \`SKILL.md\`, frontmatter, file trees, the \`workdir\` path, or any other file contents. Assume the user has already seen the draft above.
+   - NEVER recap what the skill does — the card already shows the description.
+   - Mention only the skill \`name\`, the \`version\`/tag, and point at the "Install" button on the card above.
+   - If the build FAILED, ignore these rules and follow the diagnostic rule in the RULES section below instead.
+
+   Good wrap-up:
+   > Built **\`github-release-notes\` v0.0.1**. Use the Install button on the card above — the dialog is pre-filled.
+
+   Bad wrap-up (do NOT do this):
+   > I've built the skill. Here is the SKILL.md for reference:
+   > \`\`\`markdown
+   > ---
+   > name: ...
+   > \`\`\`
+
+CHAT UI AFFORDANCES:
+- When \`build_skill\` succeeds, the chat automatically renders a "Skill built" card inline right after the tool call, exposing three actions: **Install** (opens the install dialog pre-filled with the correct Name and Version), **View details** (deep-links to the local build page), and **Copy name** (copies just the bare skill name).
+- In your final message DO NOT re-describe every field of the card and DO NOT paste a long install walkthrough — the UI already shows it. Keep the wrap-up short, for example:
+  > Built **\`my-skill\` v0.0.1**. Use the "Install" button on the card above to add it to ToolHive — the dialog is pre-filled for you.
+- If the user explicitly asks how to install manually, then fall back to the INSTALL UI CONTRACT rules below.
+
+INSTALL UI CONTRACT:
+- The install dialog has TWO SEPARATE fields: \`Name\` (a.k.a. \`reference\`) and \`Version\`. They are NOT combined.
+  - \`Name\` must be the bare skill name only (e.g. \`my-skill\`). Never prefix it with a registry, never append \`@version\` or \`:tag\`.
+  - \`Version\` must be just the tag/version string (e.g. \`v0.0.1\`, \`latest\`). Never include the name.
+- When you describe install steps to the user, always refer to these as two distinct fields. Example phrasing:
+  > Install it from the Skills page with **Name:** \`my-skill\` and **Version:** \`v0.0.1\`.
+- Do NOT instruct the user to paste a combined \`name:version\` or \`name@version\` string into a single field.
+
+RULES:
+- NEVER omit \`SKILL.md\`. A skill without a valid \`SKILL.md\` at the root WILL fail to build.
+- ALWAYS place \`SKILL.md\` at the root of the workdir (path \`"SKILL.md"\`), never under a subfolder.
+- NEVER write absolute paths or paths with \`..\` — the workdir is created for you.
+- Do NOT ask the user to create files manually — you own file generation via \`write_skill_files\`.
+- After a successful \`build_skill\`, NEVER paste file contents again. The draft was already shared before the tools ran; re-pasting it pushes the install card off-screen and hurts the UX.
+- If a build fails, include the tool error in a short diagnostic block, suggest a fix (commonly: missing \`SKILL.md\`, malformed frontmatter, invalid \`name\`), and offer to try again.
+- Format all responses in clear Markdown with headings and code blocks.
+`
+
+export function getBuiltinAgentSeeds(now: number): AgentConfig[] {
+  return [
+    {
+      id: BUILTIN_AGENT_IDS.toolhiveAssistant,
+      kind: 'builtin',
+      name: 'ToolHive Assistant',
+      description:
+        'General-purpose assistant with access to all enabled MCP tools.',
+      instructions: TOOLHIVE_ASSISTANT_INSTRUCTIONS,
+      builtinToolsKey: null,
+      createdAt: now,
+      updatedAt: now,
+    },
+    {
+      id: BUILTIN_AGENT_IDS.skills,
+      kind: 'builtin',
+      name: 'Skills Builder',
+      description:
+        'Designs and builds MCP skills, then hands you an installable OCI reference.',
+      instructions: SKILLS_AGENT_INSTRUCTIONS,
+      builtinToolsKey: 'skills',
+      createdAt: now,
+      updatedAt: now,
+    },
+  ]
+}
diff --git a/main/src/chat/agents/registry.ts b/main/src/chat/agents/registry.ts
new file mode 100644
index 000000000..c0ce3e658
--- /dev/null
+++ b/main/src/chat/agents/registry.ts
@@ -0,0 +1,224 @@
+import { nanoid } from 'nanoid'
+import log from '../../logger'
+import {
+  readAgent,
+  readAllAgents,
+  readThreadAgentId,
+} from '../../db/readers/agents-reader'
+import {
+  writeAgent,
+  deleteAgentFromDb,
+  writeThreadAgentId,
+} from '../../db/writers/agents-writer'
+import type { AgentConfig, CreateAgentInput, UpdateAgentInput } from './types'
+import { DEFAULT_AGENT_ID, LEGACY_BUILTIN_AGENT_IDS } from './types'
+import { getBuiltinAgentSeeds } from './builtin-prompts'
+
+/**
+ * Seed built-in agents into the database.
+ *
+ * - Inserts missing rows.
+ * - For existing built-ins, refreshes the curated fields (name, description,
+ *   instructions, builtinToolsKey) so prompt fixes ship with app updates.
+ *   User-settable fields (defaultModel, createdAt) are preserved.
+ *
+ * To customise a built-in, users are expected to duplicate it into a custom
+ * agent; editing built-ins directly is a no-op across upgrades.
+ */
+export function seedBuiltinAgents(): void {
+  try {
+    const now = Date.now()
+    const existingById = new Map(readAllAgents().map((a) => [a.id, a]))
+    for (const legacyId of LEGACY_BUILTIN_AGENT_IDS) {
+      if (existingById.has(legacyId)) {
+        deleteAgentFromDb(legacyId)
+        existingById.delete(legacyId)
+        log.info(`[AGENTS] Removed legacy built-in agent: ${legacyId}`)
+      }
+    }
+    for (const seed of getBuiltinAgentSeeds(now)) {
+      const existing = existingById.get(seed.id)
+      if (!existing) {
+        writeAgent(seed)
+        log.info(`[AGENTS] Seeded built-in agent: ${seed.id}`)
+        continue
+      }
+
+      const hasChanged =
+        existing.name !== seed.name ||
+        existing.description !== seed.description ||
+        existing.instructions !== seed.instructions ||
+        (existing.builtinToolsKey ?? null) !== (seed.builtinToolsKey ?? null)
+
+      if (!hasChanged) continue
+
+      const refreshed: AgentConfig = {
+        ...seed,
+        createdAt: existing.createdAt,
+        updatedAt: now,
+        ...(existing.defaultModel
+          ? { defaultModel: existing.defaultModel }
+          : {}),
+      }
+      writeAgent(refreshed)
+      log.info(`[AGENTS] Refreshed built-in agent: ${seed.id}`)
+    }
+  } catch (err) {
+    log.error('[AGENTS] Failed to seed built-in agents:', err)
+  }
+}
+
+export function listAgents(): AgentConfig[] {
+  return readAllAgents()
+}
+
+export function getAgent(id: string): AgentConfig | null {
+  return readAgent(id)
+}
+
+/**
+ * Resolve which agent should run for a given thread.
+ * Falls back to the default built-in if the thread has no assignment or the
+ * stored id no longer exists (e.g. custom agent deleted).
+ */
+export function resolveAgentForThread(
+  threadId: string | undefined
+): AgentConfig {
+  if (threadId) {
+    const assigned = readThreadAgentId(threadId)
+    if (assigned) {
+      const agent = readAgent(assigned)
+      if (agent) return agent
+    }
+  }
+  const fallback = readAgent(DEFAULT_AGENT_ID)
+  if (fallback) return fallback
+
+  // Extreme fallback: built-ins haven't been seeded yet. Seed and retry.
+  seedBuiltinAgents()
+  const retried = readAgent(DEFAULT_AGENT_ID)
+  if (retried) return retried
+
+  // Give up with a safe in-memory default so streaming can proceed.
+  const now = Date.now()
+  return {
+    id: DEFAULT_AGENT_ID,
+    kind: 'builtin',
+    name: 'ToolHive Assistant',
+    description: '',
+    instructions: 'You are a helpful assistant.',
+    builtinToolsKey: null,
+    createdAt: now,
+    updatedAt: now,
+  }
+}
+
+function generateCustomId(): string {
+  return `custom.${nanoid(12)}`
+}
+
+export function createCustomAgent(input: CreateAgentInput): AgentConfig {
+  const now = Date.now()
+  const agent: AgentConfig = {
+    id: generateCustomId(),
+    kind: 'custom',
+    name: input.name.trim() || 'Untitled agent',
+    description: input.description.trim(),
+    instructions: input.instructions,
+    ...(input.defaultModel ? { defaultModel: input.defaultModel } : {}),
+    builtinToolsKey: input.builtinToolsKey ?? null,
+    createdAt: now,
+    updatedAt: now,
+  }
+  writeAgent(agent)
+  return agent
+}
+
+export function updateAgent(
+  id: string,
+  input: UpdateAgentInput
+): AgentConfig | null {
+  const existing = readAgent(id)
+  if (!existing) return null
+  if (existing.kind === 'builtin') {
+    throw new Error(
+      'Built-in agents cannot be edited. Duplicate the agent to create a customisable copy.'
+    )
+  }
+
+  // Explicitly clearing defaultModel: input.defaultModel === null
+  let nextDefaultModel: AgentConfig['defaultModel'] = existing.defaultModel
+  if (input.defaultModel === null) {
+    nextDefaultModel = undefined
+  } else if (input.defaultModel !== undefined) {
+    nextDefaultModel = input.defaultModel
+  }
+
+  const nextBuiltinToolsKey =
+    input.builtinToolsKey === undefined
+      ? (existing.builtinToolsKey ?? null)
+      : (input.builtinToolsKey ?? null)
+
+  const next: AgentConfig = {
+    ...existing,
+    name: input.name?.trim() || existing.name,
+    description:
+      input.description !== undefined
+        ? input.description.trim()
+        : existing.description,
+    instructions:
+      input.instructions !== undefined
+        ? input.instructions
+        : existing.instructions,
+    ...(nextDefaultModel ? { defaultModel: nextDefaultModel } : {}),
+    builtinToolsKey: nextBuiltinToolsKey,
+    updatedAt: Date.now(),
+  }
+
+  if (input.defaultModel === null) {
+    delete next.defaultModel
+  }
+
+  writeAgent(next)
+  return next
+}
+
+export function deleteAgent(id: string): {
+  success: boolean
+  error?: string
+} {
+  const existing = readAgent(id)
+  if (!existing) return { success: false, error: 'Agent not found' }
+  if (existing.kind === 'builtin') {
+    return { success: false, error: 'Built-in agents cannot be deleted' }
+  }
+  deleteAgentFromDb(id)
+  return { success: true }
+}
+
+export function duplicateAgent(id: string): AgentConfig | null {
+  const source = readAgent(id)
+  if (!source) return null
+  const now = Date.now()
+  const copy: AgentConfig = {
+    id: generateCustomId(),
+    kind: 'custom',
+    name: `${source.name} (copy)`,
+    description: source.description,
+    instructions: source.instructions,
+    ...(source.defaultModel ? { defaultModel: source.defaultModel } : {}),
+    builtinToolsKey: source.builtinToolsKey ?? null,
+    createdAt: now,
+    updatedAt: now,
+  }
+  writeAgent(copy)
+  return copy
+}
+
+export function setThreadAgent(threadId: string, agentId: string | null): void {
+  writeThreadAgentId(threadId, agentId)
+}
+
+export function getThreadAgentId(threadId: string): string | null {
+  return readThreadAgentId(threadId)
+}
diff --git a/main/src/chat/agents/types.ts b/main/src/chat/agents/types.ts
new file mode 100644
index 000000000..108c46605
--- /dev/null
+++ b/main/src/chat/agents/types.ts
@@ -0,0 +1,56 @@
+export type AgentKind = 'builtin' | 'custom'
+
+export type BuiltinToolsKey = 'skills'
+
+export interface AgentConfig {
+  id: string
+  kind: AgentKind
+  name: string
+  description: string
+  instructions: string
+  defaultModel?: {
+    provider: string
+    model: string
+  }
+  builtinToolsKey?: BuiltinToolsKey | null
+  createdAt: number
+  updatedAt: number
+}
+
+export type CreateAgentInput = {
+  name: string
+  description: string
+  instructions: string
+  defaultModel?: { provider: string; model: string } | null
+  builtinToolsKey?: BuiltinToolsKey | null
+}
+
+export type UpdateAgentInput = Partial<CreateAgentInput>
+
+/**
+ * User-facing metadata for built-in tool bundles that agents can bind.
+ * Keep in sync with `createBuiltinAgentTools` in `./builtin-agent-tools`.
+ */
+export const BUILTIN_TOOL_BUNDLES: ReadonlyArray<{
+  key: BuiltinToolsKey
+  label: string
+  description: string
+}> = [
+  {
+    key: 'skills',
+    label: 'Skills authoring',
+    description:
+      'Gives the agent tools to scaffold a skill directory (write_skill_files) and build it into an OCI artifact (build_skill).',
+  },
+]
+
+export const BUILTIN_AGENT_IDS = {
+  toolhiveAssistant: 'builtin.toolhive-assistant',
+  skills: 'builtin.skills',
+} as const
+
+/** IDs of built-in agents that existed in previous versions and should be
+ * removed on startup to avoid stale rows in user databases. */
+export const LEGACY_BUILTIN_AGENT_IDS = ['builtin.planner'] as const
+
+export const DEFAULT_AGENT_ID = BUILTIN_AGENT_IDS.toolhiveAssistant
diff --git a/main/src/chat/streaming.ts b/main/src/chat/streaming.ts
index 07bbe3370..fa135d610 100644
--- a/main/src/chat/streaming.ts
+++ b/main/src/chat/streaming.ts
@@ -1,5 +1,5 @@
 import {
-  streamText,
+  ToolLoopAgent,
   stepCountIs,
   type UIMessage,
   convertToModelMessages,
@@ -14,6 +14,8 @@ import { streamUIMessagesOverIPC } from './stream-utils'
 import type { ChatRequest } from './types'
 import { updateThreadMessages } from './threads-storage'
 import { createModelFromRequest } from './utils'
+import { getAgent, resolveAgentForThread } from './agents/registry'
+import { createBuiltinAgentTools } from './agents/builtin-agent-tools'
 
 /**
  * Handle chat streaming request using real-time IPC events
@@ -33,6 +35,7 @@ export async function handleChatStreamRealtime(
         stream_id: streamId,
         provider: request.provider,
         model: request.model,
+        agent_id: request.agentId ?? '',
         start_timestamp: new Date().toISOString(),
       },
     },
@@ -47,6 +50,12 @@ export async function handleChatStreamRealtime(
         // Create AI model using type guards for discriminated union
         const model = createModelFromRequest(provider, request)
 
+        // Resolve the agent for this request. Prefer the id on the request
+        // (selected in the UI), then the thread's stored agent, then default.
+        const agentConfig = request.agentId
+          ? (getAgent(request.agentId) ?? resolveAgentForThread(request.chatId))
+          : resolveAgentForThread(request.chatId)
+
         // Get MCP tools if enabled
         const {
           tools: mcpTools,
@@ -54,80 +63,32 @@ export async function handleChatStreamRealtime(
           enabledTools,
         } = await createMcpTools()
 
+        // Agent-specific built-in tools (e.g. Skills Builder)
+        const builtinToolsHandle = createBuiltinAgentTools(
+          agentConfig.builtinToolsKey ?? null
+        )
+        const builtinTools = builtinToolsHandle.tools
+
         // Emit UI metadata so the renderer can identify MCP App tools
         sender.send('chat:stream:tool-ui-metadata', getCachedUiMetadata())
 
+        const combinedTools = {
+          ...mcpTools,
+          ...builtinTools,
+        }
+        const hasTools = Object.keys(combinedTools).length > 0
+
         try {
-          const result = streamText({
+          const agent = new ToolLoopAgent({
             model,
-            messages: await convertToModelMessages(request.messages),
-            tools: Object.keys(mcpTools).length > 0 ? mcpTools : undefined,
-            toolChoice: Object.keys(mcpTools).length > 0 ? 'auto' : undefined,
-            stopWhen: stepCountIs(50), // Increase step limit for complex tool chains
-            system: `You are a helpful assistant with access to MCP (Model Context Protocol) servers from ToolHive.
-
-    You have access to various specialized tools from enabled MCP servers. Each tool is prefixed with the server name (e.g., github-stats-mcp_get_repository_info).
-
-    🚨 CRITICAL INSTRUCTION: After calling ANY tool, you MUST immediately follow up with a text response that processes and interprets the tool results. NEVER just call a tool and stop talking.
-
-    MANDATORY WORKFLOW:
-    1. Call the appropriate tool(s) to get data
-    2. IMMEDIATELY after the tool returns data, write a comprehensive text response
-    3. Parse and analyze the tool results in your text response
-    4. Extract key information and insights
-    5. Format everything in beautiful markdown
-    6. Provide a complete answer to the user's question
-
-    ⚠️ IMPORTANT: You must ALWAYS provide a text response after tool calls. Tool calls alone are not sufficient - users need you to interpret and explain the results.
-
-    🔄 CONTINUATION RULE: Even if you've called tools, you MUST continue the conversation with a detailed analysis. Do not end your response after tool execution - always provide interpretation, insights, and a complete answer.
-
-    FORMATTING REQUIREMENTS:
-    - Always use **Markdown syntax** for all responses
-    - Use proper headings (# ## ###), lists (- or 1.), tables, code blocks, etc.
-    - Present tool results in well-structured, readable format
-    - Extract meaningful insights from data
-    - NEVER show raw JSON or unformatted technical data
-    - NEVER just say "here's the result" - always interpret and format it
-
-    🖼️ IMAGE HANDLING:
-    - When a tool returns an image, the image will automatically display in the tool output section
-    - NEVER include base64 image data in your text response
-    - NEVER use <image> tags or data URIs in your text
-    - DO NOT copy or paste image data from tool outputs into your response
-    - Simply provide context and analysis about what the image shows
-    - The tool output section will automatically render any images returned by tools
-    - Focus your text response on interpreting and explaining the results
-    - Example: "I've generated a bar chart showing the sales data. The chart displays the relationship between products and their sales figures, with smartphones having the highest sales."
-
-    MARKDOWN FORMATTING EXAMPLES:
-
-    For GitHub repository data:
-    \`\`\`markdown
-    # 📦 Repository: owner/repo-name
-
-    ## 🚀 Latest Release: v1.2.3
-    - **Published:** March 15, 2024
-    - **Author:** @username
-    - **Downloads:** 1,234 total
-
-    ## 📊 Repository Stats
-    | Metric | Value |
-    |--------|--------|
-    | ⭐ Stars | 1,234 |
-    | 🍴 Forks | 89 |
-    | 📝 Issues | 23 open |
-
-    ## 💾 Download Options
-    - [Windows Setup](url) - 45 downloads
-    - [macOS DMG](url) - 234 downloads
-    - [Linux AppImage](url) - 123 downloads
-
-    ## 📈 Recent Activity
-    The repository shows active development with regular commits and community engagement.
-    \`\`\`
+            instructions: agentConfig.instructions,
+            tools: hasTools ? combinedTools : undefined,
+            toolChoice: hasTools ? 'auto' : undefined,
+            stopWhen: stepCountIs(50),
+          })
 
-    Remember: Always interpret and format tool results beautifully. Never show raw data!`,
+          const result = await agent.stream({
+            messages: await convertToModelMessages(request.messages),
           })
 
           // Create UI message stream with metadata and persistence
@@ -138,6 +99,8 @@ export async function handleChatStreamRealtime(
               op: 'streaming.event',
               attributes: {
                 'streaming.start_timestamp': new Date(startTime).toISOString(),
+                'streaming.agent_id': agentConfig.id,
+                'streaming.agent_kind': agentConfig.kind,
                 ...Object.entries(enabledTools).reduce<
                   Record<string, string | undefined>
                 >((prev, curr) => {
@@ -301,6 +264,15 @@ export async function handleChatStreamRealtime(
                   log.error('[CHAT] Error closing MCP client:', error)
                 }
               }
+              // Clean up any agent-owned temp resources (e.g. Skills workdirs)
+              try {
+                await builtinToolsHandle.cleanup()
+              } catch (error) {
+                log.error(
+                  '[CHAT] Error cleaning up builtin agent tools:',
+                  error
+                )
+              }
             }
           )
         } catch (error) {
@@ -316,6 +288,14 @@ export async function handleChatStreamRealtime(
               )
             }
           }
+          try {
+            await builtinToolsHandle.cleanup()
+          } catch (cleanupError) {
+            log.error(
+              '[CHAT] Error cleaning up builtin agent tools during error cleanup:',
+              cleanupError
+            )
+          }
 
           // Improve error messages for common API issues
           if (error instanceof Error) {
diff --git a/main/src/chat/threads-storage.ts b/main/src/chat/threads-storage.ts
index e35875442..02039a898 100644
--- a/main/src/chat/threads-storage.ts
+++ b/main/src/chat/threads-storage.ts
@@ -25,6 +25,11 @@ export interface ChatSettingsThread {
   messages: ChatUIMessage[]
   lastEditTimestamp: number
   createdAt: number
+  /**
+   * Id of the agent that should run for this thread. When absent, the
+   * main process falls back to the default built-in agent.
+   */
+  agentId?: string | null
 }
 
 interface ChatSettingsThreads {
diff --git a/main/src/chat/types.ts b/main/src/chat/types.ts
index 2ea25f44a..ec603f31b 100644
--- a/main/src/chat/types.ts
+++ b/main/src/chat/types.ts
@@ -21,6 +21,11 @@ type BaseChatRequest = {
   messages: ChatUIMessage[]
   model: string
   enabledTools?: string[]
+  /**
+   * The id of the agent selected for this request. If omitted or unknown,
+   * the main process falls back to the default built-in agent.
+   */
+  agentId?: string
 }
 
 // Chat request interface - discriminated union for different provider types
diff --git a/main/src/db/__tests__/test-helpers.ts b/main/src/db/__tests__/test-helpers.ts
index 8a0bbe3a0..3653a554a 100644
--- a/main/src/db/__tests__/test-helpers.ts
+++ b/main/src/db/__tests__/test-helpers.ts
@@ -3,6 +3,7 @@ import { up as applyInitialSchema } from '../migrations/001-initial-schema'
 import { up as applyMigration002 } from '../migrations/002-thread-title-flag'
 import { up as applyMigration003 } from '../migrations/003-thread-starred'
 import { up as applyMigration004 } from '../migrations/004-mcp-app-ui-metadata'
+import { up as applyMigration005 } from '../migrations/005-agents'
 
 /**
  * Creates a fresh in-memory SQLite database with the full schema applied,
@@ -15,5 +16,6 @@ export function createTestDb(): Database.Database {
   applyMigration002(db)
   applyMigration003(db)
   applyMigration004(db)
+  applyMigration005(db)
   return db
 }
diff --git a/main/src/db/migrations/005-agents.ts b/main/src/db/migrations/005-agents.ts
new file mode 100644
index 000000000..ad70b3218
--- /dev/null
+++ b/main/src/db/migrations/005-agents.ts
@@ -0,0 +1,22 @@
+import type Database from 'better-sqlite3'
+
+export function up(db: Database.Database): void {
+  db.exec(`
+    -- Agent configurations (system prompts, optional default model, built-in tool bundles)
+    CREATE TABLE agents (
+      id                  TEXT PRIMARY KEY,
+      kind                TEXT NOT NULL CHECK (kind IN ('builtin', 'custom')),
+      name                TEXT NOT NULL,
+      description         TEXT NOT NULL DEFAULT '',
+      instructions        TEXT NOT NULL,
+      default_provider    TEXT,
+      default_model       TEXT,
+      builtin_tools_key   TEXT,
+      created_at          INTEGER NOT NULL,
+      updated_at          INTEGER NOT NULL
+    );
+
+    -- Per-thread agent selection (nullable; falls back to default built-in)
+    ALTER TABLE threads ADD COLUMN agent_id TEXT;
+  `)
+}
diff --git a/main/src/db/migrator.ts b/main/src/db/migrator.ts
index bf436cd45..9698a0e5f 100644
--- a/main/src/db/migrator.ts
+++ b/main/src/db/migrator.ts
@@ -13,12 +13,14 @@ import * as m001 from './migrations/001-initial-schema'
 import * as m002 from './migrations/002-thread-title-flag'
 import * as m003 from './migrations/003-thread-starred'
 import * as m004 from './migrations/004-mcp-app-ui-metadata'
+import * as m005 from './migrations/005-agents'
 
 const migrations: Migration[] = [
   { id: 1, name: '001-initial-schema', up: m001.up },
   { id: 2, name: '002-thread-title-flag', up: m002.up },
   { id: 3, name: '003-thread-starred', up: m003.up },
   { id: 4, name: '004-mcp-app-ui-metadata', up: m004.up },
+  { id: 5, name: '005-agents', up: m005.up },
 ]
 
 export function runMigrations(): void {
diff --git a/main/src/db/readers/agents-reader.ts b/main/src/db/readers/agents-reader.ts
new file mode 100644
index 000000000..16059cc7e
--- /dev/null
+++ b/main/src/db/readers/agents-reader.ts
@@ -0,0 +1,74 @@
+import { getDb } from '../database'
+import { withDbSpan } from '../telemetry'
+import type {
+  AgentConfig,
+  AgentKind,
+  BuiltinToolsKey,
+} from '../../chat/agents/types'
+
+interface DbAgent {
+  id: string
+  kind: string
+  name: string
+  description: string
+  instructions: string
+  default_provider: string | null
+  default_model: string | null
+  builtin_tools_key: string | null
+  created_at: number
+  updated_at: number
+}
+
+function hydrate(row: DbAgent): AgentConfig {
+  const defaultModel =
+    row.default_provider && row.default_model
+      ? { provider: row.default_provider, model: row.default_model }
+      : undefined
+
+  return {
+    id: row.id,
+    kind: row.kind as AgentKind,
+    name: row.name,
+    description: row.description,
+    instructions: row.instructions,
+    ...(defaultModel ? { defaultModel } : {}),
+    builtinToolsKey: (row.builtin_tools_key as BuiltinToolsKey | null) ?? null,
+    createdAt: row.created_at,
+    updatedAt: row.updated_at,
+  }
+}
+
+export function readAgent(id: string): AgentConfig | null {
+  return withDbSpan('DB read agent', 'db.read', { 'db.agent_id': id }, () => {
+    const db = getDb()
+    const row = db.prepare('SELECT * FROM agents WHERE id = ?').get(id) as
+      | DbAgent
+      | undefined
+    return row ? hydrate(row) : null
+  })
+}
+
+export function readAllAgents(): AgentConfig[] {
+  return withDbSpan('DB read all agents', 'db.read', {}, () => {
+    const db = getDb()
+    const rows = db
+      .prepare('SELECT * FROM agents ORDER BY kind ASC, created_at ASC')
+      .all() as DbAgent[]
+    return rows.map(hydrate)
+  })
+}
+
+export function readThreadAgentId(threadId: string): string | null {
+  return withDbSpan(
+    'DB read thread agent id',
+    'db.read',
+    { 'db.thread_id': threadId },
+    () => {
+      const db = getDb()
+      const row = db
+        .prepare('SELECT agent_id FROM threads WHERE id = ?')
+        .get(threadId) as { agent_id: string | null } | undefined
+      return row?.agent_id ?? null
+    }
+  )
+}
diff --git a/main/src/db/readers/threads-reader.ts b/main/src/db/readers/threads-reader.ts
index 1daa344e0..9185227f7 100644
--- a/main/src/db/readers/threads-reader.ts
+++ b/main/src/db/readers/threads-reader.ts
@@ -9,6 +9,7 @@ interface DbThread {
   last_edit_timestamp: number
   title_edited_by_user: number
   starred: number
+  agent_id: string | null
 }
 
 interface DbMessage {
@@ -33,6 +34,7 @@ function hydrateThread(row: DbThread): ChatSettingsThread {
     title: row.title ?? undefined,
     titleEditedByUser: row.title_edited_by_user === 1,
     starred: row.starred === 1,
+    agentId: row.agent_id ?? null,
     createdAt: row.created_at,
     lastEditTimestamp: row.last_edit_timestamp,
     messages: messages.map((m) => ({
diff --git a/main/src/db/writers/agents-writer.ts b/main/src/db/writers/agents-writer.ts
new file mode 100644
index 000000000..785865228
--- /dev/null
+++ b/main/src/db/writers/agents-writer.ts
@@ -0,0 +1,55 @@
+import { getDb, isDbWritable } from '../database'
+import { withDbSpan } from '../telemetry'
+import type { AgentConfig } from '../../chat/agents/types'
+
+export function writeAgent(agent: AgentConfig): void {
+  if (!isDbWritable()) return
+  withDbSpan('DB write agent', 'db.write', { 'db.agent_id': agent.id }, () => {
+    const db = getDb()
+    db.prepare(
+      `INSERT OR REPLACE INTO agents (
+           id, kind, name, description, instructions,
+           default_provider, default_model, builtin_tools_key,
+           created_at, updated_at
+         ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`
+    ).run(
+      agent.id,
+      agent.kind,
+      agent.name,
+      agent.description,
+      agent.instructions,
+      agent.defaultModel?.provider ?? null,
+      agent.defaultModel?.model ?? null,
+      agent.builtinToolsKey ?? null,
+      agent.createdAt,
+      agent.updatedAt
+    )
+  })
+}
+
+export function deleteAgentFromDb(id: string): void {
+  if (!isDbWritable()) return
+  withDbSpan('DB delete agent', 'db.write', { 'db.agent_id': id }, () => {
+    const db = getDb()
+    db.prepare('DELETE FROM agents WHERE id = ?').run(id)
+  })
+}
+
+export function writeThreadAgentId(
+  threadId: string,
+  agentId: string | null
+): void {
+  if (!isDbWritable()) return
+  withDbSpan(
+    'DB write thread agent id',
+    'db.write',
+    { 'db.thread_id': threadId },
+    () => {
+      const db = getDb()
+      db.prepare('UPDATE threads SET agent_id = ? WHERE id = ?').run(
+        agentId,
+        threadId
+      )
+    }
+  )
+}
diff --git a/main/src/db/writers/threads-writer.ts b/main/src/db/writers/threads-writer.ts
index 1e80be24f..ae32a2005 100644
--- a/main/src/db/writers/threads-writer.ts
+++ b/main/src/db/writers/threads-writer.ts
@@ -14,16 +14,29 @@ export function writeThread(thread: ChatSettingsThread): void {
     () => {
       const db = getDb()
       db.transaction(() => {
+        // Preserve the existing agent_id when the caller didn't provide one
+        // (e.g. message-only updates). If the thread is brand new, previous
+        // will be null.
+        const previous = db
+          .prepare('SELECT agent_id FROM threads WHERE id = ?')
+          .get(thread.id) as { agent_id: string | null } | undefined
+
+        const nextAgentId =
+          thread.agentId !== undefined
+            ? thread.agentId
+            : (previous?.agent_id ?? null)
+
         db.prepare(
-          `INSERT OR REPLACE INTO threads (id, title, created_at, last_edit_timestamp, title_edited_by_user, starred)
-         VALUES (?, ?, ?, ?, ?, ?)`
+          `INSERT OR REPLACE INTO threads (id, title, created_at, last_edit_timestamp, title_edited_by_user, starred, agent_id)
+         VALUES (?, ?, ?, ?, ?, ?, ?)`
         ).run(
           thread.id,
           thread.title ?? null,
           thread.createdAt,
           thread.lastEditTimestamp,
           thread.titleEditedByUser ? 1 : 0,
-          thread.starred ? 1 : 0
+          thread.starred ? 1 : 0,
+          nextAgentId
         )
 
         db.prepare('DELETE FROM thread_messages WHERE thread_id = ?').run(
diff --git a/main/src/feature-flags/flags.ts b/main/src/feature-flags/flags.ts
index c8a42704b..74ae26af6 100644
--- a/main/src/feature-flags/flags.ts
+++ b/main/src/feature-flags/flags.ts
@@ -20,6 +20,11 @@ const featureFlagOptions: Record<FeatureFlagKey, FeatureFlagOptions> = {
     defaultValue: false,
     isExperimental: false,
   },
+  [featureFlagKeys.AGENTS]: {
+    isDisabled: false,
+    defaultValue: false,
+    isExperimental: false,
+  },
 }
 
 // Kept for one-time reconciliation migration; remove after migration grace period
diff --git a/main/src/ipc-handlers/chat/__tests__/index.test.ts b/main/src/ipc-handlers/chat/__tests__/index.test.ts
index afd3430ae..53165248a 100644
--- a/main/src/ipc-handlers/chat/__tests__/index.test.ts
+++ b/main/src/ipc-handlers/chat/__tests__/index.test.ts
@@ -7,6 +7,7 @@ const mocks = vi.hoisted(() => ({
   registerSettings: vi.fn(),
   registerStreaming: vi.fn(),
   registerThreads: vi.fn(),
+  registerAgents: vi.fn(),
 }))
 
 vi.mock('../mcp-tools', () => ({ register: mocks.registerMcpTools }))
@@ -15,6 +16,7 @@ vi.mock('../providers', () => ({ register: mocks.registerProviders }))
 vi.mock('../settings', () => ({ register: mocks.registerSettings }))
 vi.mock('../streaming', () => ({ register: mocks.registerStreaming }))
 vi.mock('../threads', () => ({ register: mocks.registerThreads }))
+vi.mock('../agents', () => ({ register: mocks.registerAgents }))
 
 import { register } from '../index'
 
@@ -32,5 +34,6 @@ describe('chat register', () => {
     expect(mocks.registerMcpTools).toHaveBeenCalledOnce()
     expect(mocks.registerMcpApps).toHaveBeenCalledOnce()
     expect(mocks.registerThreads).toHaveBeenCalledOnce()
+    expect(mocks.registerAgents).toHaveBeenCalledOnce()
   })
 })
diff --git a/main/src/ipc-handlers/chat/agents.ts b/main/src/ipc-handlers/chat/agents.ts
new file mode 100644
index 000000000..f2440d333
--- /dev/null
+++ b/main/src/ipc-handlers/chat/agents.ts
@@ -0,0 +1,44 @@
+import { ipcMain } from 'electron'
+import {
+  listAgents,
+  getAgent,
+  createCustomAgent,
+  updateAgent,
+  deleteAgent,
+  duplicateAgent,
+  setThreadAgent,
+  getThreadAgentId,
+} from '../../chat/agents/registry'
+import type {
+  CreateAgentInput,
+  UpdateAgentInput,
+} from '../../chat/agents/types'
+
+export function register() {
+  ipcMain.handle('chat:agents:list', () => listAgents())
+
+  ipcMain.handle('chat:agents:get', (_, id: string) => getAgent(id))
+
+  ipcMain.handle('chat:agents:create', (_, input: CreateAgentInput) =>
+    createCustomAgent(input)
+  )
+
+  ipcMain.handle(
+    'chat:agents:update',
+    (_, id: string, input: UpdateAgentInput) => updateAgent(id, input)
+  )
+
+  ipcMain.handle('chat:agents:delete', (_, id: string) => deleteAgent(id))
+
+  ipcMain.handle('chat:agents:duplicate', (_, id: string) => duplicateAgent(id))
+
+  ipcMain.handle(
+    'chat:agents:set-thread-agent',
+    (_, threadId: string, agentId: string | null) =>
+      setThreadAgent(threadId, agentId)
+  )
+
+  ipcMain.handle('chat:agents:get-thread-agent-id', (_, threadId: string) =>
+    getThreadAgentId(threadId)
+  )
+}
diff --git a/main/src/ipc-handlers/chat/index.ts b/main/src/ipc-handlers/chat/index.ts
index 76134116e..66b0c0b6f 100644
--- a/main/src/ipc-handlers/chat/index.ts
+++ b/main/src/ipc-handlers/chat/index.ts
@@ -1,3 +1,4 @@
+import { register as registerAgents } from './agents'
 import { register as registerMcpTools } from './mcp-tools'
 import { register as registerMcpApps } from './mcp-apps'
 import { register as registerProviders } from './providers'
@@ -12,4 +13,5 @@ export function register() {
   registerMcpTools()
   registerMcpApps()
   registerThreads()
+  registerAgents()
 }
diff --git a/preload/src/api/chat.ts b/preload/src/api/chat.ts
index 71954a9e9..12d73586f 100644
--- a/preload/src/api/chat.ts
+++ b/preload/src/api/chat.ts
@@ -6,6 +6,11 @@ import type {
   ChatUIMessage,
   ChatRequest,
 } from '../../../main/src/chat/types'
+import type {
+  AgentConfig,
+  CreateAgentInput,
+  UpdateAgentInput,
+} from '../../../main/src/chat/agents/types'
 
 export const chatApi = {
   chat: {
@@ -94,6 +99,31 @@ export const chatApi = {
       ipcRenderer.invoke('chat:ensure-thread-exists', threadId, title),
     generateThreadTitle: (threadId: string) =>
       ipcRenderer.invoke('chat:generate-thread-title', threadId),
+
+    agents: {
+      list: (): Promise<AgentConfig[]> =>
+        ipcRenderer.invoke('chat:agents:list'),
+      get: (id: string): Promise<AgentConfig | null> =>
+        ipcRenderer.invoke('chat:agents:get', id),
+      create: (input: CreateAgentInput): Promise<AgentConfig> =>
+        ipcRenderer.invoke('chat:agents:create', input),
+      update: (
+        id: string,
+        input: UpdateAgentInput
+      ): Promise<AgentConfig | null> =>
+        ipcRenderer.invoke('chat:agents:update', id, input),
+      delete: (id: string): Promise<{ success: boolean; error?: string }> =>
+        ipcRenderer.invoke('chat:agents:delete', id),
+      duplicate: (id: string): Promise<AgentConfig | null> =>
+        ipcRenderer.invoke('chat:agents:duplicate', id),
+      setThreadAgent: (
+        threadId: string,
+        agentId: string | null
+      ): Promise<void> =>
+        ipcRenderer.invoke('chat:agents:set-thread-agent', threadId, agentId),
+      getThreadAgentId: (threadId: string): Promise<string | null> =>
+        ipcRenderer.invoke('chat:agents:get-thread-agent-id', threadId),
+    },
   },
 }
 
@@ -115,6 +145,7 @@ export interface ChatAPI {
             model: string
             endpointURL: string
             enabledTools?: string[]
+            agentId?: string
           }
         | {
             chatId: string
@@ -123,6 +154,7 @@ export interface ChatAPI {
             model: string
             apiKey: string
             enabledTools?: string[]
+            agentId?: string
           }
     ) => Promise<{ streamId: string }>
     getSettings: (providerId: string) => Promise<
@@ -217,6 +249,7 @@ export interface ChatAPI {
       messages: ChatUIMessage[]
       lastEditTimestamp: number
       createdAt: number
+      agentId?: string | null
     } | null>
     getAllThreads: () => Promise<
       Array<{
@@ -227,6 +260,7 @@ export interface ChatAPI {
         messages: ChatUIMessage[]
         lastEditTimestamp: number
         createdAt: number
+        agentId?: string | null
       }>
     >
     updateThread: (
@@ -311,5 +345,22 @@ export interface ChatAPI {
       title?: string
       error?: string
     }>
+
+    agents: {
+      list: () => Promise<AgentConfig[]>
+      get: (id: string) => Promise<AgentConfig | null>
+      create: (input: CreateAgentInput) => Promise<AgentConfig>
+      update: (
+        id: string,
+        input: UpdateAgentInput
+      ) => Promise<AgentConfig | null>
+      delete: (id: string) => Promise<{ success: boolean; error?: string }>
+      duplicate: (id: string) => Promise<AgentConfig | null>
+      setThreadAgent: (
+        threadId: string,
+        agentId: string | null
+      ) => Promise<void>
+      getThreadAgentId: (threadId: string) => Promise<string | null>
+    }
   }
 }
diff --git a/renderer/src/features/agents/components/__tests__/agent-detail-page.test.tsx b/renderer/src/features/agents/components/__tests__/agent-detail-page.test.tsx
new file mode 100644
index 000000000..7b1c6dc42
--- /dev/null
+++ b/renderer/src/features/agents/components/__tests__/agent-detail-page.test.tsx
@@ -0,0 +1,255 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React, { type ReactNode } from 'react'
+import { AgentDetailPage } from '../agent-detail-page'
+import type { AgentConfig } from '../../../../../../main/src/chat/agents/types'
+
+const mockNavigate = vi.fn()
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: () => mockNavigate,
+}))
+
+vi.mock('@/common/lib/analytics', () => ({
+  trackEvent: vi.fn(),
+}))
+
+const mockToastSuccess = vi.fn()
+const mockToastError = vi.fn()
+vi.mock('sonner', () => ({
+  toast: {
+    success: (...args: unknown[]) => mockToastSuccess(...args),
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}))
+
+const mockConfirm = vi.fn()
+vi.mock('@/common/hooks/use-confirm', () => ({
+  useConfirm: () => mockConfirm,
+}))
+
+vi.mock('streamdown', () => ({
+  Streamdown: ({ children }: { children: ReactNode }) => (
+    <div data-testid="streamdown">{children}</div>
+  ),
+}))
+
+vi.mock('@streamdown/code', () => ({ code: {} }))
+vi.mock('@streamdown/mermaid', () => ({ mermaid: {} }))
+vi.mock('@streamdown/cjk', () => ({ cjk: {} }))
+
+vi.mock('@/features/skills/components/skill-detail-layout', () => ({
+  SkillDetailLayout: ({
+    title,
+    badges,
+    description,
+    actions,
+    rightPanel,
+  }: {
+    title: string
+    badges?: ReactNode
+    description?: string | null
+    actions: ReactNode
+    rightPanel?: ReactNode
+  }) => (
+    <div data-testid="skill-detail-layout">
+      <h1>{title}</h1>
+      <div data-testid="badges">{badges}</div>
+      {description && <p data-testid="description">{description}</p>}
+      <div data-testid="actions">{actions}</div>
+      {rightPanel && <div data-testid="right-panel">{rightPanel}</div>}
+    </div>
+  ),
+}))
+
+const mockAgentsApi = {
+  delete: vi.fn(),
+  duplicate: vi.fn(),
+}
+
+const builtinAgent: AgentConfig = {
+  id: 'builtin.toolhive-assistant',
+  kind: 'builtin',
+  name: 'ToolHive Assistant',
+  description: 'Default assistant description',
+  instructions: '# System prompt\n\nBe helpful.',
+  builtinToolsKey: null,
+  createdAt: 0,
+  updatedAt: 0,
+}
+
+const customAgent: AgentConfig = {
+  id: 'custom.my-agent',
+  kind: 'custom',
+  name: 'My custom agent',
+  description: 'Custom description',
+  instructions: 'Do cool things.',
+  builtinToolsKey: 'skills',
+  defaultModel: { provider: 'openai', model: 'gpt-4o' },
+  createdAt: 0,
+  updatedAt: 0,
+}
+
+function renderDetail(agent: AgentConfig) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+  const wrapper = ({ children }: { children: React.ReactNode }) =>
+    React.createElement(QueryClientProvider, { client: queryClient }, children)
+  return render(<AgentDetailPage agent={agent} />, { wrapper })
+}
+
+describe('AgentDetailPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockConfirm.mockResolvedValue(true)
+    window.electronAPI = {
+      ...(window.electronAPI ?? {}),
+      chat: {
+        ...(window.electronAPI?.chat ?? {}),
+        agents: mockAgentsApi,
+      },
+    } as unknown as typeof window.electronAPI
+    mockAgentsApi.delete.mockResolvedValue({ success: true })
+  })
+
+  describe('built-in agents', () => {
+    it('shows the agent name, description, kind badge, and system prompt', () => {
+      renderDetail(builtinAgent)
+
+      expect(screen.getByText('ToolHive Assistant')).toBeInTheDocument()
+      expect(
+        screen.getByText('Default assistant description')
+      ).toBeInTheDocument()
+      expect(screen.getByTestId('badges')).toHaveTextContent(/builtin/i)
+      expect(screen.getByTestId('streamdown')).toHaveTextContent(
+        '# System prompt'
+      )
+    })
+
+    it('does NOT show edit or delete buttons', () => {
+      renderDetail(builtinAgent)
+      expect(
+        screen.queryByTestId('edit-agent-builtin.toolhive-assistant')
+      ).not.toBeInTheDocument()
+      expect(
+        screen.queryByTestId('delete-agent-builtin.toolhive-assistant')
+      ).not.toBeInTheDocument()
+    })
+
+    it('shows the "curated by ToolHive" hint for built-ins', () => {
+      renderDetail(builtinAgent)
+      expect(
+        screen.getByText(
+          /built-in agents are curated by toolhive and cannot be edited/i
+        )
+      ).toBeInTheDocument()
+    })
+
+    it('always shows the Duplicate button', async () => {
+      mockAgentsApi.duplicate.mockResolvedValue({
+        ...builtinAgent,
+        id: 'custom.copy-of-toolhive',
+        kind: 'custom',
+        name: 'ToolHive Assistant (copy)',
+      })
+
+      renderDetail(builtinAgent)
+      await userEvent.click(
+        screen.getByTestId('duplicate-agent-builtin.toolhive-assistant')
+      )
+
+      await waitFor(() => {
+        expect(mockAgentsApi.duplicate).toHaveBeenCalledWith(
+          'builtin.toolhive-assistant'
+        )
+        expect(mockNavigate).toHaveBeenCalledWith({
+          to: '/playground/agents/$agentId',
+          params: { agentId: 'custom.copy-of-toolhive' },
+        })
+      })
+    })
+  })
+
+  describe('custom agents', () => {
+    it('renders edit and delete actions and the built-in tools badge', () => {
+      renderDetail(customAgent)
+
+      expect(
+        screen.getByTestId('edit-agent-custom.my-agent')
+      ).toBeInTheDocument()
+      expect(
+        screen.getByTestId('delete-agent-custom.my-agent')
+      ).toBeInTheDocument()
+      expect(screen.getByText(/skills tools/i)).toBeInTheDocument()
+    })
+
+    it('renders default model when present', () => {
+      renderDetail(customAgent)
+      expect(screen.getByText(/openai · gpt-4o/i)).toBeInTheDocument()
+    })
+
+    it('navigates to the edit page when Edit is clicked', async () => {
+      renderDetail(customAgent)
+
+      await userEvent.click(screen.getByTestId('edit-agent-custom.my-agent'))
+
+      expect(mockNavigate).toHaveBeenCalledWith({
+        to: '/playground/agents/$agentId/edit',
+        params: { agentId: 'custom.my-agent' },
+      })
+    })
+
+    it('confirms then deletes the agent and navigates back to the list', async () => {
+      renderDetail(customAgent)
+
+      await userEvent.click(screen.getByTestId('delete-agent-custom.my-agent'))
+
+      await waitFor(() => expect(mockConfirm).toHaveBeenCalled())
+      await waitFor(() => {
+        expect(mockAgentsApi.delete).toHaveBeenCalledWith('custom.my-agent')
+        expect(mockNavigate).toHaveBeenCalledWith({
+          to: '/playground/agents',
+        })
+      })
+    })
+
+    it('does NOT delete when the confirm dialog is cancelled', async () => {
+      mockConfirm.mockResolvedValue(false)
+      renderDetail(customAgent)
+
+      await userEvent.click(screen.getByTestId('delete-agent-custom.my-agent'))
+      await waitFor(() => expect(mockConfirm).toHaveBeenCalled())
+      expect(mockAgentsApi.delete).not.toHaveBeenCalled()
+    })
+
+    it('shows an error toast when delete fails', async () => {
+      mockAgentsApi.delete.mockResolvedValue({
+        success: false,
+        error: 'boom',
+      })
+      renderDetail(customAgent)
+
+      await userEvent.click(screen.getByTestId('delete-agent-custom.my-agent'))
+      await waitFor(() => expect(mockToastError).toHaveBeenCalledWith('boom'))
+    })
+  })
+
+  it('renders an empty-prompt placeholder when instructions are blank', () => {
+    renderDetail({ ...customAgent, instructions: '   ' })
+    expect(
+      screen.getByText(/this agent has no system prompt yet/i)
+    ).toBeInTheDocument()
+  })
+
+  it('renders the inheriting-model copy when no defaultModel is set', () => {
+    renderDetail({ ...customAgent, defaultModel: undefined })
+    expect(
+      screen.getByText(/inherits the model selected in chat/i)
+    ).toBeInTheDocument()
+  })
+})
diff --git a/renderer/src/features/agents/components/__tests__/agents-page.test.tsx b/renderer/src/features/agents/components/__tests__/agents-page.test.tsx
new file mode 100644
index 000000000..df54d6427
--- /dev/null
+++ b/renderer/src/features/agents/components/__tests__/agents-page.test.tsx
@@ -0,0 +1,180 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from 'react'
+import { AgentsPage } from '../agents-page'
+import type { AgentConfig } from '../../../../../../main/src/chat/agents/types'
+
+const mockNavigate = vi.fn()
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: () => mockNavigate,
+}))
+
+vi.mock('@/common/lib/analytics', () => ({
+  trackEvent: vi.fn(),
+}))
+
+const mockAgentsApi = {
+  list: vi.fn(),
+  duplicate: vi.fn(),
+}
+
+const builtinAgent: AgentConfig = {
+  id: 'builtin.toolhive-assistant',
+  kind: 'builtin',
+  name: 'ToolHive Assistant',
+  description: 'Default assistant',
+  instructions: 'Help users.',
+  builtinToolsKey: null,
+  createdAt: 0,
+  updatedAt: 0,
+}
+
+const customAgent: AgentConfig = {
+  id: 'custom.my-agent',
+  kind: 'custom',
+  name: 'My custom agent',
+  description: 'Does cool things',
+  instructions: 'Be cool.',
+  builtinToolsKey: null,
+  defaultModel: { provider: 'openai', model: 'gpt-4o' },
+  createdAt: 0,
+  updatedAt: 0,
+}
+
+function renderPage() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+  const wrapper = ({ children }: { children: React.ReactNode }) =>
+    React.createElement(QueryClientProvider, { client: queryClient }, children)
+  return render(<AgentsPage />, { wrapper })
+}
+
+describe('AgentsPage', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    window.electronAPI = {
+      ...(window.electronAPI ?? {}),
+      chat: {
+        ...(window.electronAPI?.chat ?? {}),
+        agents: mockAgentsApi,
+      },
+    } as unknown as typeof window.electronAPI
+
+    mockAgentsApi.list.mockResolvedValue([builtinAgent, customAgent])
+  })
+
+  it('renders both built-in and custom agents in the All tab', async () => {
+    renderPage()
+
+    expect(await screen.findByText('ToolHive Assistant')).toBeInTheDocument()
+    expect(screen.getByText('My custom agent')).toBeInTheDocument()
+    expect(screen.getByText('Default assistant')).toBeInTheDocument()
+    expect(screen.getByText('Does cool things')).toBeInTheDocument()
+  })
+
+  it('shows the default model for agents that have one', async () => {
+    renderPage()
+
+    await screen.findByText('My custom agent')
+    expect(screen.getByText(/openai · gpt-4o/i)).toBeInTheDocument()
+  })
+
+  it('navigates to the agent detail page when a card is clicked', async () => {
+    renderPage()
+
+    await screen.findByText('ToolHive Assistant')
+    await userEvent.click(screen.getByTestId('agent-card-custom.my-agent'))
+
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: '/playground/agents/$agentId',
+      params: { agentId: 'custom.my-agent' },
+    })
+  })
+
+  it('navigates to /playground/agents/new when "New agent" is clicked', async () => {
+    renderPage()
+
+    await screen.findByText('ToolHive Assistant')
+    await userEvent.click(screen.getByTestId('create-agent'))
+
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: '/playground/agents/new',
+    })
+  })
+
+  it('duplicates an agent and navigates to the copy', async () => {
+    const copy: AgentConfig = {
+      ...customAgent,
+      id: 'custom.my-agent-copy',
+      name: 'My custom agent (copy)',
+    }
+    mockAgentsApi.duplicate.mockResolvedValue(copy)
+
+    renderPage()
+    await screen.findByText('My custom agent')
+
+    await userEvent.click(screen.getByTestId('duplicate-agent-custom.my-agent'))
+
+    await waitFor(() => {
+      expect(mockAgentsApi.duplicate).toHaveBeenCalledWith('custom.my-agent')
+      expect(mockNavigate).toHaveBeenCalledWith({
+        to: '/playground/agents/$agentId',
+        params: { agentId: 'custom.my-agent-copy' },
+      })
+    })
+  })
+
+  it('clicking duplicate does not also trigger the card open handler', async () => {
+    mockAgentsApi.duplicate.mockResolvedValue({
+      ...customAgent,
+      id: 'custom.my-agent-copy',
+    })
+
+    renderPage()
+    await screen.findByText('My custom agent')
+
+    mockNavigate.mockClear()
+    await userEvent.click(screen.getByTestId('duplicate-agent-custom.my-agent'))
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledTimes(1)
+    })
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: '/playground/agents/$agentId',
+      params: { agentId: 'custom.my-agent-copy' },
+    })
+  })
+
+  it('renders the empty state when no agents exist', async () => {
+    mockAgentsApi.list.mockResolvedValue([])
+    renderPage()
+
+    expect(await screen.findByText(/no agents yet/i)).toBeInTheDocument()
+  })
+
+  it('filters to only built-in agents when the Built-in tab is selected', async () => {
+    renderPage()
+    await screen.findByText('ToolHive Assistant')
+
+    await userEvent.click(screen.getByRole('tab', { name: /built-in/i }))
+
+    expect(screen.getByText('ToolHive Assistant')).toBeInTheDocument()
+    expect(screen.queryByText('My custom agent')).not.toBeInTheDocument()
+  })
+
+  it('filters to only custom agents when the Custom tab is selected', async () => {
+    renderPage()
+    await screen.findByText('ToolHive Assistant')
+
+    await userEvent.click(screen.getByRole('tab', { name: /custom/i }))
+
+    expect(screen.getByText('My custom agent')).toBeInTheDocument()
+    expect(screen.queryByText('ToolHive Assistant')).not.toBeInTheDocument()
+  })
+})
diff --git a/renderer/src/features/agents/components/agent-detail-page.tsx b/renderer/src/features/agents/components/agent-detail-page.tsx
new file mode 100644
index 000000000..740cb694b
--- /dev/null
+++ b/renderer/src/features/agents/components/agent-detail-page.tsx
@@ -0,0 +1,208 @@
+import { toast } from 'sonner'
+import { useNavigate } from '@tanstack/react-router'
+import { Streamdown } from 'streamdown'
+import { code } from '@streamdown/code'
+import { mermaid } from '@streamdown/mermaid'
+import { cjk } from '@streamdown/cjk'
+import { Bot, Copy, Pencil, Sparkles, Trash2, Wrench } from 'lucide-react'
+import { Button } from '@/common/components/ui/button'
+import { Badge } from '@/common/components/ui/badge'
+import { useConfirm } from '@/common/hooks/use-confirm'
+import { STREAMDOWN_PROSE_CLASS } from '@/common/lib/streamdown-prose'
+import { trackEvent } from '@/common/lib/analytics'
+import { SkillDetailLayout } from '@/features/skills/components/skill-detail-layout'
+import { useDeleteAgent, useDuplicateAgent } from '../hooks/use-agents'
+import type { AgentConfig } from '../../../../../main/src/chat/agents/types'
+
+const STREAMDOWN_PLUGINS = { code, mermaid, cjk }
+
+function AgentInfoRow({
+  label,
+  value,
+}: {
+  label: string
+  value: React.ReactNode
+}) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span
+        className="text-muted-foreground text-xs font-semibold tracking-wider
+          uppercase"
+      >
+        {label}
+      </span>
+      <span className="text-foreground text-sm wrap-break-word">{value}</span>
+    </div>
+  )
+}
+
+export function AgentDetailPage({ agent }: { agent: AgentConfig }) {
+  const navigate = useNavigate()
+  const confirm = useConfirm()
+  const deleteAgent = useDeleteAgent()
+  const duplicateAgent = useDuplicateAgent()
+
+  const isBuiltin = agent.kind === 'builtin'
+  const Icon = isBuiltin ? Bot : Sparkles
+
+  const handleDuplicate = async () => {
+    try {
+      const copy = await duplicateAgent.mutateAsync(agent.id)
+      trackEvent('Agents: duplicate', { source_agent_id: agent.id })
+      if (copy) {
+        toast.success(`Duplicated as "${copy.name}"`)
+        void navigate({
+          to: '/playground/agents/$agentId',
+          params: { agentId: copy.id },
+        })
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      toast.error(`Failed to duplicate agent: ${message}`)
+    }
+  }
+
+  const handleDelete = async () => {
+    const ok = await confirm(
+      `Delete "${agent.name}"? Any chats using it will fall back to the default agent.`,
+      {
+        title: 'Delete agent',
+        isDestructive: true,
+        buttons: { yes: 'Delete', no: 'Cancel' },
+      }
+    )
+    if (!ok) return
+    try {
+      const result = await deleteAgent.mutateAsync(agent.id)
+      trackEvent('Agents: delete', { agent_id: agent.id })
+      if (result.success) {
+        toast.success(`Deleted "${agent.name}"`)
+        void navigate({ to: '/playground/agents' })
+      } else {
+        toast.error(result.error ?? 'Failed to delete agent')
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      toast.error(`Failed to delete agent: ${message}`)
+    }
+  }
+
+  return (
+    <SkillDetailLayout
+      title={agent.name}
+      backTo="/playground/agents"
+      historyBack={false}
+      badges={
+        <>
+          <Badge
+            variant={isBuiltin ? 'secondary' : 'outline'}
+            className="capitalize"
+          >
+            <Icon className="mr-1 h-3 w-3" />
+            {agent.kind}
+          </Badge>
+          {agent.builtinToolsKey && (
+            <Badge variant="outline">
+              <Wrench className="mr-1 h-3 w-3" />
+              {agent.builtinToolsKey} tools
+            </Badge>
+          )}
+        </>
+      }
+      description={agent.description || undefined}
+      actions={
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-wrap items-center gap-3">
+            <Button
+              variant="action"
+              onClick={handleDuplicate}
+              data-testid={`duplicate-agent-${agent.id}`}
+            >
+              <Copy className="mr-1 h-4 w-4" />
+              Duplicate
+            </Button>
+            {!isBuiltin && (
+              <>
+                <Button
+                  variant="outline"
+                  className="rounded-full"
+                  onClick={() =>
+                    void navigate({
+                      to: '/playground/agents/$agentId/edit',
+                      params: { agentId: agent.id },
+                    })
+                  }
+                  data-testid={`edit-agent-${agent.id}`}
+                >
+                  <Pencil className="mr-1 h-4 w-4" />
+                  Edit
+                </Button>
+                <Button
+                  variant="outline"
+                  className="text-destructive hover:text-destructive
+                    rounded-full"
+                  onClick={handleDelete}
+                  data-testid={`delete-agent-${agent.id}`}
+                >
+                  <Trash2 className="mr-1 h-4 w-4" />
+                  Delete
+                </Button>
+              </>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-4 pt-2">
+            <AgentInfoRow
+              label="Agent ID"
+              value={<code className="text-xs">{agent.id}</code>}
+            />
+            <AgentInfoRow
+              label="Default model"
+              value={
+                agent.defaultModel ? (
+                  <code className="text-xs">
+                    {agent.defaultModel.provider} · {agent.defaultModel.model}
+                  </code>
+                ) : (
+                  <span className="text-muted-foreground">
+                    Inherits the model selected in chat
+                  </span>
+                )
+              }
+            />
+            {isBuiltin && (
+              <p className="text-muted-foreground text-xs leading-5">
+                Built-in agents are curated by ToolHive and cannot be edited.
+                Duplicate this agent to create a customisable copy.
+              </p>
+            )}
+          </div>
+        </div>
+      }
+      rightPanel={
+        <>
+          <h4 className="text-foreground text-xl font-semibold tracking-tight">
+            System prompt
+          </h4>
+          <div
+            className="border-border mb-8 rounded-2xl border bg-white p-6
+              dark:bg-transparent"
+          >
+            {agent.instructions.trim().length > 0 ? (
+              <Streamdown
+                plugins={STREAMDOWN_PLUGINS}
+                className={STREAMDOWN_PROSE_CLASS}
+              >
+                {agent.instructions}
+              </Streamdown>
+            ) : (
+              <p className="text-muted-foreground text-sm">
+                This agent has no system prompt yet.
+              </p>
+            )}
+          </div>
+        </>
+      }
+    />
+  )
+}
diff --git a/renderer/src/features/agents/components/agent-form-page.tsx b/renderer/src/features/agents/components/agent-form-page.tsx
new file mode 100644
index 000000000..7505cb5b1
--- /dev/null
+++ b/renderer/src/features/agents/components/agent-form-page.tsx
@@ -0,0 +1,428 @@
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useNavigate } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import z from 'zod/v4'
+import { ArrowLeft, Check, Eye, Pencil, Wrench, X } from 'lucide-react'
+import { Streamdown } from 'streamdown'
+import { code } from '@streamdown/code'
+import { mermaid } from '@streamdown/mermaid'
+import { cjk } from '@streamdown/cjk'
+import { zodV4Resolver } from '@/common/lib/zod-v4-resolver'
+import { Button } from '@/common/components/ui/button'
+import { Input } from '@/common/components/ui/input'
+import { Textarea } from '@/common/components/ui/textarea'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/common/components/ui/form'
+import { LinkViewTransition } from '@/common/components/link-view-transition'
+import { STREAMDOWN_PROSE_CLASS } from '@/common/lib/streamdown-prose'
+import { cn } from '@/common/lib/utils'
+import { trackEvent } from '@/common/lib/analytics'
+import { useCreateAgent, useUpdateAgent } from '../hooks/use-agents'
+import {
+  ModelPicker,
+  type ModelSelection,
+} from '../../chat/components/model-picker'
+import {
+  BUILTIN_TOOL_BUNDLES,
+  type AgentConfig,
+  type BuiltinToolsKey,
+} from '../../../../../main/src/chat/agents/types'
+
+const STREAMDOWN_PLUGINS = { code, mermaid, cjk }
+
+type InstructionsMode = 'edit' | 'preview'
+
+const modelSelectionSchema = z
+  .object({
+    provider: z.string(),
+    model: z.string(),
+  })
+  .nullable()
+
+const builtinToolsKeySchema = z
+  .enum(
+    BUILTIN_TOOL_BUNDLES.map((bundle) => bundle.key) as [
+      BuiltinToolsKey,
+      ...BuiltinToolsKey[],
+    ]
+  )
+  .nullable()
+
+const formSchema = z.object({
+  name: z.string().min(1, 'Name is required').max(80, 'Name is too long'),
+  description: z.string().max(200, 'Description is too long').optional(),
+  instructions: z.string().min(1, 'Instructions are required'),
+  defaultModel: modelSelectionSchema.optional(),
+  builtinToolsKey: builtinToolsKeySchema.optional(),
+})
+
+type FormSchema = z.infer<typeof formSchema>
+
+interface AgentFormPageProps {
+  mode: 'create' | 'edit'
+  agent?: AgentConfig
+}
+
+export function AgentFormPage({ mode, agent }: AgentFormPageProps) {
+  const navigate = useNavigate()
+  const createAgent = useCreateAgent()
+  const updateAgent = useUpdateAgent()
+  const [instructionsMode, setInstructionsMode] =
+    useState<InstructionsMode>('edit')
+
+  const isEdit = mode === 'edit'
+
+  const form = useForm<FormSchema>({
+    resolver: zodV4Resolver(formSchema),
+    defaultValues: {
+      name: agent?.name ?? '',
+      description: agent?.description ?? '',
+      instructions: agent?.instructions ?? '',
+      defaultModel: agent?.defaultModel ?? null,
+      builtinToolsKey: agent?.builtinToolsKey ?? null,
+    },
+  })
+
+  const handleCancel = () => {
+    if (isEdit && agent) {
+      void navigate({
+        to: '/playground/agents/$agentId',
+        params: { agentId: agent.id },
+      })
+    } else {
+      void navigate({ to: '/playground/agents' })
+    }
+  }
+
+  const handleSubmit = async (values: FormSchema) => {
+    const payload = {
+      name: values.name.trim(),
+      description: values.description?.trim() ?? '',
+      instructions: values.instructions,
+      defaultModel: values.defaultModel ?? null,
+      builtinToolsKey: values.builtinToolsKey ?? null,
+    }
+
+    try {
+      if (isEdit && agent) {
+        await updateAgent.mutateAsync({ id: agent.id, input: payload })
+        trackEvent('Agents: update', { agent_id: agent.id })
+        toast.success(`Updated "${payload.name}"`)
+        void navigate({
+          to: '/playground/agents/$agentId',
+          params: { agentId: agent.id },
+        })
+      } else {
+        const created = await createAgent.mutateAsync(payload)
+        trackEvent('Agents: create', { agent_id: created.id })
+        toast.success(`Created "${created.name}"`)
+        void navigate({
+          to: '/playground/agents/$agentId',
+          params: { agentId: created.id },
+        })
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      toast.error(`Failed to save agent: ${message}`)
+    }
+  }
+
+  const isPending = createAgent.isPending || updateAgent.isPending
+  const backTo = isEdit && agent ? undefined : '/playground/agents'
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(handleSubmit)}
+        className="mx-auto w-full max-w-4xl p-6 pb-28"
+      >
+        <div className="mb-6">
+          {backTo ? (
+            <Button asChild variant="ghost" size="sm" className="mb-2 -ml-2">
+              <LinkViewTransition to={backTo}>
+                <ArrowLeft className="mr-1 h-4 w-4" />
+                Back to agents
+              </LinkViewTransition>
+            </Button>
+          ) : agent ? (
+            <Button asChild variant="ghost" size="sm" className="mb-2 -ml-2">
+              <LinkViewTransition
+                to="/playground/agents/$agentId"
+                params={{ agentId: agent.id }}
+              >
+                <ArrowLeft className="mr-1 h-4 w-4" />
+                Back to {agent.name}
+              </LinkViewTransition>
+            </Button>
+          ) : null}
+          <h1 className="text-2xl font-semibold">
+            {isEdit ? `Edit ${agent?.name ?? 'agent'}` : 'New agent'}
+          </h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            Give your agent a name, a description, and the instructions it
+            should follow in every chat.
+          </p>
+        </div>
+
+        <div className="mb-6 grid grid-cols-1 items-start gap-4 md:grid-cols-2">
+          <FormField
+            control={form.control}
+            name="name"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input placeholder="e.g. Release Assistant" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <FormField
+            control={form.control}
+            name="defaultModel"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Default model (optional)</FormLabel>
+                <FormControl>
+                  <ModelPicker
+                    value={field.value ?? null}
+                    onChange={(next: ModelSelection) => field.onChange(next)}
+                    onClear={() => field.onChange(null)}
+                    placeholder="No default model"
+                    triggerClassName="border-input bg-background hover:bg-accent
+                      h-9 w-full justify-between rounded-md border px-3"
+                    data-testid="agent-default-model"
+                  />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+        </div>
+
+        <FormField
+          control={form.control}
+          name="description"
+          render={({ field }) => (
+            <FormItem className="mb-6">
+              <FormLabel>Description</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="Short summary shown in the agent picker."
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="instructions"
+          render={({ field }) => (
+            <FormItem className="mb-6">
+              <div className="flex items-center justify-between">
+                <FormLabel>Instructions (system prompt)</FormLabel>
+                <InstructionsModeToggle
+                  value={instructionsMode}
+                  onChange={setInstructionsMode}
+                />
+              </div>
+              {instructionsMode === 'edit' ? (
+                <FormControl>
+                  <Textarea
+                    placeholder="You are a helpful assistant that..."
+                    className="h-[60vh] min-h-[360px] resize-y font-mono
+                      text-sm"
+                    {...field}
+                  />
+                </FormControl>
+              ) : (
+                <div
+                  className="border-input bg-background h-[60vh] min-h-[360px]
+                    overflow-y-auto rounded-md border p-4"
+                >
+                  {field.value.trim().length > 0 ? (
+                    <Streamdown
+                      plugins={STREAMDOWN_PLUGINS}
+                      className={STREAMDOWN_PROSE_CLASS}
+                    >
+                      {field.value}
+                    </Streamdown>
+                  ) : (
+                    <p className="text-muted-foreground text-sm">
+                      Nothing to preview yet. Switch back to Edit and write the
+                      system prompt.
+                    </p>
+                  )}
+                </div>
+              )}
+              <FormDescription>
+                These instructions are sent as the system prompt on every chat
+                turn. Supports Markdown.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <FormField
+          control={form.control}
+          name="builtinToolsKey"
+          render={({ field }) => (
+            <FormItem className="mt-6">
+              <FormLabel>Built-in tools (optional)</FormLabel>
+              <FormControl>
+                <BuiltinToolsBundlePicker
+                  value={field.value ?? null}
+                  onChange={field.onChange}
+                />
+              </FormControl>
+              <FormDescription>
+                Give this agent access to a curated bundle of ToolHive-provided
+                tools. Leave unselected to use only MCP tools enabled in the
+                chat.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <div
+          className="bg-background/95 sticky bottom-0 mt-6 flex items-center
+            justify-end gap-3 border-t py-4 backdrop-blur"
+        >
+          <Button
+            type="button"
+            variant="outline"
+            onClick={handleCancel}
+            disabled={isPending}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isPending}>
+            {isEdit ? 'Save changes' : 'Create agent'}
+          </Button>
+        </div>
+      </form>
+    </Form>
+  )
+}
+
+function BuiltinToolsBundlePicker({
+  value,
+  onChange,
+}: {
+  value: BuiltinToolsKey | null
+  onChange: (next: BuiltinToolsKey | null) => void
+}) {
+  if (BUILTIN_TOOL_BUNDLES.length === 0) return null
+  return (
+    <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+      {BUILTIN_TOOL_BUNDLES.map(({ key, label, description }) => {
+        const active = value === key
+        return (
+          <button
+            key={key}
+            type="button"
+            role="checkbox"
+            aria-checked={active}
+            onClick={() => onChange(active ? null : key)}
+            data-testid={`builtin-tools-${key}`}
+            className={cn(
+              `group border-input bg-background hover:bg-accent/40 relative flex
+              items-start gap-3 rounded-md border p-3 text-left
+              transition-colors`,
+              active && 'border-primary bg-accent/30'
+            )}
+          >
+            <div
+              className={cn(
+                `bg-muted text-muted-foreground flex h-8 w-8 shrink-0
+                items-center justify-center rounded-md`,
+                active && 'bg-primary text-primary-foreground'
+              )}
+            >
+              <Wrench className="h-4 w-4" />
+            </div>
+            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-sm font-medium">{label}</span>
+                <span
+                  className={cn(
+                    `text-muted-foreground flex h-4 w-4 items-center
+                    justify-center`,
+                    active && 'text-primary'
+                  )}
+                >
+                  {active ? (
+                    <Check className="h-4 w-4" />
+                  ) : (
+                    <X className="h-3 w-3 opacity-40" />
+                  )}
+                </span>
+              </div>
+              <p className="text-muted-foreground text-xs leading-5">
+                {description}
+              </p>
+            </div>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
+
+function InstructionsModeToggle({
+  value,
+  onChange,
+}: {
+  value: InstructionsMode
+  onChange: (next: InstructionsMode) => void
+}) {
+  const options: { id: InstructionsMode; label: string; Icon: typeof Eye }[] = [
+    { id: 'edit', label: 'Edit', Icon: Pencil },
+    { id: 'preview', label: 'Preview', Icon: Eye },
+  ]
+  return (
+    <div
+      role="tablist"
+      aria-label="Instructions view mode"
+      className="bg-muted inline-flex items-center gap-1 rounded-md p-0.5"
+    >
+      {options.map(({ id, label, Icon }) => {
+        const active = value === id
+        return (
+          <button
+            key={id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            onClick={() => onChange(id)}
+            className={cn(
+              `flex items-center gap-1.5 rounded-sm px-2.5 py-1 text-xs
+              font-medium transition-colors`,
+              active
+                ? 'bg-background text-foreground shadow-sm'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <Icon className="h-3.5 w-3.5" />
+            {label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/renderer/src/features/agents/components/agents-page.tsx b/renderer/src/features/agents/components/agents-page.tsx
new file mode 100644
index 000000000..f9ee97985
--- /dev/null
+++ b/renderer/src/features/agents/components/agents-page.tsx
@@ -0,0 +1,209 @@
+import { useMemo, useState } from 'react'
+import { toast } from 'sonner'
+import { useNavigate } from '@tanstack/react-router'
+import { Bot, Copy, Plus, Sparkles } from 'lucide-react'
+import { Button } from '@/common/components/ui/button'
+import { Badge } from '@/common/components/ui/badge'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/common/components/ui/card'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/common/components/ui/tabs'
+import { trackEvent } from '@/common/lib/analytics'
+import { useAgents, useDuplicateAgent } from '../hooks/use-agents'
+import type { AgentConfig } from '../../../../../main/src/chat/agents/types'
+
+type AgentsTab = 'all' | 'builtin' | 'custom'
+
+function AgentCard({
+  agent,
+  onOpen,
+  onDuplicate,
+}: {
+  agent: AgentConfig
+  onOpen: (agent: AgentConfig) => void
+  onDuplicate: (agent: AgentConfig) => void
+}) {
+  const Icon = agent.kind === 'custom' ? Sparkles : Bot
+
+  return (
+    <Card
+      className="hover:border-accent-foreground/40 flex cursor-pointer flex-col
+        transition-colors"
+      onClick={() => onOpen(agent)}
+      data-testid={`agent-card-${agent.id}`}
+    >
+      <CardHeader>
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex min-w-0 items-start gap-2">
+            <Icon className="text-muted-foreground mt-0.5 h-5 w-5 shrink-0" />
+            <div className="min-w-0">
+              <CardTitle className="truncate" title={agent.name}>
+                {agent.name}
+              </CardTitle>
+              <CardDescription className="mt-1 line-clamp-2">
+                {agent.description || 'No description'}
+              </CardDescription>
+            </div>
+          </div>
+          <Badge
+            variant={agent.kind === 'builtin' ? 'secondary' : 'outline'}
+            className="shrink-0 capitalize"
+          >
+            {agent.kind}
+          </Badge>
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1">
+        {agent.defaultModel && (
+          <p className="text-muted-foreground text-xs">
+            Default model:{' '}
+            <span className="font-mono">
+              {agent.defaultModel.provider} · {agent.defaultModel.model}
+            </span>
+          </p>
+        )}
+      </CardContent>
+      <CardFooter className="gap-2">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation()
+            onOpen(agent)
+          }}
+          data-testid={`open-agent-${agent.id}`}
+        >
+          View details
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation()
+            onDuplicate(agent)
+          }}
+          data-testid={`duplicate-agent-${agent.id}`}
+        >
+          <Copy className="mr-2 h-3.5 w-3.5" />
+          Duplicate
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
+
+export function AgentsPage() {
+  const navigate = useNavigate()
+  const { data: agents = [], isLoading } = useAgents()
+  const duplicateAgent = useDuplicateAgent()
+
+  const [tab, setTab] = useState<AgentsTab>('all')
+
+  const visibleAgents = useMemo(() => {
+    if (tab === 'all') return agents
+    return agents.filter((a) => a.kind === tab)
+  }, [agents, tab])
+
+  const openCreate = () => {
+    void navigate({ to: '/playground/agents/new' })
+  }
+
+  const openDetail = (agent: AgentConfig) => {
+    void navigate({
+      to: '/playground/agents/$agentId',
+      params: { agentId: agent.id },
+    })
+  }
+
+  const handleDuplicate = async (agent: AgentConfig) => {
+    try {
+      const copy = await duplicateAgent.mutateAsync(agent.id)
+      trackEvent('Agents: duplicate', { source_agent_id: agent.id })
+      if (copy) {
+        toast.success(`Duplicated as "${copy.name}"`)
+        void navigate({
+          to: '/playground/agents/$agentId',
+          params: { agentId: copy.id },
+        })
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error'
+      toast.error(`Failed to duplicate agent: ${message}`)
+    }
+  }
+
+  return (
+    <div className="mx-auto flex h-full w-full max-w-6xl flex-col p-6">
+      <div className="mb-6 flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-semibold">Agents</h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            Configure the personalities and instructions used by the Playground.
+            Built-in agents can be duplicated and customised.
+          </p>
+        </div>
+        <Button onClick={openCreate} data-testid="create-agent">
+          <Plus className="mr-2 h-4 w-4" />
+          New agent
+        </Button>
+      </div>
+
+      <Tabs
+        value={tab}
+        onValueChange={(value) => setTab(value as AgentsTab)}
+        className="flex min-h-0 flex-1 flex-col"
+      >
+        <TabsList className="mb-4 self-start">
+          <TabsTrigger value="all">All</TabsTrigger>
+          <TabsTrigger value="builtin">Built-in</TabsTrigger>
+          <TabsTrigger value="custom">Custom</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value={tab} className="min-h-0 flex-1 overflow-auto">
+          {isLoading ? (
+            <div className="text-muted-foreground text-sm">Loading agents…</div>
+          ) : visibleAgents.length === 0 ? (
+            <div
+              className="mx-auto flex max-w-md flex-col items-center
+                justify-center py-16 text-center"
+            >
+              <Bot className="text-muted-foreground mb-4 h-12 w-12" />
+              <h3 className="text-lg font-semibold">No agents yet</h3>
+              <p className="text-muted-foreground mt-1 text-sm">
+                Create a custom agent or duplicate a built-in one to get
+                started.
+              </p>
+              <Button onClick={openCreate} className="mt-6">
+                <Plus className="mr-2 h-4 w-4" />
+                New agent
+              </Button>
+            </div>
+          ) : (
+            <div
+              className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3"
+            >
+              {visibleAgents.map((agent) => (
+                <AgentCard
+                  key={agent.id}
+                  agent={agent}
+                  onOpen={openDetail}
+                  onDuplicate={handleDuplicate}
+                />
+              ))}
+            </div>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
diff --git a/renderer/src/features/agents/hooks/__tests__/use-agents.test.tsx b/renderer/src/features/agents/hooks/__tests__/use-agents.test.tsx
new file mode 100644
index 000000000..99dafcce2
--- /dev/null
+++ b/renderer/src/features/agents/hooks/__tests__/use-agents.test.tsx
@@ -0,0 +1,242 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  useAgent,
+  useAgents,
+  useCreateAgent,
+  useDeleteAgent,
+  useDuplicateAgent,
+  useSetThreadAgent,
+  useThreadAgentId,
+  useUpdateAgent,
+} from '../use-agents'
+import type {
+  AgentConfig,
+  CreateAgentInput,
+  UpdateAgentInput,
+} from '../../../../../../main/src/chat/agents/types'
+
+const mockAgentsApi = {
+  list: vi.fn(),
+  get: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  delete: vi.fn(),
+  duplicate: vi.fn(),
+  setThreadAgent: vi.fn(),
+  getThreadAgentId: vi.fn(),
+}
+
+const sampleAgent: AgentConfig = {
+  id: 'custom.my-agent',
+  kind: 'custom',
+  name: 'My agent',
+  description: 'desc',
+  instructions: 'go',
+  builtinToolsKey: null,
+  createdAt: 0,
+  updatedAt: 0,
+}
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  mockAgentsApi.setThreadAgent.mockResolvedValue({ success: true })
+  mockAgentsApi.list.mockResolvedValue([sampleAgent])
+  mockAgentsApi.get.mockResolvedValue(sampleAgent)
+  mockAgentsApi.create.mockResolvedValue(sampleAgent)
+  mockAgentsApi.update.mockResolvedValue(sampleAgent)
+  mockAgentsApi.delete.mockResolvedValue({ success: true })
+  mockAgentsApi.duplicate.mockResolvedValue(sampleAgent)
+  mockAgentsApi.getThreadAgentId.mockResolvedValue(null)
+
+  window.electronAPI = {
+    ...(window.electronAPI ?? {}),
+    chat: {
+      ...(window.electronAPI?.chat ?? {}),
+      agents: mockAgentsApi,
+    },
+  } as unknown as typeof window.electronAPI
+})
+
+function makeWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+  const wrapper = ({ children }: { children: React.ReactNode }) =>
+    React.createElement(QueryClientProvider, { client: queryClient }, children)
+  return { wrapper, queryClient }
+}
+
+describe('useAgents', () => {
+  it('lists agents via the IPC layer', async () => {
+    const { wrapper } = makeWrapper()
+    const { result } = renderHook(() => useAgents(), { wrapper })
+
+    await waitFor(() => expect(result.current.data).toEqual([sampleAgent]))
+    expect(mockAgentsApi.list).toHaveBeenCalled()
+  })
+})
+
+describe('useAgent', () => {
+  it('does not fetch until an id is provided', () => {
+    const { wrapper } = makeWrapper()
+    renderHook(() => useAgent(undefined), { wrapper })
+    expect(mockAgentsApi.get).not.toHaveBeenCalled()
+  })
+
+  it('fetches the agent for the provided id', async () => {
+    const { wrapper } = makeWrapper()
+    const { result } = renderHook(() => useAgent('custom.my-agent'), {
+      wrapper,
+    })
+
+    await waitFor(() => expect(result.current.data).toEqual(sampleAgent))
+    expect(mockAgentsApi.get).toHaveBeenCalledWith('custom.my-agent')
+  })
+})
+
+describe('useThreadAgentId', () => {
+  it('does not query until a threadId is provided', () => {
+    const { wrapper } = makeWrapper()
+    renderHook(() => useThreadAgentId(undefined), { wrapper })
+    expect(mockAgentsApi.getThreadAgentId).not.toHaveBeenCalled()
+  })
+
+  it('returns the assigned thread agent id from the IPC layer', async () => {
+    mockAgentsApi.getThreadAgentId.mockResolvedValue('builtin.skills')
+    const { wrapper } = makeWrapper()
+    const { result } = renderHook(() => useThreadAgentId('thread-1'), {
+      wrapper,
+    })
+
+    await waitFor(() => expect(result.current.data).toBe('builtin.skills'))
+    expect(mockAgentsApi.getThreadAgentId).toHaveBeenCalledWith('thread-1')
+  })
+})
+
+describe('useCreateAgent', () => {
+  it('creates an agent and invalidates the list query', async () => {
+    const { wrapper, queryClient } = makeWrapper()
+    const invalidate = vi.spyOn(queryClient, 'invalidateQueries')
+    const { result } = renderHook(() => useCreateAgent(), { wrapper })
+
+    const input: CreateAgentInput = {
+      name: 'My agent',
+      description: 'desc',
+      instructions: 'go',
+    }
+    result.current.mutate(input)
+
+    await waitFor(() => {
+      expect(mockAgentsApi.create).toHaveBeenCalledWith(input)
+      expect(invalidate).toHaveBeenCalledWith({ queryKey: ['agents'] })
+    })
+  })
+})
+
+describe('useUpdateAgent', () => {
+  it('updates an agent and invalidates list + detail queries', async () => {
+    const { wrapper, queryClient } = makeWrapper()
+    const invalidate = vi.spyOn(queryClient, 'invalidateQueries')
+    const { result } = renderHook(() => useUpdateAgent(), { wrapper })
+
+    const input: UpdateAgentInput = { name: 'Renamed' }
+    result.current.mutate({ id: 'custom.my-agent', input })
+
+    await waitFor(() => {
+      expect(mockAgentsApi.update).toHaveBeenCalledWith(
+        'custom.my-agent',
+        input
+      )
+      expect(invalidate).toHaveBeenCalledWith({ queryKey: ['agents'] })
+      expect(invalidate).toHaveBeenCalledWith({
+        queryKey: ['agents', 'custom.my-agent'],
+      })
+    })
+  })
+})
+
+describe('useDeleteAgent', () => {
+  it('deletes an agent and invalidates the list query', async () => {
+    const { wrapper, queryClient } = makeWrapper()
+    const invalidate = vi.spyOn(queryClient, 'invalidateQueries')
+    const { result } = renderHook(() => useDeleteAgent(), { wrapper })
+
+    result.current.mutate('custom.my-agent')
+
+    await waitFor(() => {
+      expect(mockAgentsApi.delete).toHaveBeenCalledWith('custom.my-agent')
+      expect(invalidate).toHaveBeenCalledWith({ queryKey: ['agents'] })
+    })
+  })
+})
+
+describe('useDuplicateAgent', () => {
+  it('duplicates an agent and invalidates the list query', async () => {
+    const { wrapper, queryClient } = makeWrapper()
+    const invalidate = vi.spyOn(queryClient, 'invalidateQueries')
+    const { result } = renderHook(() => useDuplicateAgent(), { wrapper })
+
+    result.current.mutate('builtin.toolhive-assistant')
+
+    await waitFor(() => {
+      expect(mockAgentsApi.duplicate).toHaveBeenCalledWith(
+        'builtin.toolhive-assistant'
+      )
+      expect(invalidate).toHaveBeenCalledWith({ queryKey: ['agents'] })
+    })
+  })
+})
+
+describe('useSetThreadAgent', () => {
+  function renderSetThreadAgent() {
+    const { wrapper, queryClient } = makeWrapper()
+    const result = renderHook(() => useSetThreadAgent(), { wrapper })
+    return { ...result, queryClient }
+  }
+
+  it('invalidates the thread agent and the canonical chat-thread query keys on success', async () => {
+    const { result, queryClient } = renderSetThreadAgent()
+    const invalidateSpy = vi.spyOn(queryClient, 'invalidateQueries')
+
+    result.current.mutate({ threadId: 'thread-1', agentId: 'builtin.skills' })
+
+    await waitFor(() => {
+      expect(mockAgentsApi.setThreadAgent).toHaveBeenCalledWith(
+        'thread-1',
+        'builtin.skills'
+      )
+    })
+
+    await waitFor(() => {
+      expect(invalidateSpy).toHaveBeenCalledWith({
+        queryKey: ['agents', 'thread', 'thread-1'],
+      })
+      expect(invalidateSpy).toHaveBeenCalledWith({
+        queryKey: ['chat', 'thread', 'thread-1'],
+      })
+    })
+
+    // Guard against the prior bug where ['chat-thread'] (no array path) was used.
+    const calls = invalidateSpy.mock.calls.map(([arg]) => arg?.queryKey)
+    expect(calls).not.toContainEqual(['chat-thread'])
+  })
+
+  it('forwards a null agentId to the IPC layer for clearing the agent', async () => {
+    const { result } = renderSetThreadAgent()
+
+    result.current.mutate({ threadId: 'thread-9', agentId: null })
+
+    await waitFor(() => {
+      expect(mockAgentsApi.setThreadAgent).toHaveBeenCalledWith(
+        'thread-9',
+        null
+      )
+    })
+  })
+})
diff --git a/renderer/src/features/agents/hooks/use-agents.ts b/renderer/src/features/agents/hooks/use-agents.ts
new file mode 100644
index 000000000..ba026fbb7
--- /dev/null
+++ b/renderer/src/features/agents/hooks/use-agents.ts
@@ -0,0 +1,109 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import type {
+  AgentConfig,
+  CreateAgentInput,
+  UpdateAgentInput,
+} from '../../../../../main/src/chat/agents/types'
+
+const AGENT_QUERY_KEYS = {
+  list: ['agents'] as const,
+  detail: (id: string) => ['agents', id] as const,
+  threadAgent: (threadId: string) => ['agents', 'thread', threadId] as const,
+}
+
+export function useAgents() {
+  return useQuery({
+    queryKey: AGENT_QUERY_KEYS.list,
+    queryFn: (): Promise<AgentConfig[]> =>
+      window.electronAPI.chat.agents.list(),
+    refetchOnWindowFocus: false,
+  })
+}
+
+export function useAgent(id: string | undefined) {
+  return useQuery({
+    queryKey: id ? AGENT_QUERY_KEYS.detail(id) : ['agents', 'none'],
+    queryFn: (): Promise<AgentConfig | null> =>
+      window.electronAPI.chat.agents.get(id!),
+    enabled: !!id,
+    refetchOnWindowFocus: false,
+  })
+}
+
+export function useThreadAgentId(threadId: string | undefined) {
+  return useQuery({
+    queryKey: threadId
+      ? AGENT_QUERY_KEYS.threadAgent(threadId)
+      : ['agents', 'thread', 'none'],
+    queryFn: (): Promise<string | null> =>
+      window.electronAPI.chat.agents.getThreadAgentId(threadId!),
+    enabled: !!threadId,
+    refetchOnWindowFocus: false,
+  })
+}
+
+export function useCreateAgent() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (input: CreateAgentInput) =>
+      window.electronAPI.chat.agents.create(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: AGENT_QUERY_KEYS.list })
+    },
+  })
+}
+
+export function useUpdateAgent() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({ id, input }: { id: string; input: UpdateAgentInput }) =>
+      window.electronAPI.chat.agents.update(id, input),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: AGENT_QUERY_KEYS.list })
+      queryClient.invalidateQueries({
+        queryKey: AGENT_QUERY_KEYS.detail(variables.id),
+      })
+    },
+  })
+}
+
+export function useDeleteAgent() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) => window.electronAPI.chat.agents.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: AGENT_QUERY_KEYS.list })
+    },
+  })
+}
+
+export function useDuplicateAgent() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (id: string) => window.electronAPI.chat.agents.duplicate(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: AGENT_QUERY_KEYS.list })
+    },
+  })
+}
+
+export function useSetThreadAgent() {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: ({
+      threadId,
+      agentId,
+    }: {
+      threadId: string
+      agentId: string | null
+    }) => window.electronAPI.chat.agents.setThreadAgent(threadId, agentId),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: AGENT_QUERY_KEYS.threadAgent(variables.threadId),
+      })
+      queryClient.invalidateQueries({
+        queryKey: ['chat', 'thread', variables.threadId],
+      })
+    },
+  })
+}
diff --git a/renderer/src/features/chat/components/__tests__/agent-selector.test.tsx b/renderer/src/features/chat/components/__tests__/agent-selector.test.tsx
new file mode 100644
index 000000000..c427b3d1d
--- /dev/null
+++ b/renderer/src/features/chat/components/__tests__/agent-selector.test.tsx
@@ -0,0 +1,211 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { vi, describe, beforeEach, it, expect } from 'vitest'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from 'react'
+import { AgentSelector } from '../agent-selector'
+import type { AgentConfig } from '../../../../../../main/src/chat/agents/types'
+
+// Radix DropdownMenu relies on pointer capture / ResizeObserver APIs that
+// jsdom does not provide. Stub them so the dropdown can open in tests.
+Object.defineProperty(Element.prototype, 'hasPointerCapture', {
+  value: vi.fn().mockReturnValue(false),
+  writable: true,
+})
+Object.defineProperty(Element.prototype, 'setPointerCapture', {
+  value: vi.fn(),
+  writable: true,
+})
+Object.defineProperty(Element.prototype, 'releasePointerCapture', {
+  value: vi.fn(),
+  writable: true,
+})
+Object.defineProperty(Element.prototype, 'scrollIntoView', {
+  value: vi.fn(),
+  writable: true,
+})
+
+vi.mock('@/common/lib/analytics', () => ({
+  trackEvent: vi.fn(),
+}))
+
+const mockNavigate = vi.fn()
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: () => mockNavigate,
+}))
+
+const mockAgentsApi = {
+  list: vi.fn(),
+  get: vi.fn(),
+  create: vi.fn(),
+  update: vi.fn(),
+  delete: vi.fn(),
+  duplicate: vi.fn(),
+  setThreadAgent: vi.fn(),
+  getThreadAgentId: vi.fn(),
+}
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  })
+  return ({ children }: { children: React.ReactNode }) =>
+    React.createElement(QueryClientProvider, { client: queryClient }, children)
+}
+
+const builtinToolhive: AgentConfig = {
+  id: 'builtin.toolhive-assistant',
+  kind: 'builtin',
+  name: 'ToolHive Assistant',
+  description: 'Default assistant',
+  instructions: 'You are helpful.',
+  builtinToolsKey: null,
+  createdAt: 0,
+  updatedAt: 0,
+}
+
+const builtinSkills: AgentConfig = {
+  id: 'builtin.skills',
+  kind: 'builtin',
+  name: 'Skills Builder',
+  description: 'Build skills',
+  instructions: 'Help with skills.',
+  builtinToolsKey: 'skills',
+  createdAt: 0,
+  updatedAt: 0,
+}
+
+const customAgent: AgentConfig = {
+  id: 'custom.my-agent',
+  kind: 'custom',
+  name: 'My custom agent',
+  description: 'Custom description',
+  instructions: 'Do cool things.',
+  builtinToolsKey: null,
+  createdAt: 0,
+  updatedAt: 0,
+}
+
+describe('AgentSelector', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    window.electronAPI = {
+      ...(window.electronAPI ?? {}),
+      chat: {
+        ...(window.electronAPI?.chat ?? {}),
+        agents: mockAgentsApi,
+      },
+    } as unknown as typeof window.electronAPI
+
+    mockAgentsApi.list.mockResolvedValue([
+      builtinToolhive,
+      builtinSkills,
+      customAgent,
+    ])
+    mockAgentsApi.getThreadAgentId.mockResolvedValue(null)
+    mockAgentsApi.setThreadAgent.mockResolvedValue({ success: true })
+  })
+
+  it('renders the default agent name when no thread agent is set', async () => {
+    render(<AgentSelector threadId="thread-1" />, {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('agent-selector')).toHaveTextContent(
+        /ToolHive Assistant/i
+      )
+    })
+  })
+
+  it('renders the assigned thread agent name', async () => {
+    mockAgentsApi.getThreadAgentId.mockResolvedValue('custom.my-agent')
+    render(<AgentSelector threadId="thread-1" />, {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('agent-selector')).toHaveTextContent(
+        /My custom agent/i
+      )
+    })
+  })
+
+  it('switches the thread agent when the user picks a new one', async () => {
+    const user = userEvent.setup()
+    render(<AgentSelector threadId="thread-1" />, {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('agent-selector')).not.toBeDisabled()
+    })
+
+    await user.click(screen.getByTestId('agent-selector'))
+
+    const skillsItem = await screen.findByText('Skills Builder')
+    await user.click(skillsItem)
+
+    await waitFor(() => {
+      expect(mockAgentsApi.setThreadAgent).toHaveBeenCalledWith(
+        'thread-1',
+        'builtin.skills'
+      )
+    })
+  })
+
+  it('navigates to /playground/agents when "Manage agents" is clicked', async () => {
+    const user = userEvent.setup()
+    render(<AgentSelector threadId="thread-1" />, {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('agent-selector')).not.toBeDisabled()
+    })
+
+    await user.click(screen.getByTestId('agent-selector'))
+    const manage = await screen.findByText('Manage agents')
+    await user.click(manage)
+
+    expect(mockNavigate).toHaveBeenCalledWith({ to: '/playground/agents' })
+  })
+
+  it('does not mutate when clicking the already-selected agent', async () => {
+    const user = userEvent.setup()
+    mockAgentsApi.getThreadAgentId.mockResolvedValue(
+      'builtin.toolhive-assistant'
+    )
+    render(<AgentSelector threadId="thread-1" />, {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('agent-selector')).toHaveTextContent(
+        /ToolHive Assistant/i
+      )
+    })
+
+    await user.click(screen.getByTestId('agent-selector'))
+    const menuItems = await screen.findAllByRole('menuitem')
+    const toolhiveItem = menuItems.find((el) =>
+      el.textContent?.includes('ToolHive Assistant')
+    )!
+    await user.click(toolhiveItem)
+
+    expect(mockAgentsApi.setThreadAgent).not.toHaveBeenCalled()
+  })
+
+  it('is disabled when no threadId is provided', async () => {
+    render(<AgentSelector threadId={null} />, {
+      wrapper: createWrapper(),
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('agent-selector')).toBeDisabled()
+    })
+  })
+})
diff --git a/renderer/src/features/chat/components/__tests__/model-picker.test.tsx b/renderer/src/features/chat/components/__tests__/model-picker.test.tsx
new file mode 100644
index 000000000..8645c1dcf
--- /dev/null
+++ b/renderer/src/features/chat/components/__tests__/model-picker.test.tsx
@@ -0,0 +1,176 @@
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import React from 'react'
+import { ModelPicker } from '../model-picker'
+
+Object.defineProperty(Element.prototype, 'hasPointerCapture', {
+  value: vi.fn().mockReturnValue(false),
+  writable: true,
+})
+Object.defineProperty(Element.prototype, 'setPointerCapture', {
+  value: vi.fn(),
+  writable: true,
+})
+Object.defineProperty(Element.prototype, 'releasePointerCapture', {
+  value: vi.fn(),
+  writable: true,
+})
+Object.defineProperty(Element.prototype, 'scrollIntoView', {
+  value: vi.fn(),
+  writable: true,
+})
+
+vi.mock('../provider-icons', () => ({
+  getProviderIcon: (id: string) => <span data-testid={`provider-icon-${id}`} />,
+}))
+
+const mockChatAPI = {
+  getProviders: vi.fn(),
+  getSettings: vi.fn(),
+}
+
+function renderPicker(
+  props: Partial<React.ComponentProps<typeof ModelPicker>> = {}
+) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  })
+  const wrapper = ({ children }: { children: React.ReactNode }) =>
+    React.createElement(QueryClientProvider, { client: queryClient }, children)
+  return render(<ModelPicker value={null} onChange={vi.fn()} {...props} />, {
+    wrapper,
+  })
+}
+
+describe('ModelPicker', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    window.electronAPI = {
+      ...(window.electronAPI ?? {}),
+      chat: {
+        ...(window.electronAPI?.chat ?? {}),
+        ...mockChatAPI,
+      },
+    } as unknown as typeof window.electronAPI
+
+    mockChatAPI.getProviders.mockResolvedValue([
+      { id: 'openai', name: 'OpenAI', models: ['gpt-4o', 'gpt-4o-mini'] },
+      {
+        id: 'anthropic',
+        name: 'Anthropic',
+        models: ['claude-4-sonnet', 'claude-4-opus'],
+      },
+    ])
+    mockChatAPI.getSettings.mockResolvedValue({ apiKey: 'sk-test' })
+  })
+
+  it('renders the placeholder when value is null', async () => {
+    renderPicker({ placeholder: 'Pick a model' })
+    expect(await screen.findByText('Pick a model')).toBeInTheDocument()
+  })
+
+  it('renders the selected model label when value is set', async () => {
+    renderPicker({ value: { provider: 'openai', model: 'gpt-4o' } })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('model-selector')).toHaveTextContent('gpt-4o')
+    })
+  })
+
+  it('disables the trigger while providers are loading', async () => {
+    let resolveProviders: (value: unknown) => void = () => {}
+    mockChatAPI.getProviders.mockImplementation(
+      () =>
+        new Promise((res) => {
+          resolveProviders = res
+        })
+    )
+
+    renderPicker()
+    expect(screen.getByTestId('model-selector')).toBeDisabled()
+
+    resolveProviders([])
+    await waitFor(() => {
+      expect(screen.getByTestId('model-selector')).not.toBeDisabled()
+    })
+  })
+
+  it('renders only providers that have credentials in the dropdown', async () => {
+    mockChatAPI.getSettings.mockImplementation(async (id: string) =>
+      id === 'openai' ? { apiKey: 'sk-test' } : { apiKey: '' }
+    )
+
+    renderPicker()
+    await waitFor(() => {
+      expect(screen.getByTestId('model-selector')).not.toBeDisabled()
+    })
+
+    await userEvent.click(screen.getByTestId('model-selector'))
+    expect(await screen.findByText('OpenAI')).toBeInTheDocument()
+    expect(screen.queryByText('Anthropic')).not.toBeInTheDocument()
+  })
+
+  it('calls onChange when a model is picked from a provider submenu', async () => {
+    const onChange = vi.fn()
+    renderPicker({ onChange })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('model-selector')).not.toBeDisabled()
+    })
+
+    await userEvent.click(screen.getByTestId('model-selector'))
+    await userEvent.click(await screen.findByText('OpenAI'))
+    await userEvent.click(await screen.findByText('gpt-4o-mini'))
+
+    expect(onChange).toHaveBeenCalledWith({
+      provider: 'openai',
+      model: 'gpt-4o-mini',
+    })
+  })
+
+  it('shows the clear option only when value and onClear are set', async () => {
+    const onClear = vi.fn()
+    renderPicker({
+      value: { provider: 'openai', model: 'gpt-4o' },
+      onClear,
+      clearLabel: 'No default model',
+    })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('model-selector')).not.toBeDisabled()
+    })
+
+    await userEvent.click(screen.getByTestId('model-selector'))
+    const clear = await screen.findByText('No default model')
+    await userEvent.click(clear)
+
+    expect(onClear).toHaveBeenCalled()
+  })
+
+  it('does not show the clear option when value is null', async () => {
+    renderPicker({ value: null, onClear: vi.fn() })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('model-selector')).not.toBeDisabled()
+    })
+
+    await userEvent.click(screen.getByTestId('model-selector'))
+    expect(screen.queryByText(/no default model/i)).not.toBeInTheDocument()
+  })
+
+  it('renders Provider Settings entry only when onOpenSettings is provided', async () => {
+    const onOpenSettings = vi.fn()
+    renderPicker({ onOpenSettings })
+
+    await waitFor(() => {
+      expect(screen.getByTestId('model-selector')).not.toBeDisabled()
+    })
+
+    await userEvent.click(screen.getByTestId('model-selector'))
+    const settings = await screen.findByText('Provider Settings')
+    await userEvent.click(settings)
+    expect(onOpenSettings).toHaveBeenCalled()
+  })
+})
diff --git a/renderer/src/features/chat/components/__tests__/playground-sidebar.test.tsx b/renderer/src/features/chat/components/__tests__/playground-sidebar.test.tsx
index 6e016b151..c31863faf 100644
--- a/renderer/src/features/chat/components/__tests__/playground-sidebar.test.tsx
+++ b/renderer/src/features/chat/components/__tests__/playground-sidebar.test.tsx
@@ -1,6 +1,7 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { render, screen, within } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import type { ReactNode } from 'react'
 import { PlaygroundSidebar } from '../playground-sidebar'
 import type { PlaygroundThread } from '../../hooks/use-playground-threads'
 
@@ -9,6 +10,30 @@ vi.mock('@/common/hooks/use-confirm', () => ({
   useConfirm: () => mockConfirm,
 }))
 
+const mockUseFeatureFlag = vi.fn()
+vi.mock('@/common/hooks/use-feature-flag', () => ({
+  useFeatureFlag: (key: string) => mockUseFeatureFlag(key),
+}))
+
+vi.mock('@tanstack/react-router', () => ({
+  Link: ({
+    children,
+    to,
+    className,
+    ...rest
+  }: {
+    children: ReactNode
+    to: string
+    className?: string
+    [key: string]: unknown
+  }) => (
+    <a href={to} className={className} {...rest}>
+      {children}
+    </a>
+  ),
+  useRouterState: () => '/playground/chat/thread-1',
+}))
+
 const NOW = new Date('2024-01-15T12:00:00Z').getTime()
 
 const makeThread = (
@@ -39,6 +64,8 @@ function renderSidebar(props: Partial<typeof defaultProps> = {}) {
 describe('PlaygroundSidebar', () => {
   beforeEach(() => {
     mockConfirm.mockResolvedValue(true)
+    mockUseFeatureFlag.mockReset()
+    mockUseFeatureFlag.mockReturnValue(false)
     // Reset all callback mocks
     Object.assign(defaultProps, {
       onSelectThread: vi.fn(),
@@ -49,6 +76,28 @@ describe('PlaygroundSidebar', () => {
     })
   })
 
+  describe('agents feature flag', () => {
+    it('hides the Agents link when the agents feature flag is off', () => {
+      mockUseFeatureFlag.mockImplementation((key: string) =>
+        key === 'agents' ? false : false
+      )
+      renderSidebar()
+      expect(
+        screen.queryByRole('link', { name: /agents/i })
+      ).not.toBeInTheDocument()
+    })
+
+    it('shows the Agents link when the agents feature flag is on', () => {
+      mockUseFeatureFlag.mockImplementation((key: string) =>
+        key === 'agents' ? true : false
+      )
+      renderSidebar()
+      const link = screen.getByRole('link', { name: /agents/i })
+      expect(link).toBeInTheDocument()
+      expect(link).toHaveAttribute('href', '/playground/agents')
+    })
+  })
+
   describe('thread list', () => {
     it('renders thread titles', () => {
       renderSidebar({
diff --git a/renderer/src/features/chat/components/agent-selector.tsx b/renderer/src/features/chat/components/agent-selector.tsx
new file mode 100644
index 000000000..86ee33e1d
--- /dev/null
+++ b/renderer/src/features/chat/components/agent-selector.tsx
@@ -0,0 +1,162 @@
+import { useMemo } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { Bot, Check, ChevronDown, Settings2, Sparkles } from 'lucide-react'
+import { Button } from '@/common/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/common/components/ui/dropdown-menu'
+import { trackEvent } from '@/common/lib/analytics'
+import {
+  useAgents,
+  useSetThreadAgent,
+  useThreadAgentId,
+} from '../../agents/hooks/use-agents'
+import { DEFAULT_AGENT_ID } from '../../../../../main/src/chat/agents/types'
+import type { AgentConfig } from '../../../../../main/src/chat/agents/types'
+
+interface AgentSelectorProps {
+  threadId?: string | null
+}
+
+function getAgentIcon(agent: AgentConfig | undefined) {
+  if (!agent) return <Bot className="h-4 w-4" />
+  if (agent.kind === 'custom') return <Sparkles className="h-4 w-4" />
+  return <Bot className="h-4 w-4" />
+}
+
+export function AgentSelector({ threadId }: AgentSelectorProps) {
+  const navigate = useNavigate()
+  const { data: agents = [], isLoading } = useAgents()
+  const { data: threadAgentId } = useThreadAgentId(threadId ?? undefined)
+  const setThreadAgent = useSetThreadAgent()
+
+  const selectedAgentId = threadAgentId || DEFAULT_AGENT_ID
+  const selectedAgent = useMemo(
+    () => agents.find((a) => a.id === selectedAgentId),
+    [agents, selectedAgentId]
+  )
+
+  const builtinAgents = useMemo(
+    () => agents.filter((a) => a.kind === 'builtin'),
+    [agents]
+  )
+  const customAgents = useMemo(
+    () => agents.filter((a) => a.kind === 'custom'),
+    [agents]
+  )
+
+  const handleSelect = (agentId: string) => {
+    if (!threadId) return
+    if (agentId === selectedAgentId) return
+    trackEvent(`Playground: select agent ${agentId}`)
+    setThreadAgent.mutate({ threadId, agentId })
+  }
+
+  const handleManage = () => {
+    trackEvent('Playground: open agents page')
+    navigate({ to: '/playground/agents' })
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className="h-8 justify-between gap-1 px-2 has-[>svg]:px-2"
+          disabled={isLoading || !threadId}
+          data-testid="agent-selector"
+          title={selectedAgent?.description ?? 'Select an agent'}
+        >
+          <div className="flex min-w-0 items-center gap-1.5">
+            {getAgentIcon(selectedAgent)}
+            <span className="max-w-32 truncate text-sm">
+              {selectedAgent?.name ?? 'Agent'}
+            </span>
+          </div>
+          <ChevronDown className="h-4 w-4 opacity-50" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-72">
+        <DropdownMenuLabel className="flex items-center gap-2">
+          <Bot className="h-4 w-4" />
+          Agents
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+
+        <DropdownMenuLabel className="text-muted-foreground text-xs">
+          Built-in
+        </DropdownMenuLabel>
+        {builtinAgents.map((agent) => {
+          const isSelected = agent.id === selectedAgentId
+          return (
+            <DropdownMenuItem
+              key={agent.id}
+              onClick={() => handleSelect(agent.id)}
+              className="flex cursor-pointer items-start gap-2"
+            >
+              <div className="mt-0.5 h-4 w-4 shrink-0">
+                {isSelected && <Check className="h-4 w-4" />}
+              </div>
+              <div className="flex min-w-0 flex-col">
+                <span className="truncate text-sm font-medium">
+                  {agent.name}
+                </span>
+                {agent.description && (
+                  <span className="text-muted-foreground line-clamp-2 text-xs">
+                    {agent.description}
+                  </span>
+                )}
+              </div>
+            </DropdownMenuItem>
+          )
+        })}
+
+        {customAgents.length > 0 && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel className="text-muted-foreground text-xs">
+              Custom
+            </DropdownMenuLabel>
+            {customAgents.map((agent) => {
+              const isSelected = agent.id === selectedAgentId
+              return (
+                <DropdownMenuItem
+                  key={agent.id}
+                  onClick={() => handleSelect(agent.id)}
+                  className="flex cursor-pointer items-start gap-2"
+                >
+                  <div className="mt-0.5 h-4 w-4 shrink-0">
+                    {isSelected && <Check className="h-4 w-4" />}
+                  </div>
+                  <div className="flex min-w-0 flex-col">
+                    <span className="truncate text-sm font-medium">
+                      {agent.name}
+                    </span>
+                    {agent.description && (
+                      <span
+                        className="text-muted-foreground line-clamp-2 text-xs"
+                      >
+                        {agent.description}
+                      </span>
+                    )}
+                  </div>
+                </DropdownMenuItem>
+              )
+            })}
+          </>
+        )}
+
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={handleManage} className="cursor-pointer">
+          <Settings2 className="mr-2 h-4 w-4" />
+          Manage agents
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/renderer/src/features/chat/components/chat-input-prompt.tsx b/renderer/src/features/chat/components/chat-input-prompt.tsx
index e29e8f9c6..6e6df4e7f 100644
--- a/renderer/src/features/chat/components/chat-input-prompt.tsx
+++ b/renderer/src/features/chat/components/chat-input-prompt.tsx
@@ -25,10 +25,13 @@ import {
 } from '@/common/components/ui/tooltip'
 import { ModelSelector } from './model-selector'
 import { McpServerSelector } from './mcp-server-selector'
+import { AgentSelector } from './agent-selector'
 import type { ChatSettings } from '../types'
 import { toast } from 'sonner'
 import { toastVariants } from '@/common/lib/toast'
 import { useThreadDraft } from '../hooks/use-thread-draft'
+import { useFeatureFlag } from '@/common/hooks/use-feature-flag'
+import { featureFlagKeys } from '@utils/feature-flags'
 
 const errorToastConfig = {
   max_files: {
@@ -75,12 +78,14 @@ function InputWithAttachments({
   handleProviderChange,
   hasProviderAndModel,
   hasMessages,
+  threadId,
 }: Omit<ChatInputProps, 'onSendMessage'> & {
   text: string
   setText: (text: string) => void
 }) {
   const attachments = usePromptInputAttachments()
   const prevTextRef = useRef(text)
+  const isAgentsEnabled = useFeatureFlag(featureFlagKeys.AGENTS)
 
   // Clear attachments when text is cleared and message is ready
   useEffect(() => {
@@ -137,7 +142,7 @@ function InputWithAttachments({
         />
       </PromptInputBody>
       <PromptInputToolbar>
-        <PromptInputTools>
+        <PromptInputTools className="gap-1">
           <PromptInputActionMenu>
             <PromptInputActionMenuTrigger
               className="bg-secondary text-secondary-foreground rounded-full"
@@ -148,6 +153,7 @@ function InputWithAttachments({
           </PromptInputActionMenu>
           {hasProviderAndModel && (
             <>
+              {isAgentsEnabled && <AgentSelector threadId={threadId} />}
               <ModelSelector
                 settings={settings}
                 onSettingsChange={updateSettings}
@@ -243,6 +249,7 @@ export function ChatInputPrompt({
         handleProviderChange={handleProviderChange}
         hasProviderAndModel={hasProviderAndModel}
         hasMessages={hasMessages}
+        threadId={threadId}
         text={text}
         setText={setText}
       />
diff --git a/renderer/src/features/chat/components/chat-message.tsx b/renderer/src/features/chat/components/chat-message.tsx
index 44ceadc83..60eeeee68 100644
--- a/renderer/src/features/chat/components/chat-message.tsx
+++ b/renderer/src/features/chat/components/chat-message.tsx
@@ -18,6 +18,8 @@ import { TokenUsage } from './token-usage'
 import { NoContentMessage } from './no-content-message'
 import { AttachmentPreview } from './attachment-preview'
 import { McpAppView } from './mcp-app-view'
+import { SkillBuildResultCard } from './tool-results/skill-build-result-card'
+import { parseSkillBuildResult } from '../lib/parse-skill-build-result'
 import { Fragment, useState } from 'react'
 import type { ChatUIMessage } from '../types'
 import { getProviderIconByModel } from './provider-icons'
@@ -620,9 +622,19 @@ export function ChatMessage({
                 if (part.type.startsWith('tool-')) {
                   const staticToolName = part.type.replace('tool-', '')
                   const staticUi = uiMetadata[staticToolName]
+                  const skillBuildResult =
+                    staticToolName === 'build_skill' &&
+                    'state' in part &&
+                    part.state === 'output-available' &&
+                    'output' in part
+                      ? parseSkillBuildResult(part.output)
+                      : null
                   return (
                     <Fragment key={`tool-${index}`}>
                       <ToolCallComponent part={part} status={status} />
+                      {skillBuildResult && (
+                        <SkillBuildResultCard result={skillBuildResult} />
+                      )}
                       {staticUi &&
                         'state' in part &&
                         part.state === 'output-available' && (
diff --git a/renderer/src/features/chat/components/mcp-server-selector.tsx b/renderer/src/features/chat/components/mcp-server-selector.tsx
index d2e9c8d09..2d7269447 100644
--- a/renderer/src/features/chat/components/mcp-server-selector.tsx
+++ b/renderer/src/features/chat/components/mcp-server-selector.tsx
@@ -147,7 +147,8 @@ export function McpServerSelector() {
           <Button
             variant="ghost"
             size="sm"
-            className="flex h-10 items-center justify-between gap-2"
+            className="flex h-8 items-center justify-between gap-1.5 px-2
+              has-[>svg]:px-2"
           >
             <ServerIcon className="size-4" /> {enabledMcpServers.length} Servers
             / {getTotalToolsCount()} Tools
diff --git a/renderer/src/features/chat/components/model-picker.tsx b/renderer/src/features/chat/components/model-picker.tsx
new file mode 100644
index 000000000..8deeb6742
--- /dev/null
+++ b/renderer/src/features/chat/components/model-picker.tsx
@@ -0,0 +1,244 @@
+import { useRef, useState } from 'react'
+import { Bot, ChevronDown, Check, Search, X } from 'lucide-react'
+import { Button } from '@/common/components/ui/button'
+import { Input } from '@/common/components/ui/input'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/common/components/ui/dropdown-menu'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/common/components/ui/tooltip'
+import { cn } from '@/common/lib/utils'
+import { useAvailableModels } from '../hooks/use-available-models'
+import { getProviderIcon } from './provider-icons'
+
+export interface ModelSelection {
+  provider: string
+  model: string
+}
+
+interface ModelPickerProps {
+  value: ModelSelection | null
+  onChange: (next: ModelSelection) => void
+  onOpenSettings?: () => void
+  onClear?: () => void
+  clearLabel?: string
+  placeholder?: string
+  triggerClassName?: string
+  contentClassName?: string
+  'data-testid'?: string
+}
+
+export function ModelPicker({
+  value,
+  onChange,
+  onOpenSettings,
+  onClear,
+  clearLabel = 'No default model',
+  placeholder = 'Select AI Model',
+  triggerClassName,
+  contentClassName,
+  'data-testid': dataTestId = 'model-selector',
+}: ModelPickerProps) {
+  const { providersWithCredentials, isLoading } = useAvailableModels()
+  const [searchQueries, setSearchQueries] = useState<Record<string, string>>({})
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const getFilteredModels = (provider: { id: string; models: string[] }) => {
+    const query = searchQueries[provider.id]?.toLowerCase() || ''
+    if (!query) return provider.models
+
+    return provider.models.filter((model: string) =>
+      model.toLowerCase().includes(query)
+    )
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          className={cn(
+            'h-8 justify-between gap-1 px-2 has-[>svg]:px-2',
+            triggerClassName
+          )}
+          disabled={isLoading}
+          data-testid={dataTestId}
+        >
+          <div className="flex min-w-0 items-center gap-1.5">
+            {value?.provider && getProviderIcon(value.provider)}
+            {value?.provider && value.model ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span className="max-w-48 truncate text-sm">
+                    {value.model}
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{value.model}</p>
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <span>{placeholder}</span>
+            )}
+          </div>
+          <ChevronDown className="h-4 w-4 opacity-50" />
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent
+        align="start"
+        className={cn('w-80', contentClassName)}
+      >
+        <DropdownMenuLabel className="flex items-center gap-2">
+          <Bot className="h-4 w-4" />
+          AI Models
+        </DropdownMenuLabel>
+        <DropdownMenuSeparator />
+
+        {onClear && value && (
+          <>
+            <DropdownMenuItem
+              onClick={onClear}
+              className="text-muted-foreground cursor-pointer"
+            >
+              <X className="mr-2 h-4 w-4" />
+              {clearLabel}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+          </>
+        )}
+
+        {providersWithCredentials.map((provider) => {
+          const filteredModels = getFilteredModels(provider)
+          const hasSearch = provider.models.length > 50
+
+          return (
+            <DropdownMenuSub key={provider.id}>
+              <DropdownMenuSubTrigger>
+                <div className="flex w-full items-center justify-between">
+                  <div className="flex min-w-0 items-center gap-2">
+                    {getProviderIcon(provider.id)}
+                    <span className="max-w-40 truncate" title={provider.name}>
+                      {provider.name}
+                    </span>
+                  </div>
+                </div>
+              </DropdownMenuSubTrigger>
+              <DropdownMenuSubContent
+                className="flex max-h-[480px] w-auto max-w-100 flex-col
+                  overflow-hidden px-2"
+                onFocus={(e) => {
+                  e.preventDefault()
+                  inputRef.current?.focus()
+                }}
+              >
+                <div className="shrink-0">
+                  <DropdownMenuLabel className="text-muted-foreground text-xs">
+                    {provider.name} Models
+                  </DropdownMenuLabel>
+                  <DropdownMenuSeparator />
+
+                  {hasSearch && (
+                    <div className="bg-background border-b p-2">
+                      <div className="relative">
+                        <Search
+                          className="text-muted-foreground absolute top-2.5
+                            left-2 h-4 w-4"
+                        />
+                        <Input
+                          ref={inputRef}
+                          placeholder="Search models..."
+                          value={searchQueries[provider.id] || ''}
+                          onChange={(e) => {
+                            setSearchQueries((prev) => ({
+                              ...prev,
+                              [provider.id]: e.target.value,
+                            }))
+                          }}
+                          className="h-8 pl-8"
+                          onClick={(e) => e.stopPropagation()}
+                        />
+                      </div>
+                    </div>
+                  )}
+                </div>
+
+                <div className="min-h-0 flex-1 overflow-y-auto">
+                  {filteredModels.length > 0 ? (
+                    filteredModels.map((model) => {
+                      const isSelected =
+                        value?.provider === provider.id && value.model === model
+
+                      return (
+                        <DropdownMenuItem
+                          key={model}
+                          onClick={() =>
+                            onChange({ provider: provider.id, model })
+                          }
+                          className="flex cursor-pointer items-center
+                            justify-between"
+                        >
+                          <div className="flex items-center gap-2">
+                            <div className="h-4 w-4">
+                              {isSelected && <Check className="h-4 w-4" />}
+                            </div>
+                            <div className="flex flex-col">
+                              <span className="font-mono text-sm">{model}</span>
+                            </div>
+                          </div>
+                        </DropdownMenuItem>
+                      )
+                    })
+                  ) : (
+                    <div
+                      className="text-muted-foreground p-2 text-center text-sm"
+                    >
+                      {provider.models.length === 0
+                        ? provider.id === 'ollama'
+                          ? 'Ollama is not running or no models available'
+                          : 'No models available'
+                        : `No models found matching "${searchQueries[provider.id]}"`}
+                    </div>
+                  )}
+                </div>
+
+                {hasSearch && (
+                  <div className="bg-background shrink-0 border-t p-2">
+                    <p className="text-muted-foreground text-center text-xs">
+                      {searchQueries[provider.id]
+                        ? `${filteredModels.length} of ${provider.models.length} models`
+                        : `${provider.models.length} models available`}
+                    </p>
+                  </div>
+                )}
+              </DropdownMenuSubContent>
+            </DropdownMenuSub>
+          )
+        })}
+
+        {onOpenSettings && (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              onClick={onOpenSettings}
+              className="cursor-pointer"
+            >
+              Provider Settings
+            </DropdownMenuItem>
+          </>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
diff --git a/renderer/src/features/chat/components/model-selector.tsx b/renderer/src/features/chat/components/model-selector.tsx
index 35b88f4a8..a0d0be565 100644
--- a/renderer/src/features/chat/components/model-selector.tsx
+++ b/renderer/src/features/chat/components/model-selector.tsx
@@ -1,26 +1,5 @@
-import { useRef, useState } from 'react'
 import log from 'electron-log/renderer'
-import { Bot, ChevronDown, Check, Search } from 'lucide-react'
-import { Button } from '@/common/components/ui/button'
-import { Input } from '@/common/components/ui/input'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@/common/components/ui/dropdown-menu'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/common/components/ui/tooltip'
-import { useAvailableModels } from '../hooks/use-available-models'
-import { getProviderIcon } from './provider-icons'
+import { ModelPicker, type ModelSelection } from './model-picker'
 import type { ChatSettings } from '../types'
 import { trackEvent } from '@/common/lib/analytics'
 
@@ -36,33 +15,23 @@ export function ModelSelector({
   onSettingsChange,
   onOpenSettings,
 }: ModelSelectorProps) {
-  const { providersWithCredentials, isLoading } = useAvailableModels()
-  const [searchQueries, setSearchQueries] = useState<Record<string, string>>({})
-  const inputRef = useRef<HTMLInputElement>(null)
+  const handleModelSelect = async ({ provider, model }: ModelSelection) => {
+    trackEvent(`Playground: select model ${model}`, { provider })
 
-  const handleModelSelect = async (providerId: string, modelId: string) => {
-    trackEvent(`Playground: select model ${modelId}`, { provider: providerId })
-
-    // If provider is the same, just update the model (preserves credentials)
-    if (providerId === settings.provider) {
-      onSettingsChange({
-        ...settings,
-        model: modelId,
-      })
+    if (provider === settings.provider) {
+      onSettingsChange({ ...settings, model })
       return
     }
 
-    // Switching providers: fetch credentials from storage and construct proper settings
     try {
       const providerSettings =
-        await window.electronAPI.chat.getSettings(providerId)
+        await window.electronAPI.chat.getSettings(provider)
 
-      // Construct new settings with fetched credentials and selected model
       const newSettings: ChatSettings =
-        providerId === 'ollama' || providerId === 'lmstudio'
+        provider === 'ollama' || provider === 'lmstudio'
           ? {
-              provider: providerId,
-              model: modelId,
+              provider,
+              model,
               endpointURL:
                 'endpointURL' in providerSettings
                   ? providerSettings.endpointURL
@@ -70,8 +39,8 @@ export function ModelSelector({
               enabledTools: settings.enabledTools,
             }
           : {
-              provider: providerId,
-              model: modelId,
+              provider,
+              model,
               apiKey:
                 'apiKey' in providerSettings ? providerSettings.apiKey : '',
               enabledTools: settings.enabledTools,
@@ -83,166 +52,16 @@ export function ModelSelector({
     }
   }
 
-  // Filter models based on search query for each provider
-  const getFilteredModels = (provider: { id: string; models: string[] }) => {
-    const query = searchQueries[provider.id]?.toLowerCase() || ''
-    if (!query) return provider.models
-
-    return provider.models.filter((model: string) =>
-      model.toLowerCase().includes(query)
-    )
-  }
+  const value: ModelSelection | null =
+    settings.provider && settings.model
+      ? { provider: settings.provider, model: settings.model }
+      : null
 
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="ghost"
-          className="h-10 justify-between"
-          disabled={isLoading}
-          data-testid="model-selector"
-        >
-          <div className="flex min-w-0 items-center gap-2">
-            {getProviderIcon(settings.provider)}
-            {settings.provider && settings.model ? (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <span className="max-w-40 truncate text-sm">
-                    {settings.model}
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                  <p>{settings.model}</p>
-                </TooltipContent>
-              </Tooltip>
-            ) : (
-              <span>Select AI Model</span>
-            )}
-          </div>
-          <ChevronDown className="h-4 w-4 opacity-50" />
-        </Button>
-      </DropdownMenuTrigger>
-
-      <DropdownMenuContent align="start" className="w-80">
-        <DropdownMenuLabel className="flex items-center gap-2">
-          <Bot className="h-4 w-4" />
-          AI Models
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-
-        {providersWithCredentials.map((provider) => {
-          const filteredModels = getFilteredModels(provider)
-          const hasSearch = provider.models.length > 50
-
-          return (
-            <DropdownMenuSub key={provider.id}>
-              <DropdownMenuSubTrigger>
-                <div className="flex w-full items-center justify-between">
-                  <div className="flex min-w-0 items-center gap-2">
-                    {getProviderIcon(provider.id)}
-                    <span className="max-w-40 truncate" title={provider.name}>
-                      {provider.name}
-                    </span>
-                  </div>
-                </div>
-              </DropdownMenuSubTrigger>
-              <DropdownMenuSubContent
-                className="flex max-h-[480px] w-auto max-w-100 flex-col
-                  overflow-hidden px-2"
-                onFocus={(e) => {
-                  e.preventDefault()
-                  inputRef.current?.focus()
-                }}
-              >
-                <div className="shrink-0">
-                  <DropdownMenuLabel className="text-muted-foreground text-xs">
-                    {provider.name} Models
-                  </DropdownMenuLabel>
-                  <DropdownMenuSeparator />
-
-                  {hasSearch && (
-                    <div className="bg-background border-b p-2">
-                      <div className="relative">
-                        <Search
-                          className="text-muted-foreground absolute top-2.5
-                            left-2 h-4 w-4"
-                        />
-                        <Input
-                          ref={inputRef}
-                          placeholder="Search models..."
-                          value={searchQueries[provider.id] || ''}
-                          onChange={(e) => {
-                            setSearchQueries((prev) => ({
-                              ...prev,
-                              [provider.id]: e.target.value,
-                            }))
-                          }}
-                          className="h-8 pl-8"
-                          onClick={(e) => e.stopPropagation()}
-                        />
-                      </div>
-                    </div>
-                  )}
-                </div>
-
-                {/* Models list with scroll */}
-                <div className="min-h-0 flex-1 overflow-y-auto">
-                  {filteredModels.length > 0 ? (
-                    filteredModels.map((model) => {
-                      const isSelected =
-                        settings.provider === provider.id &&
-                        settings.model === model
-
-                      return (
-                        <DropdownMenuItem
-                          key={model}
-                          onClick={() => handleModelSelect(provider.id, model)}
-                          className="flex cursor-pointer items-center
-                            justify-between"
-                        >
-                          <div className="flex items-center gap-2">
-                            <div className="h-4 w-4">
-                              {isSelected && <Check className="h-4 w-4" />}
-                            </div>
-                            <div className="flex flex-col">
-                              <span className="font-mono text-sm">{model}</span>
-                            </div>
-                          </div>
-                        </DropdownMenuItem>
-                      )
-                    })
-                  ) : (
-                    <div
-                      className="text-muted-foreground p-2 text-center text-sm"
-                    >
-                      {provider.models.length === 0
-                        ? provider.id === 'ollama'
-                          ? 'Ollama is not running or no models available'
-                          : 'No models available'
-                        : `No models found matching "${searchQueries[provider.id]}"`}
-                    </div>
-                  )}
-                </div>
-
-                {hasSearch && (
-                  <div className="bg-background shrink-0 border-t p-2">
-                    <p className="text-muted-foreground text-center text-xs">
-                      {searchQueries[provider.id]
-                        ? `${filteredModels.length} of ${provider.models.length} models`
-                        : `${provider.models.length} models available`}
-                    </p>
-                  </div>
-                )}
-              </DropdownMenuSubContent>
-            </DropdownMenuSub>
-          )
-        })}
-
-        <DropdownMenuSeparator />
-        <DropdownMenuItem onClick={onOpenSettings} className="cursor-pointer">
-          Provider Settings
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+    <ModelPicker
+      value={value}
+      onChange={handleModelSelect}
+      onOpenSettings={onOpenSettings}
+    />
   )
 }
diff --git a/renderer/src/features/chat/components/playground-sidebar.tsx b/renderer/src/features/chat/components/playground-sidebar.tsx
index b6479d496..b7956314f 100644
--- a/renderer/src/features/chat/components/playground-sidebar.tsx
+++ b/renderer/src/features/chat/components/playground-sidebar.tsx
@@ -6,6 +6,7 @@ import {
   useEffect,
 } from 'react'
 import {
+  Bot,
   MoreHorizontal,
   Pencil,
   SquarePen,
@@ -13,6 +14,7 @@ import {
   StarOff,
   Trash2,
 } from 'lucide-react'
+import { Link, useRouterState } from '@tanstack/react-router'
 import { Button } from '@/common/components/ui/button'
 import {
   DropdownMenu,
@@ -23,6 +25,8 @@ import {
 } from '@/common/components/ui/dropdown-menu'
 import { cn } from '@/common/lib/utils'
 import { useConfirm } from '@/common/hooks/use-confirm'
+import { useFeatureFlag } from '@/common/hooks/use-feature-flag'
+import { featureFlagKeys } from '@utils/feature-flags'
 import type { PlaygroundThread } from '../hooks/use-playground-threads'
 
 interface PlaygroundSidebarProps {
@@ -116,7 +120,7 @@ function ThreadItem({
       <li>
         <div
           className={cn(
-            'flex w-full items-center gap-2 rounded-md px-2 py-1.5',
+            'flex w-full items-center gap-2 rounded-md px-2 py-1',
             'bg-accent text-accent-foreground'
           )}
         >
@@ -149,7 +153,7 @@ function ThreadItem({
           type="button"
           onClick={onSelect}
           onDoubleClick={(e) => startRenaming(e)}
-          className="min-w-0 flex-1 truncate px-2 py-1.5 text-left"
+          className="min-w-0 flex-1 truncate px-2 py-1 text-left"
           title="Double-click to rename"
         >
           <span className="truncate">{label}</span>
@@ -243,10 +247,10 @@ function ThreadItem({
 
 function SectionHeader({ label }: { label: string }): ReactElement {
   return (
-    <li className="px-2 pt-3 pb-1">
+    <li className="px-2 pt-2 pb-0.5">
       <span
-        className="text-muted-foreground text-xs font-semibold tracking-wider
-          uppercase"
+        className="text-muted-foreground text-[11px] font-semibold
+          tracking-wider uppercase"
       >
         {label}
       </span>
@@ -266,6 +270,10 @@ export function PlaygroundSidebar({
   const starredThreads = threads.filter((t) => t.starred)
   const recentThreads = threads.filter((t) => !t.starred)
   const hasStarred = starredThreads.length > 0
+  const isAgentsEnabled = useFeatureFlag(featureFlagKeys.AGENTS)
+  const pathname = useRouterState({ select: (s) => s.location.pathname })
+  const isAgentsActive =
+    isAgentsEnabled && pathname.startsWith('/playground/agents')
 
   const renderItem = (thread: PlaygroundThread) => (
     <ThreadItem
@@ -284,20 +292,38 @@ export function PlaygroundSidebar({
       className="border-input text-sidebar-foreground w-sidebar flex h-full
         shrink-0 flex-col border-r"
     >
-      <div className="px-2 pt-3 pb-2">
+      <div className="flex flex-col gap-0.5 px-2 pt-2 pb-1">
+        {isAgentsEnabled && (
+          <Button
+            asChild
+            variant="ghost"
+            size="sm"
+            className={cn(
+              'w-full justify-start gap-2 px-2',
+              isAgentsActive
+                ? 'bg-accent text-accent-foreground'
+                : 'text-muted-foreground'
+            )}
+          >
+            <Link to="/playground/agents" aria-label="Agents">
+              <Bot className="h-4 w-4 shrink-0" />
+              Agents
+            </Link>
+          </Button>
+        )}
         <Button
           variant="ghost"
-          className="text-muted-foreground hover:text-foreground w-full
-            justify-start gap-2 px-2 py-1.5 text-sm font-normal"
+          size="sm"
           onClick={onCreateThread}
           aria-label="New chat"
+          className="text-muted-foreground w-full justify-start gap-2 px-2"
         >
           <SquarePen className="h-4 w-4 shrink-0" />
           New chat
         </Button>
       </div>
 
-      <nav className="flex-1 overflow-y-auto px-2 pb-4">
+      <nav className="flex-1 overflow-y-auto px-2 pb-3">
         <ul className="flex flex-col gap-0.5">
           {hasStarred && (
             <>
diff --git a/renderer/src/features/chat/components/tool-results/__tests__/skill-build-result-card.test.tsx b/renderer/src/features/chat/components/tool-results/__tests__/skill-build-result-card.test.tsx
new file mode 100644
index 000000000..34c67e944
--- /dev/null
+++ b/renderer/src/features/chat/components/tool-results/__tests__/skill-build-result-card.test.tsx
@@ -0,0 +1,173 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { SkillBuildResultCard } from '../skill-build-result-card'
+import type { SkillBuildResult } from '../../../lib/parse-skill-build-result'
+
+const mockNavigate = vi.fn()
+vi.mock('@tanstack/react-router', () => ({
+  useNavigate: () => mockNavigate,
+}))
+
+vi.mock('@/common/lib/analytics', () => ({
+  trackEvent: vi.fn(),
+}))
+
+const mockToastSuccess = vi.fn()
+const mockToastError = vi.fn()
+vi.mock('sonner', () => ({
+  toast: {
+    success: (...args: unknown[]) => mockToastSuccess(...args),
+    error: (...args: unknown[]) => mockToastError(...args),
+  },
+}))
+
+const dialogInstallSkillProps = vi.fn()
+vi.mock('@/features/skills/components/dialog-install-skill', () => ({
+  DialogInstallSkill: (props: Record<string, unknown>) => {
+    dialogInstallSkillProps(props)
+    return props.open ? (
+      <div data-testid="install-dialog">
+        <span data-testid="install-default-reference">
+          {String(props.defaultReference)}
+        </span>
+        <span data-testid="install-default-version">
+          {String(props.defaultVersion)}
+        </span>
+      </div>
+    ) : null
+  },
+}))
+
+const writeText = vi.fn()
+Object.defineProperty(navigator, 'clipboard', {
+  value: { writeText },
+  writable: true,
+})
+
+const fullResult: SkillBuildResult = {
+  reference: 'ghcr.io/example/my-skill:v0.0.4',
+  apiReference: 'ghcr.io/example/my-skill:v0.0.4',
+  build: {
+    name: 'my-skill',
+    description: 'A handy skill',
+    tag: 'ghcr.io/example/my-skill:v0.0.4',
+    version: 'v0.0.4',
+    digest: 'sha256:deadbeefcafe1234',
+  },
+}
+
+describe('SkillBuildResultCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    writeText.mockResolvedValue(undefined)
+  })
+
+  it('renders the skill name, description, version, tag and shortened digest', () => {
+    render(<SkillBuildResultCard result={fullResult} />)
+
+    expect(screen.getByText('Skill built')).toBeInTheDocument()
+    expect(screen.getByText('my-skill')).toBeInTheDocument()
+    expect(screen.getByText('A handy skill')).toBeInTheDocument()
+    expect(screen.getByText('v0.0.4')).toBeInTheDocument()
+    expect(
+      screen.getByText('ghcr.io/example/my-skill:v0.0.4')
+    ).toBeInTheDocument()
+    expect(screen.getByText(/sha256:deadbeefcafe…/)).toBeInTheDocument()
+  })
+
+  it('opens the install dialog with the bare name and version prefilled', async () => {
+    render(<SkillBuildResultCard result={fullResult} />)
+
+    await userEvent.click(screen.getByTestId('chat-build-install'))
+
+    expect(screen.getByTestId('install-dialog')).toBeInTheDocument()
+    expect(screen.getByTestId('install-default-reference')).toHaveTextContent(
+      'my-skill'
+    )
+    expect(screen.getByTestId('install-default-version')).toHaveTextContent(
+      'v0.0.4'
+    )
+  })
+
+  it('navigates to the build detail page using apiReference when "View details" is clicked', async () => {
+    render(<SkillBuildResultCard result={fullResult} />)
+
+    await userEvent.click(screen.getByTestId('chat-build-view-details'))
+
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: '/skills/builds/$tag',
+      params: { tag: 'ghcr.io/example/my-skill:v0.0.4' },
+    })
+  })
+
+  it('hides the "View details" button when no navigable tag is available', () => {
+    const result: SkillBuildResult = {
+      reference: 'my-skill',
+      build: { name: 'my-skill', tag: 'v0.0.4' },
+    }
+
+    render(<SkillBuildResultCard result={result} />)
+
+    expect(
+      screen.queryByTestId('chat-build-view-details')
+    ).not.toBeInTheDocument()
+  })
+
+  it('falls back to a registry-prefixed build.tag when apiReference is missing', async () => {
+    const result: SkillBuildResult = {
+      reference: 'my-skill',
+      build: {
+        name: 'my-skill',
+        tag: 'ghcr.io/example/my-skill:latest',
+      },
+    }
+
+    render(<SkillBuildResultCard result={result} />)
+
+    await userEvent.click(screen.getByTestId('chat-build-view-details'))
+    expect(mockNavigate).toHaveBeenCalledWith({
+      to: '/skills/builds/$tag',
+      params: { tag: 'ghcr.io/example/my-skill:latest' },
+    })
+  })
+
+  it('copies just the bare skill name to the clipboard', async () => {
+    render(<SkillBuildResultCard result={fullResult} />)
+
+    await userEvent.click(screen.getByTestId('chat-build-copy-reference'))
+
+    expect(writeText).toHaveBeenCalledWith('my-skill')
+    expect(mockToastSuccess).toHaveBeenCalledWith(
+      'Copied skill name to clipboard'
+    )
+  })
+
+  it('passes an empty version to the install dialog when no explicit version exists', async () => {
+    const result: SkillBuildResult = {
+      reference: 'my-skill',
+      apiReference: 'ghcr.io/example/my-skill:latest',
+      build: {
+        name: 'my-skill',
+        tag: 'ghcr.io/example/my-skill:latest',
+      },
+    }
+
+    render(<SkillBuildResultCard result={result} />)
+    await userEvent.click(screen.getByTestId('chat-build-install'))
+
+    expect(screen.getByTestId('install-default-version')).toHaveTextContent('')
+    expect(screen.getByTestId('install-default-reference')).toHaveTextContent(
+      'my-skill'
+    )
+  })
+
+  it('shows an error toast when copying to the clipboard fails', async () => {
+    writeText.mockRejectedValueOnce(new Error('nope'))
+
+    render(<SkillBuildResultCard result={fullResult} />)
+    await userEvent.click(screen.getByTestId('chat-build-copy-reference'))
+
+    expect(mockToastError).toHaveBeenCalledWith('Failed to copy skill name')
+  })
+})
diff --git a/renderer/src/features/chat/components/tool-results/skill-build-result-card.tsx b/renderer/src/features/chat/components/tool-results/skill-build-result-card.tsx
new file mode 100644
index 000000000..7d5666a5c
--- /dev/null
+++ b/renderer/src/features/chat/components/tool-results/skill-build-result-card.tsx
@@ -0,0 +1,229 @@
+import { useState } from 'react'
+import { useNavigate } from '@tanstack/react-router'
+import { toast } from 'sonner'
+import {
+  CheckCircle2Icon,
+  CodeIcon,
+  CopyIcon,
+  DownloadIcon,
+  ExternalLinkIcon,
+  FingerprintIcon,
+  PackageIcon,
+  TagIcon,
+} from 'lucide-react'
+import { Button } from '@/common/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/common/components/ui/tooltip'
+import { DialogInstallSkill } from '@/features/skills/components/dialog-install-skill'
+import { trackEvent } from '@/common/lib/analytics'
+import type { SkillBuildResult } from '../../lib/parse-skill-build-result'
+
+function shortenDigest(digest: string | undefined): string | undefined {
+  if (!digest) return undefined
+  if (digest.startsWith('sha256:')) return `sha256:${digest.slice(7, 19)}…`
+  return `${digest.slice(0, 12)}…`
+}
+
+function InfoChip({
+  icon: Icon,
+  label,
+  value,
+  mono = false,
+  tooltip,
+}: {
+  icon: React.ComponentType<{ className?: string }>
+  label: string
+  value: string
+  mono?: boolean
+  tooltip?: string
+}) {
+  const content = (
+    <div
+      className="border-border bg-background/60 text-muted-foreground flex
+        items-center gap-2 rounded-md border px-2.5 py-1.5 text-xs"
+    >
+      <Icon className="text-muted-foreground/70 size-3.5 shrink-0" />
+      <span className="text-muted-foreground/80 shrink-0">{label}</span>
+      <span
+        className={`text-foreground truncate
+          ${mono ? 'font-mono' : 'font-medium'}`}
+      >
+        {value}
+      </span>
+    </div>
+  )
+  if (tooltip) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{content}</TooltipTrigger>
+        <TooltipContent className="max-w-xs font-mono text-xs break-all">
+          {tooltip}
+        </TooltipContent>
+      </Tooltip>
+    )
+  }
+  return content
+}
+
+export function SkillBuildResultCard({ result }: { result: SkillBuildResult }) {
+  const navigate = useNavigate()
+  const [installOpen, setInstallOpen] = useState(false)
+
+  const { reference, apiReference, build } = result
+  const tag = build.tag
+  const title = build.name ?? tag ?? reference
+  const description = build.description
+  const version = build.version
+  const digest = build.digest
+  const shortDigest = shortenDigest(digest)
+  // Navigation target must exactly match a LocalBuild.tag; prefer apiReference
+  // (the canonical tag returned by the build API), fall back to build.tag only
+  // if it looks registry-prefixed (contains "/" or ":"). A bare version like
+  // "v0.0.4" is NOT a valid route param for /skills/builds/$tag.
+  const isRegistryRef = (v: string | undefined) =>
+    !!v && (v.includes('/') || v.includes(':'))
+  const navTag = apiReference ?? (isRegistryRef(tag) ? tag : undefined)
+  const canViewDetails = !!navTag
+  const installName = build.name ?? reference
+  const installVersion = version
+  const copyValue = build.name ?? reference
+
+  const handleCopyReference = async () => {
+    try {
+      await navigator.clipboard.writeText(copyValue)
+      toast.success('Copied skill name to clipboard')
+      trackEvent('Skills: copy reference', { source: 'chat_build_result' })
+    } catch {
+      toast.error('Failed to copy skill name')
+    }
+  }
+
+  return (
+    <>
+      <div
+        className="my-3 overflow-hidden rounded-xl border border-emerald-500/25
+          bg-linear-to-br from-emerald-500/5 via-transparent to-transparent
+          shadow-sm"
+        data-testid="skill-build-result-card"
+      >
+        <div className="flex flex-col gap-4 p-4">
+          <div className="flex items-start gap-3">
+            <div
+              className="flex size-11 shrink-0 items-center justify-center
+                rounded-xl bg-emerald-500/15 text-emerald-600
+                dark:text-emerald-400"
+            >
+              <PackageIcon className="size-5" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <div
+                className="text-muted-foreground flex items-center gap-1.5
+                  text-xs font-medium tracking-wide uppercase"
+              >
+                <CheckCircle2Icon className="size-3.5 text-emerald-500" />
+                Skill built
+              </div>
+              <h4
+                className="text-foreground mt-0.5 truncate text-base
+                  font-semibold"
+                title={title}
+              >
+                {title}
+              </h4>
+              {description && (
+                <p className="text-muted-foreground mt-1 line-clamp-2 text-sm">
+                  {description}
+                </p>
+              )}
+            </div>
+          </div>
+
+          <div className="flex flex-wrap gap-2">
+            {version && (
+              <InfoChip icon={TagIcon} label="Version" value={version} />
+            )}
+            {tag && <InfoChip icon={CodeIcon} label="Tag" value={tag} mono />}
+            {shortDigest && (
+              <InfoChip
+                icon={FingerprintIcon}
+                label="Digest"
+                value={shortDigest}
+                mono
+                tooltip={digest}
+              />
+            )}
+          </div>
+
+          <div
+            className="border-border/60 flex flex-wrap items-stretch
+              justify-between gap-2 border-t pt-3"
+          >
+            <div className="flex flex-wrap items-stretch gap-2">
+              <Button
+                size="sm"
+                onClick={() => {
+                  trackEvent('Skills: install dialog opened', {
+                    source: 'chat_build_result',
+                  })
+                  setInstallOpen(true)
+                }}
+                data-testid="chat-build-install"
+              >
+                <DownloadIcon className="size-4" />
+                Install
+              </Button>
+              {canViewDetails && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    trackEvent('Skills: build card opened', {
+                      has_tag: 'true',
+                      source: 'chat_build_result',
+                    })
+                    void navigate({
+                      to: '/skills/builds/$tag',
+                      params: { tag: navTag! },
+                    })
+                  }}
+                  data-testid="chat-build-view-details"
+                >
+                  <ExternalLinkIcon className="size-4" />
+                  View details
+                </Button>
+              )}
+            </div>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={handleCopyReference}
+                  aria-label="Copy skill name"
+                  data-testid="chat-build-copy-reference"
+                >
+                  <CopyIcon className="size-4" />
+                  Copy name
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-xs font-mono text-xs break-all">
+                {copyValue}
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+
+      <DialogInstallSkill
+        key={`${installName}-${installVersion ?? ''}`}
+        open={installOpen}
+        onOpenChange={setInstallOpen}
+        defaultReference={installName}
+        defaultVersion={installVersion ?? ''}
+      />
+    </>
+  )
+}
diff --git a/renderer/src/features/chat/hooks/__tests__/use-playground-threads.test.ts b/renderer/src/features/chat/hooks/__tests__/use-playground-threads.test.ts
index 1186a30c3..a1f90dd5b 100644
--- a/renderer/src/features/chat/hooks/__tests__/use-playground-threads.test.ts
+++ b/renderer/src/features/chat/hooks/__tests__/use-playground-threads.test.ts
@@ -112,6 +112,26 @@ describe('usePlaygroundThreads', () => {
       )
     })
 
+    it('clears the active thread id when activeThreadId becomes null', async () => {
+      mockChatAPI.getAllThreads.mockResolvedValue([])
+      let activeId: string | null = 'thread-a'
+      const { rerender } = renderHook(() => usePlaygroundThreads(activeId), {
+        wrapper: createWrapper(),
+      })
+      await waitFor(() =>
+        expect(mockChatAPI.setActiveThreadId).toHaveBeenCalledWith('thread-a')
+      )
+
+      activeId = null
+      rerender()
+
+      await waitFor(() =>
+        expect(mockChatAPI.setActiveThreadId).toHaveBeenLastCalledWith(
+          undefined
+        )
+      )
+    })
+
     it('maps starred field from DB thread', async () => {
       mockChatAPI.getAllThreads.mockResolvedValue([
         makeDbThread({ starred: true }),
diff --git a/renderer/src/features/chat/hooks/use-playground-threads.ts b/renderer/src/features/chat/hooks/use-playground-threads.ts
index 14fae1555..8c6b0b1c7 100644
--- a/renderer/src/features/chat/hooks/use-playground-threads.ts
+++ b/renderer/src/features/chat/hooks/use-playground-threads.ts
@@ -14,7 +14,7 @@ export interface PlaygroundThread {
 const sortByRecent = (a: PlaygroundThread, b: PlaygroundThread) =>
   b.lastEditTimestamp - a.lastEditTimestamp
 
-export function usePlaygroundThreads(activeThreadId: string) {
+export function usePlaygroundThreads(activeThreadId: string | null) {
   const queryClient = useQueryClient()
   const [threads, setThreads] = useState<PlaygroundThread[]>([])
   const [isLoading, setIsLoading] = useState(true)
@@ -49,9 +49,11 @@ export function usePlaygroundThreads(activeThreadId: string) {
     loadThreads()
   }, [])
 
-  // Persist the URL-driven active thread to IPC whenever it changes
+  // Persist the URL-driven active thread to IPC whenever it changes.
+  // When the URL has no thread (e.g. user navigated to /playground/agents),
+  // explicitly clear the main-process pointer so it doesn't keep a stale id.
   useEffect(() => {
-    window.electronAPI.chat.setActiveThreadId(activeThreadId)
+    window.electronAPI.chat.setActiveThreadId(activeThreadId ?? undefined)
   }, [activeThreadId])
 
   /** Creates a new thread and returns its ID for navigation, or null on failure. */
diff --git a/renderer/src/features/chat/lib/__tests__/parse-skill-build-result.test.ts b/renderer/src/features/chat/lib/__tests__/parse-skill-build-result.test.ts
new file mode 100644
index 000000000..6fff6e890
--- /dev/null
+++ b/renderer/src/features/chat/lib/__tests__/parse-skill-build-result.test.ts
@@ -0,0 +1,105 @@
+import { describe, it, expect } from 'vitest'
+import { parseSkillBuildResult } from '../parse-skill-build-result'
+
+describe('parseSkillBuildResult', () => {
+  it('returns null for non-object inputs', () => {
+    expect(parseSkillBuildResult(null)).toBeNull()
+    expect(parseSkillBuildResult(undefined)).toBeNull()
+    expect(parseSkillBuildResult('build complete')).toBeNull()
+    expect(parseSkillBuildResult(42)).toBeNull()
+  })
+
+  it('returns null when reference is missing or empty', () => {
+    expect(parseSkillBuildResult({})).toBeNull()
+    expect(parseSkillBuildResult({ reference: '' })).toBeNull()
+    expect(parseSkillBuildResult({ reference: 123 })).toBeNull()
+  })
+
+  it('parses a full build payload with all fields populated', () => {
+    const result = parseSkillBuildResult({
+      reference: 'ghcr.io/example/my-skill:v0.0.4',
+      apiReference: 'ghcr.io/example/my-skill:v0.0.4',
+      build: {
+        name: 'my-skill',
+        description: 'Does cool things',
+        tag: 'ghcr.io/example/my-skill:v0.0.4',
+        version: 'v0.0.4',
+        digest: 'sha256:deadbeef',
+      },
+    })
+
+    expect(result).toEqual({
+      reference: 'ghcr.io/example/my-skill:v0.0.4',
+      apiReference: 'ghcr.io/example/my-skill:v0.0.4',
+      build: {
+        name: 'my-skill',
+        description: 'Does cool things',
+        tag: 'ghcr.io/example/my-skill:v0.0.4',
+        version: 'v0.0.4',
+        digest: 'sha256:deadbeef',
+      },
+    })
+  })
+
+  it('falls back to apiReference when build.tag is missing', () => {
+    const result = parseSkillBuildResult({
+      reference: 'my-skill',
+      apiReference: 'ghcr.io/example/my-skill:v1',
+      build: {
+        name: 'my-skill',
+        version: 'v1',
+      },
+    })
+
+    expect(result?.build.tag).toBe('ghcr.io/example/my-skill:v1')
+    expect(result?.apiReference).toBe('ghcr.io/example/my-skill:v1')
+  })
+
+  it('falls back to top-level tag when build is absent and apiReference is missing', () => {
+    const result = parseSkillBuildResult({
+      reference: 'my-skill',
+      tag: 'ghcr.io/example/my-skill:latest',
+    })
+
+    expect(result?.build.tag).toBe('ghcr.io/example/my-skill:latest')
+    expect(result?.apiReference).toBeUndefined()
+  })
+
+  it('drops empty-string fields rather than carrying them through', () => {
+    const result = parseSkillBuildResult({
+      reference: 'my-skill',
+      build: {
+        name: '',
+        description: '',
+        tag: 'ghcr.io/example/my-skill:v1',
+        version: '',
+        digest: '',
+      },
+    })
+
+    expect(result?.build).toEqual({
+      name: undefined,
+      description: undefined,
+      tag: 'ghcr.io/example/my-skill:v1',
+      version: undefined,
+      digest: undefined,
+    })
+  })
+
+  it('ignores a non-object build value', () => {
+    const result = parseSkillBuildResult({
+      reference: 'my-skill',
+      apiReference: 'ghcr.io/example/my-skill:v1',
+      build: 'not-an-object',
+    })
+
+    expect(result).not.toBeNull()
+    expect(result?.build).toEqual({
+      name: undefined,
+      description: undefined,
+      tag: 'ghcr.io/example/my-skill:v1',
+      version: undefined,
+      digest: undefined,
+    })
+  })
+})
diff --git a/renderer/src/features/chat/lib/parse-skill-build-result.ts b/renderer/src/features/chat/lib/parse-skill-build-result.ts
new file mode 100644
index 000000000..83c0c39ee
--- /dev/null
+++ b/renderer/src/features/chat/lib/parse-skill-build-result.ts
@@ -0,0 +1,42 @@
+import type { GithubComStacklokToolhivePkgSkillsLocalBuild as LocalBuild } from '@common/api/generated/types.gen'
+
+export interface SkillBuildResult {
+  reference: string
+  apiReference?: string
+  build: LocalBuild
+}
+
+/**
+ * Narrow an unknown tool `output` into a `SkillBuildResult` if it looks like a
+ * successful `build_skill` response. Returns `null` otherwise so the caller can
+ * fall back to the generic tool result rendering.
+ */
+export function parseSkillBuildResult(
+  output: unknown
+): SkillBuildResult | null {
+  if (!output || typeof output !== 'object') return null
+  const obj = output as Record<string, unknown>
+  const reference = obj.reference
+  if (typeof reference !== 'string' || reference.length === 0) return null
+
+  const rawBuild =
+    obj.build && typeof obj.build === 'object'
+      ? (obj.build as Record<string, unknown>)
+      : null
+
+  const pickString = (v: unknown) =>
+    typeof v === 'string' && v.length > 0 ? v : undefined
+
+  const apiReference = pickString(obj.apiReference)
+  const topLevelTag = pickString(obj.tag)
+
+  const build: LocalBuild = {
+    name: pickString(rawBuild?.name),
+    description: pickString(rawBuild?.description),
+    tag: pickString(rawBuild?.tag) ?? apiReference ?? topLevelTag,
+    version: pickString(rawBuild?.version),
+    digest: pickString(rawBuild?.digest),
+  }
+
+  return { reference, apiReference, build }
+}
diff --git a/renderer/src/features/skills/components/__tests__/card-build.test.tsx b/renderer/src/features/skills/components/__tests__/card-build.test.tsx
index adc9fc899..c25ff7ef3 100644
--- a/renderer/src/features/skills/components/__tests__/card-build.test.tsx
+++ b/renderer/src/features/skills/components/__tests__/card-build.test.tsx
@@ -107,7 +107,7 @@ describe('CardBuild', () => {
     })
   })
 
-  it('prefills install dialog with the build tag as reference', async () => {
+  it('prefills install dialog with build name in the name field and version in the version field', async () => {
     const user = userEvent.setup()
     renderRoute(router)
 
@@ -115,8 +115,9 @@ describe('CardBuild', () => {
 
     await waitFor(() => {
       expect(screen.getByLabelText(/name or reference/i)).toHaveValue(
-        'localhost/my-skill:v1.0.0'
+        'my-skill'
       )
+      expect(screen.getByLabelText(/^version/i)).toHaveValue('v1.0.0')
     })
   })
 
diff --git a/renderer/src/features/skills/components/build-detail-page.tsx b/renderer/src/features/skills/components/build-detail-page.tsx
index 796252170..ac758ecdc 100644
--- a/renderer/src/features/skills/components/build-detail-page.tsx
+++ b/renderer/src/features/skills/components/build-detail-page.tsx
@@ -13,6 +13,7 @@ import { DialogDeleteBuild } from './dialog-delete-build'
 import { SkillDetailLayout } from './skill-detail-layout'
 import { SkillMarkdown } from './skill-markdown'
 import { trackEvent } from '@/common/lib/analytics'
+import { getBuildTitle } from '../lib/build-reference'
 
 interface BuildDetailPageProps {
   build: LocalBuild
@@ -23,7 +24,7 @@ export function BuildDetailPage({ build }: BuildDetailPageProps) {
   const [deleteOpen, setDeleteOpen] = useState(false)
   const navigate = useNavigate()
 
-  const title = build.name ?? build.tag ?? 'Unnamed build'
+  const title = getBuildTitle(build)
   const version = build.version
   const tag = build.tag
   const digest = build.digest
@@ -135,10 +136,11 @@ export function BuildDetailPage({ build }: BuildDetailPageProps) {
       />
 
       <DialogInstallSkill
-        key={tag ?? title}
+        key={`${build.name ?? tag ?? title}-${version ?? ''}`}
         open={installOpen}
         onOpenChange={setInstallOpen}
-        defaultReference={tag ?? build.name}
+        defaultReference={build.name ?? tag}
+        defaultVersion={version ?? ''}
       />
       <DialogDeleteBuild
         open={deleteOpen}
diff --git a/renderer/src/features/skills/components/card-build.tsx b/renderer/src/features/skills/components/card-build.tsx
index 9a64d8287..4a990de2d 100644
--- a/renderer/src/features/skills/components/card-build.tsx
+++ b/renderer/src/features/skills/components/card-build.tsx
@@ -8,13 +8,14 @@ import { DialogInstallSkill } from './dialog-install-skill'
 import { DialogDeleteBuild } from './dialog-delete-build'
 import { CardSkillBase } from './card-skill-base'
 import { trackEvent } from '@/common/lib/analytics'
+import { getBuildTitle } from '../lib/build-reference'
 
 export function CardBuild({ build }: { build: LocalBuild }) {
   const [installOpen, setInstallOpen] = useState(false)
   const [deleteOpen, setDeleteOpen] = useState(false)
   const navigate = useNavigate()
 
-  const title = build.name ?? build.tag ?? 'Unnamed build'
+  const title = getBuildTitle(build)
   const description = build.description
   const version = build.version
   const tag = build.tag
@@ -96,10 +97,11 @@ export function CardBuild({ build }: { build: LocalBuild }) {
       />
 
       <DialogInstallSkill
-        key={tag ?? title}
+        key={`${build.name ?? tag ?? title}-${version ?? ''}`}
         open={installOpen}
         onOpenChange={setInstallOpen}
-        defaultReference={tag ?? build.name}
+        defaultReference={build.name ?? tag}
+        defaultVersion={version ?? ''}
       />
       <DialogDeleteBuild
         open={deleteOpen}
diff --git a/renderer/src/features/skills/components/dialog-install-skill.tsx b/renderer/src/features/skills/components/dialog-install-skill.tsx
index 27a452362..570904da8 100644
--- a/renderer/src/features/skills/components/dialog-install-skill.tsx
+++ b/renderer/src/features/skills/components/dialog-install-skill.tsx
@@ -67,12 +67,14 @@ interface DialogInstallSkillProps {
   open: boolean
   onOpenChange: (open: boolean) => void
   defaultReference?: string
+  defaultVersion?: string
 }
 
 export function DialogInstallSkill({
   open,
   onOpenChange,
   defaultReference,
+  defaultVersion,
 }: DialogInstallSkillProps) {
   const { mutateAsync: installSkill, isPending } = useMutationInstallSkill()
   const [submitError, setSubmitError] = useState<string | null>(null)
@@ -94,7 +96,7 @@ export function DialogInstallSkill({
       scope: 'user',
       project_root: '',
       clients: [],
-      version: '',
+      version: defaultVersion ?? '',
     },
   })
 
diff --git a/renderer/src/features/skills/components/skill-detail-layout.tsx b/renderer/src/features/skills/components/skill-detail-layout.tsx
index c2d332f19..157417bb3 100644
--- a/renderer/src/features/skills/components/skill-detail-layout.tsx
+++ b/renderer/src/features/skills/components/skill-detail-layout.tsx
@@ -20,6 +20,12 @@ interface SkillDetailLayoutProps {
   description?: string | null
   actions: ReactNode
   rightPanel?: ReactNode
+  /**
+   * When true (default), the back button uses browser history when available
+   * so search params / scroll position are restored. Set to `false` to always
+   * navigate to `backTo` regardless of history.
+   */
+  historyBack?: boolean
 }
 
 export function SkillDetailLayout({
@@ -30,6 +36,7 @@ export function SkillDetailLayout({
   description,
   actions,
   rightPanel,
+  historyBack = true,
 }: SkillDetailLayoutProps) {
   const headerRef = useRef<HTMLDivElement>(null)
   const [isHeaderVisible, setIsHeaderVisible] = useState(true)
@@ -37,7 +44,7 @@ export function SkillDetailLayout({
   const canGoBack = useCanGoBack()
 
   const handleBackClick = (event: MouseEvent<HTMLAnchorElement>) => {
-    if (!canGoBack) return
+    if (!historyBack || !canGoBack) return
     if (
       event.defaultPrevented ||
       event.button !== 0 ||
@@ -75,7 +82,7 @@ export function SkillDetailLayout({
           backTo={backTo}
           backSearch={backSearch}
           badges={badges}
-          historyBack
+          historyBack={historyBack}
         />
       </div>
 
diff --git a/renderer/src/features/skills/lib/build-reference.ts b/renderer/src/features/skills/lib/build-reference.ts
new file mode 100644
index 000000000..4cb52ee02
--- /dev/null
+++ b/renderer/src/features/skills/lib/build-reference.ts
@@ -0,0 +1,5 @@
+import type { GithubComStacklokToolhivePkgSkillsLocalBuild as LocalBuild } from '@common/api/generated/types.gen'
+
+export function getBuildTitle(build: LocalBuild): string {
+  return build.name?.trim() || build.tag?.trim() || 'Unnamed build'
+}
diff --git a/renderer/src/route-tree.gen.ts b/renderer/src/route-tree.gen.ts
index e3d130908..887259240 100644
--- a/renderer/src/route-tree.gen.ts
+++ b/renderer/src/route-tree.gen.ts
@@ -16,15 +16,19 @@ import { Route as PlaygroundRouteImport } from "./routes/playground"
 import { Route as CliIssueRouteImport } from "./routes/cli-issue"
 import { Route as IndexRouteImport } from "./routes/index"
 import { Route as PlaygroundIndexRouteImport } from "./routes/playground.index"
+import { Route as PlaygroundAgentsRouteImport } from "./routes/playground.agents"
 import { Route as GroupGroupNameRouteImport } from "./routes/group.$groupName"
 import { Route as CustomizeToolsServerNameRouteImport } from "./routes/customize-tools.$serverName"
 import { Route as registryRegistryRouteImport } from "./routes/(registry)/registry"
 import { Route as SkillsBuildsTagRouteImport } from "./routes/skills_.builds.$tag"
 import { Route as SkillsNamespaceSkillNameRouteImport } from "./routes/skills_.$namespace.$skillName"
 import { Route as PlaygroundChatThreadIdRouteImport } from "./routes/playground.chat.$threadId"
+import { Route as PlaygroundAgentsNewRouteImport } from "./routes/playground.agents_.new"
+import { Route as PlaygroundAgentsAgentIdRouteImport } from "./routes/playground.agents_.$agentId"
 import { Route as LogsGroupNameServerNameRouteImport } from "./routes/logs.$groupName.$serverName"
 import { Route as registryRegistryNameRouteImport } from "./routes/(registry)/registry_.$name"
 import { Route as registryRegistryGroupNameRouteImport } from "./routes/(registry)/registry-group_.$name"
+import { Route as PlaygroundAgentsAgentIdEditRouteImport } from "./routes/playground.agents_.$agentId_.edit"
 
 const SkillsRoute = SkillsRouteImport.update({
   id: "/skills",
@@ -61,6 +65,11 @@ const PlaygroundIndexRoute = PlaygroundIndexRouteImport.update({
   path: "/",
   getParentRoute: () => PlaygroundRoute,
 } as any)
+const PlaygroundAgentsRoute = PlaygroundAgentsRouteImport.update({
+  id: "/agents",
+  path: "/agents",
+  getParentRoute: () => PlaygroundRoute,
+} as any)
 const GroupGroupNameRoute = GroupGroupNameRouteImport.update({
   id: "/group/$groupName",
   path: "/group/$groupName",
@@ -93,6 +102,16 @@ const PlaygroundChatThreadIdRoute = PlaygroundChatThreadIdRouteImport.update({
   path: "/chat/$threadId",
   getParentRoute: () => PlaygroundRoute,
 } as any)
+const PlaygroundAgentsNewRoute = PlaygroundAgentsNewRouteImport.update({
+  id: "/agents_/new",
+  path: "/agents/new",
+  getParentRoute: () => PlaygroundRoute,
+} as any)
+const PlaygroundAgentsAgentIdRoute = PlaygroundAgentsAgentIdRouteImport.update({
+  id: "/agents_/$agentId",
+  path: "/agents/$agentId",
+  getParentRoute: () => PlaygroundRoute,
+} as any)
 const LogsGroupNameServerNameRoute = LogsGroupNameServerNameRouteImport.update({
   id: "/logs/$groupName/$serverName",
   path: "/logs/$groupName/$serverName",
@@ -109,6 +128,12 @@ const registryRegistryGroupNameRoute =
     path: "/registry-group/$name",
     getParentRoute: () => rootRouteImport,
   } as any)
+const PlaygroundAgentsAgentIdEditRoute =
+  PlaygroundAgentsAgentIdEditRouteImport.update({
+    id: "/agents_/$agentId_/edit",
+    path: "/agents/$agentId/edit",
+    getParentRoute: () => PlaygroundRoute,
+  } as any)
 
 export interface FileRoutesByFullPath {
   "/": typeof IndexRoute
@@ -120,13 +145,17 @@ export interface FileRoutesByFullPath {
   "/registry": typeof registryRegistryRoute
   "/customize-tools/$serverName": typeof CustomizeToolsServerNameRoute
   "/group/$groupName": typeof GroupGroupNameRoute
+  "/playground/agents": typeof PlaygroundAgentsRoute
   "/playground/": typeof PlaygroundIndexRoute
   "/registry-group/$name": typeof registryRegistryGroupNameRoute
   "/registry/$name": typeof registryRegistryNameRoute
   "/logs/$groupName/$serverName": typeof LogsGroupNameServerNameRoute
+  "/playground/agents/$agentId": typeof PlaygroundAgentsAgentIdRoute
+  "/playground/agents/new": typeof PlaygroundAgentsNewRoute
   "/playground/chat/$threadId": typeof PlaygroundChatThreadIdRoute
   "/skills/$namespace/$skillName": typeof SkillsNamespaceSkillNameRoute
   "/skills/builds/$tag": typeof SkillsBuildsTagRoute
+  "/playground/agents/$agentId/edit": typeof PlaygroundAgentsAgentIdEditRoute
 }
 export interface FileRoutesByTo {
   "/": typeof IndexRoute
@@ -137,13 +166,17 @@ export interface FileRoutesByTo {
   "/registry": typeof registryRegistryRoute
   "/customize-tools/$serverName": typeof CustomizeToolsServerNameRoute
   "/group/$groupName": typeof GroupGroupNameRoute
+  "/playground/agents": typeof PlaygroundAgentsRoute
   "/playground": typeof PlaygroundIndexRoute
   "/registry-group/$name": typeof registryRegistryGroupNameRoute
   "/registry/$name": typeof registryRegistryNameRoute
   "/logs/$groupName/$serverName": typeof LogsGroupNameServerNameRoute
+  "/playground/agents/$agentId": typeof PlaygroundAgentsAgentIdRoute
+  "/playground/agents/new": typeof PlaygroundAgentsNewRoute
   "/playground/chat/$threadId": typeof PlaygroundChatThreadIdRoute
   "/skills/$namespace/$skillName": typeof SkillsNamespaceSkillNameRoute
   "/skills/builds/$tag": typeof SkillsBuildsTagRoute
+  "/playground/agents/$agentId/edit": typeof PlaygroundAgentsAgentIdEditRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -156,13 +189,17 @@ export interface FileRoutesById {
   "/(registry)/registry": typeof registryRegistryRoute
   "/customize-tools/$serverName": typeof CustomizeToolsServerNameRoute
   "/group/$groupName": typeof GroupGroupNameRoute
+  "/playground/agents": typeof PlaygroundAgentsRoute
   "/playground/": typeof PlaygroundIndexRoute
   "/(registry)/registry-group_/$name": typeof registryRegistryGroupNameRoute
   "/(registry)/registry_/$name": typeof registryRegistryNameRoute
   "/logs/$groupName/$serverName": typeof LogsGroupNameServerNameRoute
+  "/playground/agents_/$agentId": typeof PlaygroundAgentsAgentIdRoute
+  "/playground/agents_/new": typeof PlaygroundAgentsNewRoute
   "/playground/chat/$threadId": typeof PlaygroundChatThreadIdRoute
   "/skills_/$namespace/$skillName": typeof SkillsNamespaceSkillNameRoute
   "/skills_/builds/$tag": typeof SkillsBuildsTagRoute
+  "/playground/agents_/$agentId_/edit": typeof PlaygroundAgentsAgentIdEditRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -176,13 +213,17 @@ export interface FileRouteTypes {
     | "/registry"
     | "/customize-tools/$serverName"
     | "/group/$groupName"
+    | "/playground/agents"
     | "/playground/"
     | "/registry-group/$name"
     | "/registry/$name"
     | "/logs/$groupName/$serverName"
+    | "/playground/agents/$agentId"
+    | "/playground/agents/new"
     | "/playground/chat/$threadId"
     | "/skills/$namespace/$skillName"
     | "/skills/builds/$tag"
+    | "/playground/agents/$agentId/edit"
   fileRoutesByTo: FileRoutesByTo
   to:
     | "/"
@@ -193,13 +234,17 @@ export interface FileRouteTypes {
     | "/registry"
     | "/customize-tools/$serverName"
     | "/group/$groupName"
+    | "/playground/agents"
     | "/playground"
     | "/registry-group/$name"
     | "/registry/$name"
     | "/logs/$groupName/$serverName"
+    | "/playground/agents/$agentId"
+    | "/playground/agents/new"
     | "/playground/chat/$threadId"
     | "/skills/$namespace/$skillName"
     | "/skills/builds/$tag"
+    | "/playground/agents/$agentId/edit"
   id:
     | "__root__"
     | "/"
@@ -211,13 +256,17 @@ export interface FileRouteTypes {
     | "/(registry)/registry"
     | "/customize-tools/$serverName"
     | "/group/$groupName"
+    | "/playground/agents"
     | "/playground/"
     | "/(registry)/registry-group_/$name"
     | "/(registry)/registry_/$name"
     | "/logs/$groupName/$serverName"
+    | "/playground/agents_/$agentId"
+    | "/playground/agents_/new"
     | "/playground/chat/$threadId"
     | "/skills_/$namespace/$skillName"
     | "/skills_/builds/$tag"
+    | "/playground/agents_/$agentId_/edit"
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -288,6 +337,13 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof PlaygroundIndexRouteImport
       parentRoute: typeof PlaygroundRoute
     }
+    "/playground/agents": {
+      id: "/playground/agents"
+      path: "/agents"
+      fullPath: "/playground/agents"
+      preLoaderRoute: typeof PlaygroundAgentsRouteImport
+      parentRoute: typeof PlaygroundRoute
+    }
     "/group/$groupName": {
       id: "/group/$groupName"
       path: "/group/$groupName"
@@ -330,6 +386,20 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof PlaygroundChatThreadIdRouteImport
       parentRoute: typeof PlaygroundRoute
     }
+    "/playground/agents_/new": {
+      id: "/playground/agents_/new"
+      path: "/agents/new"
+      fullPath: "/playground/agents/new"
+      preLoaderRoute: typeof PlaygroundAgentsNewRouteImport
+      parentRoute: typeof PlaygroundRoute
+    }
+    "/playground/agents_/$agentId": {
+      id: "/playground/agents_/$agentId"
+      path: "/agents/$agentId"
+      fullPath: "/playground/agents/$agentId"
+      preLoaderRoute: typeof PlaygroundAgentsAgentIdRouteImport
+      parentRoute: typeof PlaygroundRoute
+    }
     "/logs/$groupName/$serverName": {
       id: "/logs/$groupName/$serverName"
       path: "/logs/$groupName/$serverName"
@@ -351,17 +421,32 @@ declare module "@tanstack/react-router" {
       preLoaderRoute: typeof registryRegistryGroupNameRouteImport
       parentRoute: typeof rootRouteImport
     }
+    "/playground/agents_/$agentId_/edit": {
+      id: "/playground/agents_/$agentId_/edit"
+      path: "/agents/$agentId/edit"
+      fullPath: "/playground/agents/$agentId/edit"
+      preLoaderRoute: typeof PlaygroundAgentsAgentIdEditRouteImport
+      parentRoute: typeof PlaygroundRoute
+    }
   }
 }
 
 interface PlaygroundRouteChildren {
+  PlaygroundAgentsRoute: typeof PlaygroundAgentsRoute
   PlaygroundIndexRoute: typeof PlaygroundIndexRoute
+  PlaygroundAgentsAgentIdRoute: typeof PlaygroundAgentsAgentIdRoute
+  PlaygroundAgentsNewRoute: typeof PlaygroundAgentsNewRoute
   PlaygroundChatThreadIdRoute: typeof PlaygroundChatThreadIdRoute
+  PlaygroundAgentsAgentIdEditRoute: typeof PlaygroundAgentsAgentIdEditRoute
 }
 
 const PlaygroundRouteChildren: PlaygroundRouteChildren = {
+  PlaygroundAgentsRoute: PlaygroundAgentsRoute,
   PlaygroundIndexRoute: PlaygroundIndexRoute,
+  PlaygroundAgentsAgentIdRoute: PlaygroundAgentsAgentIdRoute,
+  PlaygroundAgentsNewRoute: PlaygroundAgentsNewRoute,
   PlaygroundChatThreadIdRoute: PlaygroundChatThreadIdRoute,
+  PlaygroundAgentsAgentIdEditRoute: PlaygroundAgentsAgentIdEditRoute,
 }
 
 const PlaygroundRouteWithChildren = PlaygroundRoute._addFileChildren(
diff --git a/renderer/src/routes/playground.agents.tsx b/renderer/src/routes/playground.agents.tsx
new file mode 100644
index 000000000..7fa012255
--- /dev/null
+++ b/renderer/src/routes/playground.agents.tsx
@@ -0,0 +1,70 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { AgentsPage } from '@/features/agents/components/agents-page'
+import { PlaygroundSidebar } from '@/features/chat/components/playground-sidebar'
+import { usePlaygroundThreads } from '@/features/chat/hooks/use-playground-threads'
+import { clearThreadDraft } from '@/features/chat/hooks/use-thread-draft'
+
+export const Route = createFileRoute('/playground/agents')({
+  component: PlaygroundAgents,
+})
+
+function PlaygroundAgents() {
+  const navigate = useNavigate()
+
+  const {
+    threads,
+    hasThreads,
+    createThread,
+    deleteThread,
+    renameThread,
+    toggleStarThread,
+  } = usePlaygroundThreads(null)
+
+  const handleSelectThread = (id: string) => {
+    void navigate({
+      to: '/playground/chat/$threadId',
+      params: { threadId: id },
+    })
+  }
+
+  const handleCreateThread = async () => {
+    const newId = await createThread()
+    if (newId) {
+      void navigate({
+        to: '/playground/chat/$threadId',
+        params: { threadId: newId },
+      })
+    }
+  }
+
+  const handleDeleteThread = async (id: string) => {
+    const result = await deleteThread(id)
+    if (!result.success) return
+    clearThreadDraft(id)
+    if (result.nextId) {
+      void navigate({
+        to: '/playground/chat/$threadId',
+        params: { threadId: result.nextId },
+      })
+    }
+  }
+
+  return (
+    <div className="absolute inset-0 flex">
+      {hasThreads && (
+        <PlaygroundSidebar
+          threads={threads}
+          activeThreadId={null}
+          onSelectThread={handleSelectThread}
+          onCreateThread={() => void handleCreateThread()}
+          onDeleteThread={(id) => void handleDeleteThread(id)}
+          onRenameThread={renameThread}
+          onToggleStar={toggleStarThread}
+        />
+      )}
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        <AgentsPage />
+      </div>
+    </div>
+  )
+}
diff --git a/renderer/src/routes/playground.agents_.$agentId.tsx b/renderer/src/routes/playground.agents_.$agentId.tsx
new file mode 100644
index 000000000..7f0271199
--- /dev/null
+++ b/renderer/src/routes/playground.agents_.$agentId.tsx
@@ -0,0 +1,88 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import { toast } from 'sonner'
+import { AgentDetailPage } from '@/features/agents/components/agent-detail-page'
+import { PlaygroundSidebar } from '@/features/chat/components/playground-sidebar'
+import { useAgent } from '@/features/agents/hooks/use-agents'
+import { usePlaygroundThreads } from '@/features/chat/hooks/use-playground-threads'
+import { clearThreadDraft } from '@/features/chat/hooks/use-thread-draft'
+
+export const Route = createFileRoute('/playground/agents_/$agentId')({
+  component: PlaygroundAgentDetail,
+})
+
+function PlaygroundAgentDetail() {
+  const { agentId } = Route.useParams()
+  const navigate = useNavigate()
+  const { data: agent, isLoading, isFetched } = useAgent(agentId)
+
+  const {
+    threads,
+    hasThreads,
+    createThread,
+    deleteThread,
+    renameThread,
+    toggleStarThread,
+  } = usePlaygroundThreads(null)
+
+  useEffect(() => {
+    if (isFetched && !agent) {
+      toast.error('Agent not found')
+      void navigate({ to: '/playground/agents', replace: true })
+    }
+  }, [agent, isFetched, navigate])
+
+  const handleSelectThread = (id: string) => {
+    void navigate({
+      to: '/playground/chat/$threadId',
+      params: { threadId: id },
+    })
+  }
+
+  const handleCreateThread = async () => {
+    const newId = await createThread()
+    if (newId) {
+      void navigate({
+        to: '/playground/chat/$threadId',
+        params: { threadId: newId },
+      })
+    }
+  }
+
+  const handleDeleteThread = async (id: string) => {
+    const result = await deleteThread(id)
+    if (!result.success) return
+    clearThreadDraft(id)
+    if (result.nextId) {
+      void navigate({
+        to: '/playground/chat/$threadId',
+        params: { threadId: result.nextId },
+      })
+    }
+  }
+
+  return (
+    <div className="absolute inset-0 flex">
+      {hasThreads && (
+        <PlaygroundSidebar
+          threads={threads}
+          activeThreadId={null}
+          onSelectThread={handleSelectThread}
+          onCreateThread={() => void handleCreateThread()}
+          onDeleteThread={(id) => void handleDeleteThread(id)}
+          onRenameThread={renameThread}
+          onToggleStar={toggleStarThread}
+        />
+      )}
+      <div className="flex min-w-0 flex-1 flex-col overflow-y-auto">
+        <div className="mx-auto flex w-full max-w-6xl flex-1 flex-col p-6">
+          {isLoading ? (
+            <div className="text-muted-foreground text-sm">Loading agent…</div>
+          ) : agent ? (
+            <AgentDetailPage agent={agent} />
+          ) : null}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/renderer/src/routes/playground.agents_.$agentId_.edit.tsx b/renderer/src/routes/playground.agents_.$agentId_.edit.tsx
new file mode 100644
index 000000000..25db5f184
--- /dev/null
+++ b/renderer/src/routes/playground.agents_.$agentId_.edit.tsx
@@ -0,0 +1,42 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import { toast } from 'sonner'
+import { AgentFormPage } from '@/features/agents/components/agent-form-page'
+import { useAgent } from '@/features/agents/hooks/use-agents'
+
+export const Route = createFileRoute('/playground/agents_/$agentId_/edit')({
+  component: EditAgentRoute,
+})
+
+function EditAgentRoute() {
+  const { agentId } = Route.useParams()
+  const navigate = useNavigate()
+  const { data: agent, isLoading, isFetched } = useAgent(agentId)
+
+  useEffect(() => {
+    if (!isFetched) return
+    if (!agent) {
+      toast.error('Agent not found')
+      void navigate({ to: '/playground/agents', replace: true })
+      return
+    }
+    if (agent.kind === 'builtin') {
+      toast.error('Built-in agents cannot be edited. Duplicate it first.')
+      void navigate({
+        to: '/playground/agents/$agentId',
+        params: { agentId: agent.id },
+        replace: true,
+      })
+    }
+  }, [agent, isFetched, navigate])
+
+  return (
+    <div className="absolute inset-0 flex overflow-y-auto">
+      {isLoading ? (
+        <div className="text-muted-foreground p-6 text-sm">Loading agent…</div>
+      ) : agent && agent.kind !== 'builtin' ? (
+        <AgentFormPage mode="edit" agent={agent} />
+      ) : null}
+    </div>
+  )
+}
diff --git a/renderer/src/routes/playground.agents_.new.tsx b/renderer/src/routes/playground.agents_.new.tsx
new file mode 100644
index 000000000..bed72ee1d
--- /dev/null
+++ b/renderer/src/routes/playground.agents_.new.tsx
@@ -0,0 +1,14 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { AgentFormPage } from '@/features/agents/components/agent-form-page'
+
+export const Route = createFileRoute('/playground/agents_/new')({
+  component: NewAgentRoute,
+})
+
+function NewAgentRoute() {
+  return (
+    <div className="absolute inset-0 flex overflow-y-auto">
+      <AgentFormPage mode="create" />
+    </div>
+  )
+}
diff --git a/utils/feature-flags.ts b/utils/feature-flags.ts
index 1c222988a..92cbdebf1 100644
--- a/utils/feature-flags.ts
+++ b/utils/feature-flags.ts
@@ -1,4 +1,5 @@
 export const featureFlagKeys = {
   META_OPTIMIZER: 'meta_optimizer',
   SKILLS: 'skills',
+  AGENTS: 'agents',
 } as const