feat: add opencode-directory-files listing service and consolidate settings editors

Author: chriswritescode-dev

backend/src/routes/settings.test.ts

@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
 import { Hono } from 'hono'
 import { Database } from 'bun:sqlite'
-import { mkdtemp, readFile, rm } from 'fs/promises'
+import { mkdir, mkdtemp, readFile, rm, writeFile } from 'fs/promises'
 import { tmpdir } from 'os'
 import { join } from 'path'
 import { migrate } from '../db/migration-runner'
@@ -344,4 +344,24 @@ describe('settings routes — OpenCode directory file upload', () => {
     await expect(readFile(join(workspacePath, '.config/opencode/commands/git/commit.md'), 'utf8')).resolves.toBe('commit body')
     expect(restart).toHaveBeenCalledTimes(1)
   })
+
+  it('lists uploaded command and agent directory files', async () => {
+    await mkdir(join(workspacePath, '.config/opencode/commands/git'), { recursive: true })
+    await mkdir(join(workspacePath, '.config/opencode/agents/team'), { recursive: true })
+    await writeFile(join(workspacePath, '.config/opencode/commands/git/commit.md'), 'commit body')
+    await writeFile(join(workspacePath, '.config/opencode/commands/git/.DS_Store'), 'metadata')
+    await writeFile(join(workspacePath, '.config/opencode/agents/team/planner.md'), 'planner body')
+
+    const commandsRes = await app.request('/settings/opencode-directory-files?kind=commands')
+    const agentsRes = await app.request('/settings/opencode-directory-files?kind=agents')
+
+    expect(commandsRes.status).toBe(200)
+    expect(agentsRes.status).toBe(200)
+    await expect(commandsRes.json()).resolves.toEqual([
+      { kind: 'commands', name: 'commit', relativePath: 'git/commit.md' },
+    ])
+    await expect(agentsRes.json()).resolves.toEqual([
+      { kind: 'agents', name: 'planner', relativePath: 'team/planner.md' },
+    ])
+  })
 })

backend/src/routes/settings.ts

@@ -44,7 +44,7 @@ import {
   installSkillFromGithubTree,
   installSkillFromUploadedFiles,
 } from '../services/skills'
-import { installOpenCodeDirectoryFiles } from '../services/opencode-directory-files'
+import { installOpenCodeDirectoryFiles, listOpenCodeDirectoryFiles } from '../services/opencode-directory-files'
 import { parseUploadManifest, readUploadedManifestFiles, UploadValidationError } from './upload-utils'
 import { getRepoById } from '../db/queries'
 import { githubFetch } from '../utils/github'
@@ -1275,6 +1275,21 @@ export function createSettingsRoutes(db: Database, gitAuthService: GitAuthServic
     }
   })
 
+  app.get('/opencode-directory-files', async (c) => {
+    try {
+      const kind = z.enum(['agents', 'commands']).parse(c.req.query('kind'))
+      return c.json(await listOpenCodeDirectoryFiles(kind))
+    } catch (error) {
+      logger.error('Failed to list OpenCode directory files:', error)
+
+      if (error instanceof z.ZodError) {
+        return c.json({ error: 'Invalid file kind', details: error.issues }, 400)
+      }
+
+      return c.json({ error: 'Failed to list OpenCode directory files' }, 500)
+    }
+  })
+
   app.post('/skills/install', async (c) => {
     try {
       const contentType = c.req.header('content-type') || ''

backend/src/services/opencode-directory-files.ts

@@ -15,10 +15,40 @@ export interface InstallOpenCodeDirectoryFilesResult {
   filesInstalled: string[]
 }
 
+export interface OpenCodeDirectoryFileInfo {
+  kind: OpenCodeDirectoryFileKind
+  name: string
+  relativePath: string
+}
+
 function getOpenCodeDirectoryRoot(kind: OpenCodeDirectoryFileKind): string {
   return path.join(getWorkspacePath(), '.config', 'opencode', kind)
 }
 
+function getNameFromRelativePath(relativePath: string): string {
+  return relativePath.replace(/\.md$/i, '').split('/').pop() ?? relativePath
+}
+
+async function listMarkdownFiles(rootDir: string, currentDir = rootDir): Promise<string[]> {
+  let entries
+  try {
+    entries = await fs.readdir(currentDir, { withFileTypes: true })
+  } catch (error) {
+    if (error && typeof error === 'object' && 'code' in error && error.code === 'ENOENT') return []
+    throw error
+  }
+
+  const files = await Promise.all(entries.map(async entry => {
+    const absolutePath = path.join(currentDir, entry.name)
+    if (entry.isDirectory()) return listMarkdownFiles(rootDir, absolutePath)
+    if (!entry.isFile() || !entry.name.toLowerCase().endsWith('.md')) return []
+
+    return [path.relative(rootDir, absolutePath).replace(/\\/g, '/')]
+  }))
+
+  return files.flat().sort((a, b) => a.localeCompare(b))
+}
+
 function getTargetRelativePath(relativePath: string, kind: OpenCodeDirectoryFileKind): string | null {
   const normalized = normalizeUploadRelativePath(relativePath, { collapseEmptySegments: true })
   if (!normalized.toLowerCase().endsWith('.md')) return null
@@ -66,3 +96,14 @@ export async function installOpenCodeDirectoryFiles(
     filesInstalled: preparedFiles.map(file => file.relativePath),
   }
 }
+
+export async function listOpenCodeDirectoryFiles(kind: OpenCodeDirectoryFileKind): Promise<OpenCodeDirectoryFileInfo[]> {
+  const rootDir = getOpenCodeDirectoryRoot(kind)
+  const files = await listMarkdownFiles(rootDir)
+
+  return files.map(relativePath => ({
+    kind,
+    name: getNameFromRelativePath(relativePath),
+    relativePath,
+  }))
+}

frontend/src/api/settings.ts

@@ -13,6 +13,7 @@ import type {
   SkillScope,
   InstallSkillFromGithubRequest,
   InstallSkillResponse,
+  OpenCodeDirectoryFileInfo,
 } from './types/settings'
 import { API_BASE_URL } from '@/config'
 import { fetchWrapper, FetchError } from './fetchWrapper'
@@ -326,6 +327,12 @@ export const settingsApi = {
       body: formData,
     })
   },
+
+  listOpenCodeDirectoryFiles: async (kind: 'agents' | 'commands'): Promise<OpenCodeDirectoryFileInfo[]> => {
+    return fetchWrapper(`${API_BASE_URL}/api/settings/opencode-directory-files`, {
+      params: { kind },
+    })
+  },
 }
 
 export interface VersionInfo {

frontend/src/api/types/settings.ts

@@ -137,3 +137,9 @@ export interface SyncOpenCodeImportResponse extends OpenCodeImportStatus {
     errors: Array<{ path: string; error: string }>
   }
 }
+
+export interface OpenCodeDirectoryFileInfo {
+  kind: 'agents' | 'commands'
+  name: string
+  relativePath: string
+}

frontend/src/components/settings/AgentsEditor.test.tsx

@@ -49,6 +49,23 @@ describe('AgentsEditor', () => {
     expect(screen.getByText('helper')).toBeInTheDocument()
   })
 
+  it('renders uploaded directory agent files', () => {
+    const onChange = vi.fn()
+    render(
+      <AgentsEditor
+        agents={{}}
+        directoryAgents={[{ kind: 'agents', name: 'planner', relativePath: 'team/planner.md' }]}
+        onChange={onChange}
+      />,
+      { wrapper: createWrapper() },
+    )
+
+    expect(screen.getByText('planner')).toBeInTheDocument()
+    expect(screen.getByText('Uploaded file: team/planner.md')).toBeInTheDocument()
+    expect(screen.getByText('File')).toBeInTheDocument()
+    expect(screen.queryByText('No agents configured')).not.toBeInTheDocument()
+  })
+
   it('opens AgentDialog when clicking Edit on a row', async () => {
     const user = userEvent.setup()
     const onChange = vi.fn()

frontend/src/components/settings/AgentsEditor.tsx

@@ -6,6 +6,7 @@ import { Dialog, DialogTrigger } from '@/components/ui/dialog'
 import { SettingsList, SettingsListRow } from '@/components/ui/settings-list'
 import { AgentDialog } from './AgentDialog'
 import { UploadFolderButton } from './UploadFolderButton'
+import type { OpenCodeDirectoryFileInfo } from '@/api/types/settings'
 
 interface Agent {
   prompt?: string
@@ -27,12 +28,14 @@ interface Agent {
 
 interface AgentsEditorProps {
   agents: Record<string, Agent>
+  directoryAgents?: OpenCodeDirectoryFileInfo[]
   onChange: (agents: Record<string, Agent>) => void
 }
 
-export function AgentsEditor({ agents, onChange }: AgentsEditorProps) {
+export function AgentsEditor({ agents, directoryAgents = [], onChange }: AgentsEditorProps) {
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
   const [editingAgent, setEditingAgent] = useState<{ name: string; agent: Agent } | null>(null)
+  const hasAgents = Object.keys(agents).length > 0 || directoryAgents.length > 0
 
   const handleAgentSubmit = (name: string, agent: Agent) => {
     if (editingAgent) {
@@ -81,7 +84,7 @@ export function AgentsEditor({ agents, onChange }: AgentsEditorProps) {
       </div>
 
       <SettingsList
-        isEmpty={Object.keys(agents).length === 0}
+        isEmpty={!hasAgents}
         emptyTitle="No agents configured"
         emptyHint="Add your first agent to get started."
         maxHeightClassName="max-h-[calc(100dvh-300px)] sm:max-h-[420px]"
@@ -103,6 +106,14 @@ export function AgentsEditor({ agents, onChange }: AgentsEditorProps) {
             actionsLabel={`Actions for ${name}`}
           />
         ))}
+        {directoryAgents.map((agent) => (
+          <SettingsListRow
+            key={`file:${agent.relativePath}`}
+            title={agent.name}
+            description={`Uploaded file: ${agent.relativePath}`}
+            badges={<Badge variant="secondary" className="shrink-0">File</Badge>}
+          />
+        ))}
       </SettingsList>
 
       <AgentDialog

frontend/src/components/settings/CommandsEditor.test.tsx

@@ -69,6 +69,23 @@ describe('CommandsEditor', () => {
     expect(screen.getByText('/build')).toBeInTheDocument()
   })
 
+  it('renders uploaded directory command files', () => {
+    const onChange = vi.fn()
+    render(
+      <CommandsEditor
+        commands={{}}
+        directoryCommands={[{ kind: 'commands', name: 'deploy', relativePath: 'project/deploy.md' }]}
+        onChange={onChange}
+      />,
+      { wrapper: createWrapper() },
+    )
+
+    expect(screen.getByText('/deploy')).toBeInTheDocument()
+    expect(screen.getByText('Uploaded file: project/deploy.md')).toBeInTheDocument()
+    expect(screen.getByText('File')).toBeInTheDocument()
+    expect(screen.queryByText('No commands configured')).not.toBeInTheDocument()
+  })
+
   it('opens CommandDialog when clicking Edit on a row', async () => {
     const user = userEvent.setup()
     const onChange = vi.fn()

frontend/src/components/settings/CommandsEditor.tsx

@@ -6,6 +6,7 @@ import { Dialog, DialogTrigger } from '@/components/ui/dialog'
 import { SettingsList, SettingsListRow } from '@/components/ui/settings-list'
 import { CommandDialog } from './CommandDialog'
 import { UploadFolderButton } from './UploadFolderButton'
+import type { OpenCodeDirectoryFileInfo } from '@/api/types/settings'
 
 interface Command {
   template: string
@@ -18,12 +19,14 @@ interface Command {
 
 interface CommandsEditorProps {
   commands: Record<string, Command>
+  directoryCommands?: OpenCodeDirectoryFileInfo[]
   onChange: (commands: Record<string, Command>) => void
 }
 
-export function CommandsEditor({ commands, onChange }: CommandsEditorProps) {
+export function CommandsEditor({ commands, directoryCommands = [], onChange }: CommandsEditorProps) {
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false)
   const [editingCommand, setEditingCommand] = useState<{ name: string; command: Command } | null>(null)
+  const hasCommands = Object.keys(commands).length > 0 || directoryCommands.length > 0
 
   const handleCommandSubmit = (name: string, command: Command) => {
     if (editingCommand) {
@@ -72,7 +75,7 @@ export function CommandsEditor({ commands, onChange }: CommandsEditorProps) {
       </div>
 
       <SettingsList
-        isEmpty={Object.keys(commands).length === 0}
+        isEmpty={!hasCommands}
         emptyTitle="No commands configured"
         emptyHint="Add your first command to get started."
         maxHeightClassName="max-h-[calc(100dvh-300px)] sm:max-h-[420px]"
@@ -91,6 +94,14 @@ export function CommandsEditor({ commands, onChange }: CommandsEditorProps) {
             actionsLabel={`Actions for /${name}`}
           />
         ))}
+        {directoryCommands.map((command) => (
+          <SettingsListRow
+            key={`file:${command.relativePath}`}
+            title={`/${command.name}`}
+            description={`Uploaded file: ${command.relativePath}`}
+            badges={<Badge variant="secondary" className="shrink-0">File</Badge>}
+          />
+        ))}
       </SettingsList>
 
       <CommandDialog

frontend/src/components/settings/OpenCodeConfigManager.test.tsx

@@ -11,12 +11,14 @@ const {
   mockRestartOpenCodeServer,
   mockGetOpenCodeImportStatus,
   mockListManagedSkills,
+  mockListOpenCodeDirectoryFiles,
 } = vi.hoisted(() => ({
   mockGetOpenCodeConfigs: vi.fn(),
   mockUpdateOpenCodeConfig: vi.fn(),
   mockRestartOpenCodeServer: vi.fn(),
   mockGetOpenCodeImportStatus: vi.fn(),
   mockListManagedSkills: vi.fn(),
+  mockListOpenCodeDirectoryFiles: vi.fn(),
 }))
 
 vi.mock('@/hooks/useServerHealth', () => ({
@@ -34,6 +36,7 @@ vi.mock('@/api/settings', () => ({
     restartOpenCodeServer: mockRestartOpenCodeServer,
     getOpenCodeImportStatus: mockGetOpenCodeImportStatus,
     listManagedSkills: mockListManagedSkills,
+    listOpenCodeDirectoryFiles: mockListOpenCodeDirectoryFiles,
     syncOpenCodeImport: vi.fn(),
     upgradeOpenCode: vi.fn(),
   },
@@ -73,10 +76,39 @@ describe('OpenCodeConfigManager', () => {
     mockGetOpenCodeConfigs.mockResolvedValue({ configs: [defaultConfig] })
     mockGetOpenCodeImportStatus.mockResolvedValue({})
     mockListManagedSkills.mockResolvedValue([])
+    mockListOpenCodeDirectoryFiles.mockImplementation((kind: 'agents' | 'commands') => {
+      if (kind === 'commands') return Promise.resolve([])
+      return Promise.resolve([])
+    })
     mockUpdateOpenCodeConfig.mockResolvedValue(defaultConfig)
     mockRestartOpenCodeServer.mockResolvedValue({ success: true, message: 'ok' })
   })
 
+  it('shows uploaded command and agent directory files in settings', async () => {
+    mockListOpenCodeDirectoryFiles.mockImplementation((kind: 'agents' | 'commands') => {
+      if (kind === 'commands') return Promise.resolve([{ kind, name: 'deploy', relativePath: 'project/deploy.md' }])
+      return Promise.resolve([{ kind, name: 'planner', relativePath: 'team/planner.md' }])
+    })
+
+    const user = userEvent.setup()
+    renderWithQuery(<OpenCodeConfigManager hideHealthStatus />)
+
+    await screen.findByText('Commands')
+    await vi.waitFor(() => {
+      expect(screen.getAllByText('1 configured').length).toBeGreaterThanOrEqual(2)
+    })
+
+    await user.click(screen.getByRole('button', { name: /Commands/i }))
+    expect(await screen.findByText('/deploy')).toBeInTheDocument()
+    expect(screen.getByText('Uploaded file: project/deploy.md')).toBeInTheDocument()
+
+    const agentsButton = screen.getAllByRole('button', { name: /Agents/i }).find(button => button.textContent?.startsWith('Agents'))
+    expect(agentsButton).toBeDefined()
+    await user.click(agentsButton!)
+    expect(await screen.findByText('planner')).toBeInTheDocument()
+    expect(screen.getByText('Uploaded file: team/planner.md')).toBeInTheDocument()
+  })
+
   it('optimistic delete + restart prompt', async () => {
     let resolveUpdate: (config: OpenCodeConfig) => void = () => {}
     mockUpdateOpenCodeConfig.mockImplementationOnce(() => new Promise<OpenCodeConfig>((resolve) => {