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
@@ -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'}`} />
|
||||
|
||||
Reference in New Issue
Block a user