put the open capability in the url
/tasks, /skills and /processes are one component, so one route pair each and the rows become links. drops the auto-select-items[0] effect: the bare route is the list with nothing open, which is a real state. editing and the just-created flag move to ?edit=1 / ?new=1 — a link row cannot reset them on the way out, and deriving them means navigating to another item clears them for free. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -73,7 +73,7 @@ are good building blocks. The **Workspace/Panel framework** contains **zero** ro
|
||||
|
||||
| ID | file:line | Entity | Proposed route | Note |
|
||||
|----|-----------|--------|----------------|------|
|
||||
| M1 | `Screens/Dashboard/CapabilityPage.tsx:431` | task / skill / process | `/tasks/:dir`, `/skills/:dir`, `/processes/:dir` | one component backs **three** screens (Tasks/Skills/Processes). Highest-value MEDIUM. Also drops the auto-select-`items[0]` effect. |
|
||||
| ~~M1~~ | ~~`Screens/Dashboard/CapabilityPage.tsx:431`~~ | task / skill / process | `/tasks/:dirName`, `/skills/:dirName`, `/processes/:dirName` | **Done.** One component backed three screens, so one change covered all of them. The auto-select-`items[0]` effect is gone — the bare route is now the list with an empty detail pane. `editing`/`isNew` moved to `?edit=1` / `?new=1` because a `<Link>` row cannot imperatively reset them. |
|
||||
| M2 | `Screens/Dashboard/TaskLogs/index.tsx:104` | a task-log run | `/task-logs/:id` | detail fetch already keys off the id — clean move. |
|
||||
| M3 | `Screens/Dashboard/Activity/ActivityScreen.tsx:63,73` | background task / detached job | `/activity/:id` | two row types; unify under one param, screen re-derives `task=`/`path=`. |
|
||||
| M4 | `FileBrowser/.../useFileBrowserApp.ts:269`, `FileItem.tsx:516`, `Breadcrumb.tsx:16`, search-hit `:249` | a folder | `/files?path=<dir>` | **files** already open via `?view=`; **folders** are pure `currentPath` state — no URL, no back/forward. Folder rows + crumbs → `<Link>` on a `?path=` param. |
|
||||
@@ -210,7 +210,7 @@ publishers means changing the chat panel, which is another agent's, so it is wri
|
||||
|
||||
### Phase 2 — Add a route, then link (per-entity, medium effort)
|
||||
- [x] **M6** Settings sub-sections → `/settings/:page/:section`; `SectionButton` is now a `SectionLink` (`<NavLink>`), the five `*_SELECTED` globals and `INTEGRATIONS_SETTINGS_TAB` are gone, and each page renders one `SettingsRoute` guard that canonicalises the bare route and a bogus section. **Needs runtime test.**
|
||||
- [ ] **M1** Capabilities → `/tasks|skills|processes/:dir`, rows → `<Link>` (`CapabilityPage.tsx:431`) — covers 3 screens.
|
||||
- [x] **M1** Capabilities → `/tasks|skills|processes/:dirName`, rows → `<Link>`; `CapabilityPage` takes an explicit `basePath` (not reused from `endpoint`, which only happens to match). Selection is `useParams`, the mobile pane swap and back arrow are derived from it, delete navigates to the bare route, and the two per-item modes are `?edit=1` / `?new=1`. No `<Navigate>` guard: an unknown `dirName` gets the empty detail pane. **Needs runtime test.**
|
||||
- [ ] **M2** TaskLogs → `/task-logs/:id` (`TaskLogs/index.tsx:104`).
|
||||
- [ ] **M3** Activity → `/activity/:id` (`ActivityScreen.tsx:63,73`).
|
||||
- [ ] **M4** FileBrowser folders → `/files?path=`; folder rows + breadcrumbs → `<Link>` (`useFileBrowserApp.ts:269`, `FileItem.tsx`, `Breadcrumb.tsx`).
|
||||
|
||||
@@ -85,8 +85,11 @@ export function App() {
|
||||
|
||||
<Route path="/code-editor" element={<Dashboard.CodeEditor />} />
|
||||
<Route path="/skills" element={<Dashboard.Skills />} />
|
||||
<Route path="/skills/:dirName" element={<Dashboard.Skills />} />
|
||||
<Route path="/tasks" element={<Dashboard.Tasks />} />
|
||||
<Route path="/tasks/:dirName" element={<Dashboard.Tasks />} />
|
||||
<Route path="/processes" element={<Dashboard.Processes />} />
|
||||
<Route path="/processes/:dirName" element={<Dashboard.Processes />} />
|
||||
<Route path="/task-logs" element={<Dashboard.TaskLogs />} />
|
||||
<Route path="/jobs" element={<Dashboard.JobsPage />} />
|
||||
<Route path="/jobs/:id" element={<Dashboard.JobsPage />} />
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { Link, useNavigate, useParams, useSearchParams } from 'react-router';
|
||||
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import remarkGfm from 'remark-gfm';
|
||||
@@ -27,9 +28,10 @@ type CapabilityListProps = {
|
||||
kind: string;
|
||||
endpoint: string;
|
||||
queryKey: string;
|
||||
/** Route root for this capability — `/tasks`, `/skills`, `/processes`. Rows link to `<basePath>/<dirName>`. */
|
||||
basePath: string;
|
||||
selected: string | null;
|
||||
onSelect: (dirName: string) => void;
|
||||
onCreate?: (dirName: string) => void;
|
||||
onCreate: (dirName: string) => void;
|
||||
search?: string;
|
||||
showCreate?: boolean;
|
||||
onShowCreateChange?: (value: boolean) => void;
|
||||
@@ -39,6 +41,8 @@ type CapabilityPageProps = {
|
||||
kind: string;
|
||||
endpoint: string;
|
||||
queryKey: string;
|
||||
/** Route root — given explicitly rather than reused from `endpoint`, which only happens to match. */
|
||||
basePath: string;
|
||||
};
|
||||
|
||||
type CapabilityChatProps = {
|
||||
@@ -318,8 +322,8 @@ export const CapabilityList = ({
|
||||
kind,
|
||||
endpoint,
|
||||
queryKey,
|
||||
basePath,
|
||||
selected,
|
||||
onSelect,
|
||||
onCreate,
|
||||
search: externalSearch,
|
||||
showCreate,
|
||||
@@ -348,7 +352,7 @@ export const CapabilityList = ({
|
||||
await qc.invalidateQueries({ queryKey: [queryKey] });
|
||||
setCreating(false);
|
||||
setNewName('');
|
||||
(onCreate ?? onSelect)(res.dirName);
|
||||
onCreate(res.dirName);
|
||||
} catch {
|
||||
toast.error(`Failed to create ${kind}`);
|
||||
}
|
||||
@@ -429,10 +433,10 @@ export const CapabilityList = ({
|
||||
)}
|
||||
<div className="overflow-y-auto flex-1">
|
||||
{filtered.map((item) => (
|
||||
<button
|
||||
<Link
|
||||
key={item.dirName}
|
||||
onClick={() => onSelect(item.dirName)}
|
||||
className={`w-full text-left px-4 py-3 border-b border-duck-dark/5 cursor-pointer transition-colors ${
|
||||
to={`${basePath}/${encodeURIComponent(item.dirName)}`}
|
||||
className={`block w-full text-left px-4 py-3 border-b border-duck-dark/5 cursor-pointer transition-colors ${
|
||||
selected === item.dirName ? 'bg-duck-teal/10' : 'hover:bg-duck-dark/5'
|
||||
}`}
|
||||
>
|
||||
@@ -440,7 +444,7 @@ export const CapabilityList = ({
|
||||
<span className="text-sm font-medium text-duck-dark truncate">{item.name}</span>
|
||||
</div>
|
||||
{item.description && <p className="text-xs text-duck-dark/50 mt-1 line-clamp-2">{item.description}</p>}
|
||||
</button>
|
||||
</Link>
|
||||
))}
|
||||
{items.length === 0 && (
|
||||
<p className="text-sm text-duck-dark/40 px-4 py-6 text-center">No {kind.toLowerCase()}s found</p>
|
||||
@@ -453,25 +457,26 @@ export const CapabilityList = ({
|
||||
);
|
||||
};
|
||||
|
||||
export const CapabilityPage = ({ kind, endpoint, queryKey }: CapabilityPageProps) => {
|
||||
/**
|
||||
* Backs /tasks, /skills and /processes. Which capability is open is `<basePath>/:dirName` — a route pair
|
||||
* with no redirect guard, because the bare route (the list with nothing open) is a real state and an
|
||||
* unknown dirName gets the empty detail pane rather than a rewritten address.
|
||||
*
|
||||
* The two per-item modes ride along as search params instead of local state: a row is a <Link> now, so it
|
||||
* cannot imperatively reset the panes it changes, and deriving them means navigating to another item drops
|
||||
* them for free — no reset effect racing the navigation. `edit` also makes the editor pane linkable.
|
||||
*/
|
||||
export const CapabilityPage = ({ kind, endpoint, queryKey, basePath }: CapabilityPageProps) => {
|
||||
const client = useClient();
|
||||
const qc = useQueryClient();
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [isNew, setIsNew] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const selected = useParams<{ dirName: string }>().dirName ?? null;
|
||||
const [params, setParams] = useSearchParams();
|
||||
const editing = params.get('edit') === '1';
|
||||
const isNew = params.get('new') === '1';
|
||||
const [deleteConfirm, setDeleteConfirm] = useState(false);
|
||||
const [showDetail, setShowDetail] = useState(false);
|
||||
|
||||
const { data: items = [] } = useQuery<CapabilitySummary[]>({
|
||||
queryKey: [queryKey],
|
||||
queryFn: () => client.get<CapabilitySummary[]>(endpoint),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (items.length > 0 && !selected) {
|
||||
setSelected(items[0]!.dirName);
|
||||
}
|
||||
}, [items, selected]);
|
||||
const setEditing = (on: boolean) => setParams(on ? { edit: '1' } : {}, { replace: true });
|
||||
|
||||
const { data: detail } = useQuery<CapabilityDetail>({
|
||||
queryKey: [queryKey, selected],
|
||||
@@ -479,28 +484,15 @@ export const CapabilityPage = ({ kind, endpoint, queryKey }: CapabilityPageProps
|
||||
enabled: !!selected,
|
||||
});
|
||||
|
||||
const selectItem = (dirName: string) => {
|
||||
setSelected(dirName);
|
||||
setShowDetail(true);
|
||||
setIsNew(false);
|
||||
setEditing(false);
|
||||
};
|
||||
|
||||
const handleCreate = (dirName: string) => {
|
||||
setSelected(dirName);
|
||||
setShowDetail(true);
|
||||
setIsNew(true);
|
||||
setEditing(true);
|
||||
};
|
||||
// A brand-new capability is empty, so it opens straight into the chat that fills it in.
|
||||
const handleCreate = (dirName: string) => navigate(`${basePath}/${encodeURIComponent(dirName)}?edit=1&new=1`);
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!selected) return;
|
||||
try {
|
||||
await client.delete(`${endpoint}/${selected}`);
|
||||
setDeleteConfirm(false);
|
||||
setEditing(false);
|
||||
setSelected(null);
|
||||
setShowDetail(false);
|
||||
navigate(basePath, { replace: true });
|
||||
await qc.invalidateQueries({ queryKey: [queryKey] });
|
||||
} catch {
|
||||
toast.error(`Failed to delete ${kind}`);
|
||||
@@ -512,35 +504,32 @@ export const CapabilityPage = ({ kind, endpoint, queryKey }: CapabilityPageProps
|
||||
<div className="flex h-full p-2 md:p-4 gap-2 md:gap-4">
|
||||
{/* Left panel — list */}
|
||||
<Card
|
||||
className={`md:w-72 shrink-0 overflow-hidden flex flex-col ${showDetail ? 'hidden md:flex' : 'flex-1 md:flex-none'}`}
|
||||
className={`md:w-72 shrink-0 overflow-hidden flex flex-col ${selected ? 'hidden md:flex' : 'flex-1 md:flex-none'}`}
|
||||
>
|
||||
<CapabilityList
|
||||
kind={kind}
|
||||
endpoint={endpoint}
|
||||
queryKey={queryKey}
|
||||
basePath={basePath}
|
||||
selected={selected}
|
||||
onSelect={selectItem}
|
||||
onCreate={handleCreate}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
{/* Right panel — detail + chat */}
|
||||
<div className={`flex-1 flex flex-col gap-4 min-h-0 ${showDetail ? 'flex' : 'hidden md:flex'}`}>
|
||||
{/* Right panel — detail + chat. On mobile the two panes swap on `selected`; going back is the bare route. */}
|
||||
<div className={`flex-1 flex flex-col gap-4 min-h-0 ${selected ? 'flex' : 'hidden md:flex'}`}>
|
||||
<Card className={`flex-1 overflow-hidden flex flex-col min-h-0 ${editing ? 'hidden md:flex' : ''}`}>
|
||||
<div className="shrink-0 px-4 py-2 border-b border-duck-dark/10 bg-background/60 flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setShowDetail(false)}
|
||||
className="md:hidden p-1 -ml-1 rounded hover:bg-duck-dark/10 cursor-pointer"
|
||||
>
|
||||
<Link to={basePath} className="md:hidden p-1 -ml-1 rounded hover:bg-duck-dark/10 cursor-pointer">
|
||||
<ArrowLeft className="h-4 w-4 text-duck-dark/60" />
|
||||
</button>
|
||||
</Link>
|
||||
<span className="text-sm font-medium text-duck-dark/70 flex-1">
|
||||
{detail?.name ?? `Select a ${kind.toLowerCase()}`}
|
||||
</span>
|
||||
{detail && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setEditing((e) => !e)}
|
||||
onClick={() => setEditing(!editing)}
|
||||
className={`p-1 rounded hover:bg-duck-dark/10 cursor-pointer transition-colors ${editing ? 'bg-duck-teal/10' : ''}`}
|
||||
>
|
||||
<Pencil className={`h-3.5 w-3.5 ${editing ? 'text-duck-teal' : 'text-duck-dark/50'}`} />
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { CapabilityPage } from '../CapabilityPage';
|
||||
|
||||
export const Processes = () => <CapabilityPage kind="Process" endpoint="/processes" queryKey="processes" />;
|
||||
export const Processes = () => (
|
||||
<CapabilityPage kind="Process" endpoint="/processes" queryKey="processes" basePath="/processes" />
|
||||
);
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { CapabilityPage } from '../CapabilityPage';
|
||||
|
||||
export const Skills = () => <CapabilityPage kind="Skill" endpoint="/skills" queryKey="skills" />;
|
||||
export const Skills = () => <CapabilityPage kind="Skill" endpoint="/skills" queryKey="skills" basePath="/skills" />;
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import { CapabilityPage } from '../CapabilityPage';
|
||||
|
||||
export const Tasks = () => <CapabilityPage kind="Task" endpoint="/tasks" queryKey="tasks" />;
|
||||
export const Tasks = () => <CapabilityPage kind="Task" endpoint="/tasks" queryKey="tasks" basePath="/tasks" />;
|
||||
|
||||
Reference in New Issue
Block a user