refactor: clean up code formatting and improve readability in various files
This commit is contained in:
Abhimanyu Saharan
@@ -285,241 +285,237 @@ export default function EditAgentPage() {
|
||||
onSubmit={handleSubmit}
|
||||
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
|
||||
>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Basic configuration
|
||||
</p>
|
||||
<div className="mt-4 space-y-6">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Agent name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedName}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="e.g. Deploy bot"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Role
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedIdentityProfile.role}
|
||||
onChange={(event) =>
|
||||
setIdentityProfile({
|
||||
...resolvedIdentityProfile,
|
||||
role: event.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="e.g. Founder, Social Media Manager"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board
|
||||
{resolvedIsGatewayMain ? (
|
||||
<span className="ml-2 text-xs font-normal text-slate-500">
|
||||
optional
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-red-500"> *</span>
|
||||
)}
|
||||
</label>
|
||||
{resolvedBoardId ? (
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs font-medium text-slate-600 hover:text-slate-900"
|
||||
onClick={() => {
|
||||
setBoardId("");
|
||||
}}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Clear board
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select board"
|
||||
value={resolvedBoardId}
|
||||
onValueChange={(value) => setBoardId(value)}
|
||||
options={getBoardOptions(boards)}
|
||||
placeholder={
|
||||
resolvedIsGatewayMain
|
||||
? "No board (main agent)"
|
||||
: "Select board"
|
||||
}
|
||||
searchPlaceholder="Search boards..."
|
||||
emptyMessage="No matching boards."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={boards.length === 0}
|
||||
/>
|
||||
{resolvedIsGatewayMain ? (
|
||||
<p className="text-xs text-slate-500">
|
||||
Main agents are not attached to a board. If a board is
|
||||
selected, it is only used to resolve the gateway main
|
||||
session key and will be cleared on save.
|
||||
</p>
|
||||
) : boards.length === 0 ? (
|
||||
<p className="text-xs text-slate-500">
|
||||
Create a board before assigning agents.
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Emoji
|
||||
</label>
|
||||
<Select
|
||||
value={resolvedIdentityProfile.emoji}
|
||||
onValueChange={(value) =>
|
||||
setIdentityProfile({
|
||||
...resolvedIdentityProfile,
|
||||
emoji: value,
|
||||
})
|
||||
}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select emoji" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{EMOJI_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.glyph} {option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-4">
|
||||
<label className="flex items-start gap-3 text-sm text-slate-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-200"
|
||||
checked={resolvedIsGatewayMain}
|
||||
onChange={(event) =>
|
||||
setIsGatewayMain(event.target.checked)
|
||||
}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<span>
|
||||
<span className="block font-medium text-slate-900">
|
||||
Gateway main agent
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Basic configuration
|
||||
</p>
|
||||
<div className="mt-4 space-y-6">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Agent name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedName}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="e.g. Deploy bot"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Role
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedIdentityProfile.role}
|
||||
onChange={(event) =>
|
||||
setIdentityProfile({
|
||||
...resolvedIdentityProfile,
|
||||
role: event.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="e.g. Founder, Social Media Manager"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board
|
||||
{resolvedIsGatewayMain ? (
|
||||
<span className="ml-2 text-xs font-normal text-slate-500">
|
||||
optional
|
||||
</span>
|
||||
<span className="block text-xs text-slate-500">
|
||||
Uses the gateway main session key and is not tied to a
|
||||
single board.
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-red-500"> *</span>
|
||||
)}
|
||||
</label>
|
||||
{resolvedBoardId ? (
|
||||
<button
|
||||
type="button"
|
||||
className="text-xs font-medium text-slate-600 hover:text-slate-900"
|
||||
onClick={() => {
|
||||
setBoardId("");
|
||||
}}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Clear board
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select board"
|
||||
value={resolvedBoardId}
|
||||
onValueChange={(value) => setBoardId(value)}
|
||||
options={getBoardOptions(boards)}
|
||||
placeholder={
|
||||
resolvedIsGatewayMain
|
||||
? "No board (main agent)"
|
||||
: "Select board"
|
||||
}
|
||||
searchPlaceholder="Search boards..."
|
||||
emptyMessage="No matching boards."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={boards.length === 0}
|
||||
/>
|
||||
{resolvedIsGatewayMain ? (
|
||||
<p className="text-xs text-slate-500">
|
||||
Main agents are not attached to a board. If a board is
|
||||
selected, it is only used to resolve the gateway main
|
||||
session key and will be cleared on save.
|
||||
</p>
|
||||
) : boards.length === 0 ? (
|
||||
<p className="text-xs text-slate-500">
|
||||
Create a board before assigning agents.
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Personality & behavior
|
||||
</p>
|
||||
<div className="mt-4 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Communication style
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedIdentityProfile.communication_style}
|
||||
onChange={(event) =>
|
||||
setIdentityProfile({
|
||||
...resolvedIdentityProfile,
|
||||
communication_style: event.target.value,
|
||||
})
|
||||
}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Soul template
|
||||
</label>
|
||||
<Textarea
|
||||
value={resolvedSoulTemplate}
|
||||
onChange={(event) => setSoulTemplate(event.target.value)}
|
||||
rows={10}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Schedule & notifications
|
||||
</p>
|
||||
<div className="mt-4 grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Interval
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedHeartbeatEvery}
|
||||
onChange={(event) =>
|
||||
setHeartbeatEvery(event.target.value)
|
||||
}
|
||||
placeholder="e.g. 10m"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
Set how often this agent runs HEARTBEAT.md.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Target
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select heartbeat target"
|
||||
value={resolvedHeartbeatTarget}
|
||||
onValueChange={setHeartbeatTarget}
|
||||
options={HEARTBEAT_TARGET_OPTIONS}
|
||||
placeholder="Select target"
|
||||
searchPlaceholder="Search targets..."
|
||||
emptyMessage="No matching targets."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{errorMessage ? (
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? "Saving…" : "Save changes"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={() => router.push(`/agents/${agentId}`)}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Emoji
|
||||
</label>
|
||||
<Select
|
||||
value={resolvedIdentityProfile.emoji}
|
||||
onValueChange={(value) =>
|
||||
setIdentityProfile({
|
||||
...resolvedIdentityProfile,
|
||||
emoji: value,
|
||||
})
|
||||
}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Back to agent
|
||||
</Button>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select emoji" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{EMOJI_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.glyph} {option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 rounded-xl border border-slate-200 bg-slate-50 p-4">
|
||||
<label className="flex items-start gap-3 text-sm text-slate-700">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-200"
|
||||
checked={resolvedIsGatewayMain}
|
||||
onChange={(event) => setIsGatewayMain(event.target.checked)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<span>
|
||||
<span className="block font-medium text-slate-900">
|
||||
Gateway main agent
|
||||
</span>
|
||||
<span className="block text-xs text-slate-500">
|
||||
Uses the gateway main session key and is not tied to a single
|
||||
board.
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Personality & behavior
|
||||
</p>
|
||||
<div className="mt-4 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Communication style
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedIdentityProfile.communication_style}
|
||||
onChange={(event) =>
|
||||
setIdentityProfile({
|
||||
...resolvedIdentityProfile,
|
||||
communication_style: event.target.value,
|
||||
})
|
||||
}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Soul template
|
||||
</label>
|
||||
<Textarea
|
||||
value={resolvedSoulTemplate}
|
||||
onChange={(event) => setSoulTemplate(event.target.value)}
|
||||
rows={10}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Schedule & notifications
|
||||
</p>
|
||||
<div className="mt-4 grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Interval
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedHeartbeatEvery}
|
||||
onChange={(event) => setHeartbeatEvery(event.target.value)}
|
||||
placeholder="e.g. 10m"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
Set how often this agent runs HEARTBEAT.md.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Target
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select heartbeat target"
|
||||
value={resolvedHeartbeatTarget}
|
||||
onValueChange={setHeartbeatTarget}
|
||||
options={HEARTBEAT_TARGET_OPTIONS}
|
||||
placeholder="Select target"
|
||||
searchPlaceholder="Search targets..."
|
||||
emptyMessage="No matching targets."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{errorMessage ? (
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? "Saving…" : "Save changes"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={() => router.push(`/agents/${agentId}`)}
|
||||
>
|
||||
Back to agent
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DashboardPageLayout>
|
||||
);
|
||||
|
||||
@@ -167,193 +167,186 @@ export default function NewAgentPage() {
|
||||
onSubmit={handleSubmit}
|
||||
className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm space-y-6"
|
||||
>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Basic configuration
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Basic configuration
|
||||
</p>
|
||||
<div className="mt-4 space-y-6">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Agent name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="e.g. Deploy bot"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Role
|
||||
</label>
|
||||
<Input
|
||||
value={identityProfile.role}
|
||||
onChange={(event) =>
|
||||
setIdentityProfile((current) => ({
|
||||
...current,
|
||||
role: event.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="e.g. Founder, Social Media Manager"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select board"
|
||||
value={displayBoardId}
|
||||
onValueChange={setBoardId}
|
||||
options={getBoardOptions(boards)}
|
||||
placeholder="Select board"
|
||||
searchPlaceholder="Search boards..."
|
||||
emptyMessage="No matching boards."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={boards.length === 0}
|
||||
/>
|
||||
{boards.length === 0 ? (
|
||||
<p className="text-xs text-slate-500">
|
||||
Create a board before adding agents.
|
||||
</p>
|
||||
<div className="mt-4 space-y-6">
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Agent name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="e.g. Deploy bot"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Role
|
||||
</label>
|
||||
<Input
|
||||
value={identityProfile.role}
|
||||
onChange={(event) =>
|
||||
setIdentityProfile((current) => ({
|
||||
...current,
|
||||
role: event.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="e.g. Founder, Social Media Manager"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select board"
|
||||
value={displayBoardId}
|
||||
onValueChange={setBoardId}
|
||||
options={getBoardOptions(boards)}
|
||||
placeholder="Select board"
|
||||
searchPlaceholder="Search boards..."
|
||||
emptyMessage="No matching boards."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={boards.length === 0}
|
||||
/>
|
||||
{boards.length === 0 ? (
|
||||
<p className="text-xs text-slate-500">
|
||||
Create a board before adding agents.
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Emoji
|
||||
</label>
|
||||
<Select
|
||||
value={identityProfile.emoji}
|
||||
onValueChange={(value) =>
|
||||
setIdentityProfile((current) => ({
|
||||
...current,
|
||||
emoji: value,
|
||||
}))
|
||||
}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select emoji" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{EMOJI_OPTIONS.map((option) => (
|
||||
<SelectItem
|
||||
key={option.value}
|
||||
value={option.value}
|
||||
>
|
||||
{option.glyph} {option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Personality & behavior
|
||||
</p>
|
||||
<div className="mt-4 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Communication style
|
||||
</label>
|
||||
<Input
|
||||
value={identityProfile.communication_style}
|
||||
onChange={(event) =>
|
||||
setIdentityProfile((current) => ({
|
||||
...current,
|
||||
communication_style: event.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Soul template
|
||||
</label>
|
||||
<Textarea
|
||||
value={soulTemplate}
|
||||
onChange={(event) =>
|
||||
setSoulTemplate(event.target.value)
|
||||
}
|
||||
rows={10}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Schedule & notifications
|
||||
</p>
|
||||
<div className="mt-4 grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Interval
|
||||
</label>
|
||||
<Input
|
||||
value={heartbeatEvery}
|
||||
onChange={(event) =>
|
||||
setHeartbeatEvery(event.target.value)
|
||||
}
|
||||
placeholder="e.g. 10m"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
How often this agent runs HEARTBEAT.md (10m, 30m, 2h).
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Target
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select heartbeat target"
|
||||
value={heartbeatTarget}
|
||||
onValueChange={setHeartbeatTarget}
|
||||
options={HEARTBEAT_TARGET_OPTIONS}
|
||||
placeholder="Select target"
|
||||
searchPlaceholder="Search targets..."
|
||||
emptyMessage="No matching targets."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{errorMessage ? (
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Emoji
|
||||
</label>
|
||||
<Select
|
||||
value={identityProfile.emoji}
|
||||
onValueChange={(value) =>
|
||||
setIdentityProfile((current) => ({
|
||||
...current,
|
||||
emoji: value,
|
||||
}))
|
||||
}
|
||||
disabled={isLoading}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select emoji" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{EMOJI_OPTIONS.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.glyph} {option.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? "Creating…" : "Create agent"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={() => router.push("/agents")}
|
||||
>
|
||||
Back to agents
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Personality & behavior
|
||||
</p>
|
||||
<div className="mt-4 space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Communication style
|
||||
</label>
|
||||
<Input
|
||||
value={identityProfile.communication_style}
|
||||
onChange={(event) =>
|
||||
setIdentityProfile((current) => ({
|
||||
...current,
|
||||
communication_style: event.target.value,
|
||||
}))
|
||||
}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Soul template
|
||||
</label>
|
||||
<Textarea
|
||||
value={soulTemplate}
|
||||
onChange={(event) => setSoulTemplate(event.target.value)}
|
||||
rows={10}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
Schedule & notifications
|
||||
</p>
|
||||
<div className="mt-4 grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Interval
|
||||
</label>
|
||||
<Input
|
||||
value={heartbeatEvery}
|
||||
onChange={(event) => setHeartbeatEvery(event.target.value)}
|
||||
placeholder="e.g. 10m"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
How often this agent runs HEARTBEAT.md (10m, 30m, 2h).
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Target
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select heartbeat target"
|
||||
value={heartbeatTarget}
|
||||
onValueChange={setHeartbeatTarget}
|
||||
options={HEARTBEAT_TARGET_OPTIONS}
|
||||
placeholder="Select target"
|
||||
searchPlaceholder="Search targets..."
|
||||
emptyMessage="No matching targets."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{errorMessage ? (
|
||||
<div className="rounded-lg border border-slate-200 bg-white p-3 text-sm text-slate-600 shadow-sm">
|
||||
{errorMessage}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? "Creating…" : "Create agent"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={() => router.push("/agents")}
|
||||
>
|
||||
Back to agents
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DashboardPageLayout>
|
||||
);
|
||||
|
||||
@@ -21,7 +21,10 @@ import { StatusPill } from "@/components/atoms/StatusPill";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
|
||||
import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
|
||||
import {
|
||||
TableEmptyStateRow,
|
||||
TableLoadingRow,
|
||||
} from "@/components/ui/table-state";
|
||||
|
||||
import { ApiError } from "@/api/mutator";
|
||||
import {
|
||||
@@ -257,7 +260,9 @@ export default function AgentsPage() {
|
||||
description={`${agents.length} agent${agents.length === 1 ? "" : "s"} total.`}
|
||||
headerActions={
|
||||
agents.length > 0 ? (
|
||||
<Button onClick={() => router.push("/agents/new")}>New agent</Button>
|
||||
<Button onClick={() => router.push("/agents/new")}>
|
||||
New agent
|
||||
</Button>
|
||||
) : null
|
||||
}
|
||||
isAdmin={isAdmin}
|
||||
@@ -330,7 +335,9 @@ export default function AgentsPage() {
|
||||
</div>
|
||||
|
||||
{agentsQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">{agentsQuery.error.message}</p>
|
||||
<p className="mt-4 text-sm text-red-500">
|
||||
{agentsQuery.error.message}
|
||||
</p>
|
||||
) : null}
|
||||
</DashboardPageLayout>
|
||||
|
||||
@@ -345,8 +352,7 @@ export default function AgentsPage() {
|
||||
title="Delete agent"
|
||||
description={
|
||||
<>
|
||||
This will remove {deleteTarget?.name}. This action cannot be
|
||||
undone.
|
||||
This will remove {deleteTarget?.name}. This action cannot be undone.
|
||||
</>
|
||||
}
|
||||
errorMessage={deleteMutation.error?.message}
|
||||
|
||||
@@ -290,166 +290,164 @@ export default function EditBoardGroupPage() {
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
|
||||
>
|
||||
{assignFailedCount && Number.isFinite(assignFailedCount) ? (
|
||||
<div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 shadow-sm">
|
||||
Group was created, but {assignFailedCount} board assignment
|
||||
{assignFailedCount === 1 ? "" : "s"} failed. You can retry
|
||||
below.
|
||||
</div>
|
||||
) : null}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Group name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedName}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="Group name"
|
||||
disabled={isLoading || !baseGroup}
|
||||
/>
|
||||
</div>
|
||||
{assignFailedCount && Number.isFinite(assignFailedCount) ? (
|
||||
<div className="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900 shadow-sm">
|
||||
Group was created, but {assignFailedCount} board assignment
|
||||
{assignFailedCount === 1 ? "" : "s"} failed. You can retry below.
|
||||
</div>
|
||||
) : null}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Group name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedName}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="Group name"
|
||||
disabled={isLoading || !baseGroup}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Description
|
||||
</label>
|
||||
<Textarea
|
||||
value={resolvedDescription}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
placeholder="What ties these boards together?"
|
||||
className="min-h-[120px]"
|
||||
disabled={isLoading || !baseGroup}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t border-slate-100 pt-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900">Boards</p>
|
||||
<p className="mt-1 text-xs text-slate-500">
|
||||
Assign boards to this group to share context across related
|
||||
work.
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-xs text-slate-500">
|
||||
{selectedBoardIds.size} selected
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
value={boardSearch}
|
||||
onChange={(event) => setBoardSearch(event.target.value)}
|
||||
placeholder="Search boards..."
|
||||
disabled={isLoading || !baseGroup}
|
||||
/>
|
||||
|
||||
<div className="max-h-64 overflow-auto rounded-xl border border-slate-200 bg-slate-50/40">
|
||||
{boardsLoading && boards.length === 0 ? (
|
||||
<div className="px-4 py-6 text-sm text-slate-500">
|
||||
Loading boards…
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Description
|
||||
</label>
|
||||
<Textarea
|
||||
value={resolvedDescription}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
placeholder="What ties these boards together?"
|
||||
className="min-h-[120px]"
|
||||
disabled={isLoading || !baseGroup}
|
||||
/>
|
||||
) : boardsError ? (
|
||||
<div className="px-4 py-6 text-sm text-rose-700">
|
||||
{boardsError.message}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 border-t border-slate-100 pt-6">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-900">Boards</p>
|
||||
<p className="mt-1 text-xs text-slate-500">
|
||||
Assign boards to this group to share context across
|
||||
related work.
|
||||
</p>
|
||||
</div>
|
||||
<span className="text-xs text-slate-500">
|
||||
{selectedBoardIds.size} selected
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
value={boardSearch}
|
||||
onChange={(event) => setBoardSearch(event.target.value)}
|
||||
placeholder="Search boards..."
|
||||
disabled={isLoading || !baseGroup}
|
||||
/>
|
||||
|
||||
<div className="max-h-64 overflow-auto rounded-xl border border-slate-200 bg-slate-50/40">
|
||||
{boardsLoading && boards.length === 0 ? (
|
||||
<div className="px-4 py-6 text-sm text-slate-500">
|
||||
Loading boards…
|
||||
</div>
|
||||
) : boardsError ? (
|
||||
<div className="px-4 py-6 text-sm text-rose-700">
|
||||
{boardsError.message}
|
||||
</div>
|
||||
) : boards.length === 0 ? (
|
||||
<div className="px-4 py-6 text-sm text-slate-500">
|
||||
No boards found.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-slate-200">
|
||||
{boards
|
||||
.filter((board) => {
|
||||
const q = boardSearch.trim().toLowerCase();
|
||||
if (!q) return true;
|
||||
return (
|
||||
board.name.toLowerCase().includes(q) ||
|
||||
board.slug.toLowerCase().includes(q)
|
||||
);
|
||||
})
|
||||
.map((board) => {
|
||||
const checked = selectedBoardIds.has(board.id);
|
||||
const isInThisGroup =
|
||||
board.board_group_id === groupId;
|
||||
const isAlreadyGrouped =
|
||||
Boolean(board.board_group_id) && !isInThisGroup;
|
||||
return (
|
||||
<li key={board.id} className="px-4 py-3">
|
||||
<label className="flex cursor-pointer items-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600"
|
||||
checked={checked}
|
||||
onChange={() => {
|
||||
setSelectedBoardIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(board.id)) {
|
||||
next.delete(board.id);
|
||||
} else {
|
||||
next.add(board.id);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
disabled={isLoading || !baseGroup}
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-medium text-slate-900">
|
||||
{board.name}
|
||||
</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
||||
<span className="font-mono text-[11px] text-slate-400">
|
||||
{board.id}
|
||||
</span>
|
||||
{isAlreadyGrouped ? (
|
||||
<span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-amber-900">
|
||||
in another group
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{assignmentsError ? (
|
||||
<p className="text-sm text-rose-700">{assignmentsError}</p>
|
||||
) : null}
|
||||
{assignmentsResult ? (
|
||||
<p className="text-sm text-slate-700">
|
||||
Updated {assignmentsResult.updated} board
|
||||
{assignmentsResult.updated === 1 ? "" : "s"}, failed{" "}
|
||||
{assignmentsResult.failed}.
|
||||
</p>
|
||||
) : null}
|
||||
) : boards.length === 0 ? (
|
||||
<div className="px-4 py-6 text-sm text-slate-500">
|
||||
No boards found.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-slate-200">
|
||||
{boards
|
||||
.filter((board) => {
|
||||
const q = boardSearch.trim().toLowerCase();
|
||||
if (!q) return true;
|
||||
return (
|
||||
board.name.toLowerCase().includes(q) ||
|
||||
board.slug.toLowerCase().includes(q)
|
||||
);
|
||||
})
|
||||
.map((board) => {
|
||||
const checked = selectedBoardIds.has(board.id);
|
||||
const isInThisGroup = board.board_group_id === groupId;
|
||||
const isAlreadyGrouped =
|
||||
Boolean(board.board_group_id) && !isInThisGroup;
|
||||
return (
|
||||
<li key={board.id} className="px-4 py-3">
|
||||
<label className="flex cursor-pointer items-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600"
|
||||
checked={checked}
|
||||
onChange={() => {
|
||||
setSelectedBoardIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(board.id)) {
|
||||
next.delete(board.id);
|
||||
} else {
|
||||
next.add(board.id);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
disabled={isLoading || !baseGroup}
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-medium text-slate-900">
|
||||
{board.name}
|
||||
</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
||||
<span className="font-mono text-[11px] text-slate-400">
|
||||
{board.id}
|
||||
</span>
|
||||
{isAlreadyGrouped ? (
|
||||
<span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-amber-900">
|
||||
in another group
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-red-500">{errorMessage}</p>
|
||||
) : null}
|
||||
{assignmentsError ? (
|
||||
<p className="text-sm text-rose-700">{assignmentsError}</p>
|
||||
) : null}
|
||||
{assignmentsResult ? (
|
||||
<p className="text-sm text-slate-700">
|
||||
Updated {assignmentsResult.updated} board
|
||||
{assignmentsResult.updated === 1 ? "" : "s"}, failed{" "}
|
||||
{assignmentsResult.failed}.
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => router.push(`/board-groups/${groupId ?? ""}`)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isLoading || !baseGroup || !isFormReady}
|
||||
>
|
||||
{isLoading ? "Saving…" : "Save changes"}
|
||||
</Button>
|
||||
</div>
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-red-500">{errorMessage}</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => router.push(`/board-groups/${groupId ?? ""}`)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isLoading || !baseGroup || !isFormReady}
|
||||
>
|
||||
{isLoading ? "Saving…" : "Save changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</DashboardPageLayout>
|
||||
);
|
||||
|
||||
@@ -135,152 +135,148 @@ export default function NewBoardGroupPage() {
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
|
||||
>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Group name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="e.g. Release hardening"
|
||||
disabled={isCreating}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Group name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={name}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="e.g. Release hardening"
|
||||
disabled={isCreating}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Description
|
||||
</label>
|
||||
<Textarea
|
||||
value={description}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
placeholder="What ties these boards together? What should agents coordinate on?"
|
||||
className="min-h-[120px]"
|
||||
disabled={isCreating}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Description
|
||||
</label>
|
||||
<Textarea
|
||||
value={description}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
placeholder="What ties these boards together? What should agents coordinate on?"
|
||||
className="min-h-[120px]"
|
||||
disabled={isCreating}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Boards
|
||||
</label>
|
||||
<span className="text-xs text-slate-500">
|
||||
{selectedBoardIds.size} selected
|
||||
</span>
|
||||
</div>
|
||||
<Input
|
||||
value={boardSearch}
|
||||
onChange={(event) => setBoardSearch(event.target.value)}
|
||||
placeholder="Search boards..."
|
||||
disabled={isCreating}
|
||||
/>
|
||||
<div className="max-h-64 overflow-auto rounded-xl border border-slate-200 bg-slate-50/40">
|
||||
{boardsQuery.isLoading ? (
|
||||
<div className="px-4 py-6 text-sm text-slate-500">
|
||||
Loading boards…
|
||||
</div>
|
||||
) : boardsQuery.error ? (
|
||||
<div className="px-4 py-6 text-sm text-rose-700">
|
||||
{boardsQuery.error.message}
|
||||
</div>
|
||||
) : boards.length === 0 ? (
|
||||
<div className="px-4 py-6 text-sm text-slate-500">
|
||||
No boards found.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-slate-200">
|
||||
{boards
|
||||
.filter((board) => {
|
||||
const q = boardSearch.trim().toLowerCase();
|
||||
if (!q) return true;
|
||||
return (
|
||||
board.name.toLowerCase().includes(q) ||
|
||||
board.slug.toLowerCase().includes(q)
|
||||
);
|
||||
})
|
||||
.map((board) => {
|
||||
const checked = selectedBoardIds.has(board.id);
|
||||
const isAlreadyGrouped = Boolean(
|
||||
board.board_group_id,
|
||||
);
|
||||
return (
|
||||
<li key={board.id} className="px-4 py-3">
|
||||
<label className="flex cursor-pointer items-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600"
|
||||
checked={checked}
|
||||
onChange={() => {
|
||||
setSelectedBoardIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(board.id)) {
|
||||
next.delete(board.id);
|
||||
} else {
|
||||
next.add(board.id);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
disabled={isCreating}
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-medium text-slate-900">
|
||||
{board.name}
|
||||
</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
||||
<span className="font-mono text-[11px] text-slate-400">
|
||||
{board.id}
|
||||
</span>
|
||||
{isAlreadyGrouped ? (
|
||||
<span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-amber-900">
|
||||
currently grouped
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">
|
||||
Optional. Selected boards will be assigned to this group after
|
||||
creation. You can change membership later in group edit or
|
||||
board settings.
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<div className="flex flex-wrap items-center justify-between gap-2">
|
||||
<label className="text-sm font-medium text-slate-900">Boards</label>
|
||||
<span className="text-xs text-slate-500">
|
||||
{selectedBoardIds.size} selected
|
||||
</span>
|
||||
</div>
|
||||
<Input
|
||||
value={boardSearch}
|
||||
onChange={(event) => setBoardSearch(event.target.value)}
|
||||
placeholder="Search boards..."
|
||||
disabled={isCreating}
|
||||
/>
|
||||
<div className="max-h-64 overflow-auto rounded-xl border border-slate-200 bg-slate-50/40">
|
||||
{boardsQuery.isLoading ? (
|
||||
<div className="px-4 py-6 text-sm text-slate-500">
|
||||
Loading boards…
|
||||
</div>
|
||||
|
||||
{error ? <p className="text-sm text-red-500">{error}</p> : null}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => router.push("/board-groups")}
|
||||
disabled={isCreating}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isCreating || !isFormReady}>
|
||||
{isCreating ? "Creating…" : "Create group"}
|
||||
</Button>
|
||||
) : boardsQuery.error ? (
|
||||
<div className="px-4 py-6 text-sm text-rose-700">
|
||||
{boardsQuery.error.message}
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-100 pt-4 text-xs text-slate-500">
|
||||
Want to assign boards later? Update each board in{" "}
|
||||
<Link
|
||||
href="/boards"
|
||||
className="font-medium text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
Boards
|
||||
</Link>{" "}
|
||||
and pick this group.
|
||||
) : boards.length === 0 ? (
|
||||
<div className="px-4 py-6 text-sm text-slate-500">
|
||||
No boards found.
|
||||
</div>
|
||||
) : (
|
||||
<ul className="divide-y divide-slate-200">
|
||||
{boards
|
||||
.filter((board) => {
|
||||
const q = boardSearch.trim().toLowerCase();
|
||||
if (!q) return true;
|
||||
return (
|
||||
board.name.toLowerCase().includes(q) ||
|
||||
board.slug.toLowerCase().includes(q)
|
||||
);
|
||||
})
|
||||
.map((board) => {
|
||||
const checked = selectedBoardIds.has(board.id);
|
||||
const isAlreadyGrouped = Boolean(board.board_group_id);
|
||||
return (
|
||||
<li key={board.id} className="px-4 py-3">
|
||||
<label className="flex cursor-pointer items-start gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600"
|
||||
checked={checked}
|
||||
onChange={() => {
|
||||
setSelectedBoardIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(board.id)) {
|
||||
next.delete(board.id);
|
||||
} else {
|
||||
next.add(board.id);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}}
|
||||
disabled={isCreating}
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-medium text-slate-900">
|
||||
{board.name}
|
||||
</p>
|
||||
<div className="mt-1 flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
||||
<span className="font-mono text-[11px] text-slate-400">
|
||||
{board.id}
|
||||
</span>
|
||||
{isAlreadyGrouped ? (
|
||||
<span className="rounded-full border border-amber-200 bg-amber-50 px-2 py-0.5 text-amber-900">
|
||||
currently grouped
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">
|
||||
Optional. Selected boards will be assigned to this group after
|
||||
creation. You can change membership later in group edit or board
|
||||
settings.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{error ? <p className="text-sm text-red-500">{error}</p> : null}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => router.push("/board-groups")}
|
||||
disabled={isCreating}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isCreating || !isFormReady}>
|
||||
{isCreating ? "Creating…" : "Create group"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-slate-100 pt-4 text-xs text-slate-500">
|
||||
Want to assign boards later? Update each board in{" "}
|
||||
<Link
|
||||
href="/boards"
|
||||
className="font-medium text-blue-600 hover:text-blue-700"
|
||||
>
|
||||
Boards
|
||||
</Link>{" "}
|
||||
and pick this group.
|
||||
</div>
|
||||
</form>
|
||||
</DashboardPageLayout>
|
||||
);
|
||||
|
||||
@@ -26,7 +26,10 @@ import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout"
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
|
||||
import { formatTimestamp } from "@/lib/formatters";
|
||||
import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
|
||||
import {
|
||||
TableEmptyStateRow,
|
||||
TableLoadingRow,
|
||||
} from "@/components/ui/table-state";
|
||||
|
||||
export default function BoardGroupsPage() {
|
||||
const { isSignedIn } = useAuth();
|
||||
@@ -258,7 +261,9 @@ export default function BoardGroupsPage() {
|
||||
</div>
|
||||
|
||||
{groupsQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">{groupsQuery.error.message}</p>
|
||||
<p className="mt-4 text-sm text-red-500">
|
||||
{groupsQuery.error.message}
|
||||
</p>
|
||||
) : null}
|
||||
</DashboardPageLayout>
|
||||
<ConfirmActionDialog
|
||||
|
||||
@@ -307,178 +307,169 @@ export default function EditBoardPage() {
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm"
|
||||
>
|
||||
{resolvedBoardType !== "general" &&
|
||||
baseBoard &&
|
||||
!(baseBoard.goal_confirmed ?? false) ? (
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-amber-900">
|
||||
Goal needs confirmation
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-amber-800/80">
|
||||
Start onboarding to draft an objective and success
|
||||
metrics.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => setIsOnboardingOpen(true)}
|
||||
disabled={isLoading || !baseBoard}
|
||||
>
|
||||
Start onboarding
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedName}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="Board name"
|
||||
disabled={isLoading || !baseBoard}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Gateway <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select gateway"
|
||||
value={displayGatewayId}
|
||||
onValueChange={setGatewayId}
|
||||
options={gatewayOptions}
|
||||
placeholder="Select gateway"
|
||||
searchPlaceholder="Search gateways..."
|
||||
emptyMessage="No gateways found."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{resolvedBoardType !== "general" &&
|
||||
baseBoard &&
|
||||
!(baseBoard.goal_confirmed ?? false) ? (
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-semibold text-amber-900">
|
||||
Goal needs confirmation
|
||||
</p>
|
||||
<p className="mt-1 text-xs text-amber-800/80">
|
||||
Start onboarding to draft an objective and success metrics.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
onClick={() => setIsOnboardingOpen(true)}
|
||||
disabled={isLoading || !baseBoard}
|
||||
>
|
||||
Start onboarding
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Input
|
||||
value={resolvedName}
|
||||
onChange={(event) => setName(event.target.value)}
|
||||
placeholder="Board name"
|
||||
disabled={isLoading || !baseBoard}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Gateway <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select gateway"
|
||||
value={displayGatewayId}
|
||||
onValueChange={setGatewayId}
|
||||
options={gatewayOptions}
|
||||
placeholder="Select gateway"
|
||||
searchPlaceholder="Search gateways..."
|
||||
emptyMessage="No gateways found."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board type
|
||||
</label>
|
||||
<Select
|
||||
value={resolvedBoardType}
|
||||
onValueChange={setBoardType}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select board type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="goal">Goal</SelectItem>
|
||||
<SelectItem value="general">General</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board group
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select board group"
|
||||
value={resolvedBoardGroupId}
|
||||
onValueChange={setBoardGroupId}
|
||||
options={groupOptions}
|
||||
placeholder="No group"
|
||||
searchPlaceholder="Search groups..."
|
||||
emptyMessage="No groups found."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
Boards in the same group can share cross-board context
|
||||
for agents.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Target date
|
||||
</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={resolvedTargetDate}
|
||||
onChange={(event) =>
|
||||
setTargetDate(event.target.value)
|
||||
}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board type
|
||||
</label>
|
||||
<Select value={resolvedBoardType} onValueChange={setBoardType}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select board type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="goal">Goal</SelectItem>
|
||||
<SelectItem value="general">General</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Board group
|
||||
</label>
|
||||
<SearchableSelect
|
||||
ariaLabel="Select board group"
|
||||
value={resolvedBoardGroupId}
|
||||
onValueChange={setBoardGroupId}
|
||||
options={groupOptions}
|
||||
placeholder="No group"
|
||||
searchPlaceholder="Search groups..."
|
||||
emptyMessage="No groups found."
|
||||
triggerClassName="w-full h-11 rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
|
||||
contentClassName="rounded-xl border border-slate-200 shadow-lg"
|
||||
itemClassName="px-4 py-3 text-sm text-slate-700 data-[selected=true]:bg-slate-50 data-[selected=true]:text-slate-900"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
Boards in the same group can share cross-board context for
|
||||
agents.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Target date
|
||||
</label>
|
||||
<Input
|
||||
type="date"
|
||||
value={resolvedTargetDate}
|
||||
onChange={(event) => setTargetDate(event.target.value)}
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Objective
|
||||
</label>
|
||||
<Textarea
|
||||
value={resolvedObjective}
|
||||
onChange={(event) => setObjective(event.target.value)}
|
||||
placeholder="What should this board achieve?"
|
||||
className="min-h-[120px]"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Objective
|
||||
</label>
|
||||
<Textarea
|
||||
value={resolvedObjective}
|
||||
onChange={(event) => setObjective(event.target.value)}
|
||||
placeholder="What should this board achieve?"
|
||||
className="min-h-[120px]"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Success metrics (JSON)
|
||||
</label>
|
||||
<Textarea
|
||||
value={resolvedSuccessMetrics}
|
||||
onChange={(event) =>
|
||||
setSuccessMetrics(event.target.value)
|
||||
}
|
||||
placeholder='e.g. { "target": "Launch by week 2" }'
|
||||
className="min-h-[140px] font-mono text-xs"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
Add key outcomes so the lead agent can measure progress.
|
||||
</p>
|
||||
{metricsError ? (
|
||||
<p className="text-xs text-red-500">{metricsError}</p>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium text-slate-900">
|
||||
Success metrics (JSON)
|
||||
</label>
|
||||
<Textarea
|
||||
value={resolvedSuccessMetrics}
|
||||
onChange={(event) => setSuccessMetrics(event.target.value)}
|
||||
placeholder='e.g. { "target": "Launch by week 2" }'
|
||||
className="min-h-[140px] font-mono text-xs"
|
||||
disabled={isLoading}
|
||||
/>
|
||||
<p className="text-xs text-slate-500">
|
||||
Add key outcomes so the lead agent can measure progress.
|
||||
</p>
|
||||
{metricsError ? (
|
||||
<p className="text-xs text-red-500">{metricsError}</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{gateways.length === 0 ? (
|
||||
<div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
|
||||
<p>
|
||||
No gateways available. Create one in Gateways to
|
||||
continue.
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
{gateways.length === 0 ? (
|
||||
<div className="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
|
||||
<p>
|
||||
No gateways available. Create one in Gateways to continue.
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-red-500">{errorMessage}</p>
|
||||
) : null}
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-red-500">{errorMessage}</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => router.push(`/boards/${boardId}`)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isLoading || !baseBoard || !isFormReady}
|
||||
>
|
||||
{isLoading ? "Saving…" : "Save changes"}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => router.push(`/boards/${boardId}`)}
|
||||
disabled={isLoading}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isLoading || !baseBoard || !isFormReady}
|
||||
>
|
||||
{isLoading ? "Saving…" : "Save changes"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</DashboardPageLayout>
|
||||
|
||||
@@ -225,7 +225,9 @@ export default function NewBoardPage() {
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{errorMessage ? <p className="text-sm text-red-500">{errorMessage}</p> : null}
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-red-500">{errorMessage}</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button
|
||||
|
||||
@@ -31,7 +31,10 @@ import type { BoardGroupRead, BoardRead } from "@/api/generated/model";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
|
||||
import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
|
||||
import {
|
||||
TableEmptyStateRow,
|
||||
TableLoadingRow,
|
||||
} from "@/components/ui/table-state";
|
||||
|
||||
const compactId = (value: string) =>
|
||||
value.length > 8 ? `${value.slice(0, 8)}…` : value;
|
||||
@@ -312,7 +315,9 @@ export default function BoardsPage() {
|
||||
</div>
|
||||
|
||||
{boardsQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">{boardsQuery.error.message}</p>
|
||||
<p className="mt-4 text-sm text-red-500">
|
||||
{boardsQuery.error.message}
|
||||
</p>
|
||||
) : null}
|
||||
</DashboardPageLayout>
|
||||
<ConfirmActionDialog
|
||||
@@ -326,8 +331,7 @@ export default function BoardsPage() {
|
||||
title="Delete board"
|
||||
description={
|
||||
<>
|
||||
This will remove {deleteTarget?.name}. This action cannot be
|
||||
undone.
|
||||
This will remove {deleteTarget?.name}. This action cannot be undone.
|
||||
</>
|
||||
}
|
||||
errorMessage={deleteMutation.error?.message}
|
||||
|
||||
@@ -131,154 +131,146 @@ export default function GatewayDetailPage() {
|
||||
</div>
|
||||
) : gateway ? (
|
||||
<div className="space-y-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Connection
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500">
|
||||
<span
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
statusQuery.isLoading
|
||||
? "bg-slate-300"
|
||||
: isConnected
|
||||
? "bg-emerald-500"
|
||||
: "bg-rose-500"
|
||||
}`}
|
||||
/>
|
||||
<span>
|
||||
{statusQuery.isLoading
|
||||
? "Checking"
|
||||
: isConnected
|
||||
? "Online"
|
||||
: "Offline"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-3 text-sm text-slate-700">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Gateway URL
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.url}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Token
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{maskToken(gateway.token)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Connection
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-500">
|
||||
<span
|
||||
className={`h-2 w-2 rounded-full ${
|
||||
statusQuery.isLoading
|
||||
? "bg-slate-300"
|
||||
: isConnected
|
||||
? "bg-emerald-500"
|
||||
: "bg-rose-500"
|
||||
}`}
|
||||
/>
|
||||
<span>
|
||||
{statusQuery.isLoading
|
||||
? "Checking"
|
||||
: isConnected
|
||||
? "Online"
|
||||
: "Offline"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 space-y-3 text-sm text-slate-700">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Gateway URL
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.url}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">Token</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{maskToken(gateway.token)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Runtime
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Runtime
|
||||
</p>
|
||||
<div className="mt-4 space-y-3 text-sm text-slate-700">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Main session key
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.main_session_key}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Workspace root
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.workspace_root}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">Created</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{formatTimestamp(gateway.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">Updated</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{formatTimestamp(gateway.updated_at)}
|
||||
</p>
|
||||
<div className="mt-4 space-y-3 text-sm text-slate-700">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Main session key
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.main_session_key}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Workspace root
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{gateway.workspace_root}
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Created
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{formatTimestamp(gateway.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs uppercase text-slate-400">
|
||||
Updated
|
||||
</p>
|
||||
<p className="mt-1 text-sm font-medium text-slate-900">
|
||||
{formatTimestamp(gateway.updated_at)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Agents
|
||||
</p>
|
||||
{agentsQuery.isLoading ? (
|
||||
<span className="text-xs text-slate-500">Loading…</span>
|
||||
) : (
|
||||
<span className="text-xs text-slate-500">
|
||||
{agents.length} total
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4 overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
|
||||
<tr>
|
||||
<th className="px-4 py-3">Agent</th>
|
||||
<th className="px-4 py-3">Status</th>
|
||||
<th className="px-4 py-3">Last seen</th>
|
||||
<th className="px-4 py-3">Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{agents.length === 0 && !agentsQuery.isLoading ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
className="px-4 py-6 text-center text-xs text-slate-500"
|
||||
>
|
||||
No agents assigned to this gateway.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
agents.map((agent) => (
|
||||
<tr key={agent.id} className="hover:bg-slate-50">
|
||||
<td className="px-4 py-3">
|
||||
<p className="text-sm font-medium text-slate-900">
|
||||
{agent.name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
{agent.id}
|
||||
</p>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-700">
|
||||
{agent.status}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-slate-500">
|
||||
{formatTimestamp(agent.last_seen_at ?? null)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-slate-500">
|
||||
{formatTimestamp(agent.updated_at)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-xs font-semibold uppercase tracking-wide text-slate-500">
|
||||
Agents
|
||||
</p>
|
||||
{agentsQuery.isLoading ? (
|
||||
<span className="text-xs text-slate-500">Loading…</span>
|
||||
) : (
|
||||
<span className="text-xs text-slate-500">
|
||||
{agents.length} total
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-4 overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="bg-slate-50 text-xs uppercase tracking-wide text-slate-500">
|
||||
<tr>
|
||||
<th className="px-4 py-3">Agent</th>
|
||||
<th className="px-4 py-3">Status</th>
|
||||
<th className="px-4 py-3">Last seen</th>
|
||||
<th className="px-4 py-3">Updated</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{agents.length === 0 && !agentsQuery.isLoading ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={4}
|
||||
className="px-4 py-6 text-center text-xs text-slate-500"
|
||||
>
|
||||
No agents assigned to this gateway.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
agents.map((agent) => (
|
||||
<tr key={agent.id} className="hover:bg-slate-50">
|
||||
<td className="px-4 py-3">
|
||||
<p className="text-sm font-medium text-slate-900">
|
||||
{agent.name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">{agent.id}</p>
|
||||
</td>
|
||||
<td className="px-4 py-3 text-sm text-slate-700">
|
||||
{agent.status}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-slate-500">
|
||||
{formatTimestamp(agent.last_seen_at ?? null)}
|
||||
</td>
|
||||
<td className="px-4 py-3 text-xs text-slate-500">
|
||||
{formatTimestamp(agent.updated_at)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</DashboardPageLayout>
|
||||
|
||||
@@ -19,7 +19,10 @@ import { useQueryClient } from "@tanstack/react-query";
|
||||
import { DashboardPageLayout } from "@/components/templates/DashboardPageLayout";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { ConfirmActionDialog } from "@/components/ui/confirm-action-dialog";
|
||||
import { TableEmptyStateRow, TableLoadingRow } from "@/components/ui/table-state";
|
||||
import {
|
||||
TableEmptyStateRow,
|
||||
TableLoadingRow,
|
||||
} from "@/components/ui/table-state";
|
||||
|
||||
import { ApiError } from "@/api/mutator";
|
||||
import {
|
||||
@@ -196,95 +199,104 @@ export default function GatewaysPage() {
|
||||
return (
|
||||
<>
|
||||
<DashboardPageLayout
|
||||
signedOut={{
|
||||
message: "Sign in to view gateways.",
|
||||
forceRedirectUrl: "/gateways",
|
||||
}}
|
||||
title="Gateways"
|
||||
description="Manage OpenClaw gateway connections used by boards"
|
||||
headerActions={
|
||||
isAdmin && gateways.length > 0 ? (
|
||||
<Link
|
||||
href="/gateways/new"
|
||||
className={buttonVariants({
|
||||
size: "md",
|
||||
variant: "primary",
|
||||
})}
|
||||
>
|
||||
Create gateway
|
||||
</Link>
|
||||
) : null
|
||||
}
|
||||
isAdmin={isAdmin}
|
||||
adminOnlyMessage="Only organization owners and admins can access gateways."
|
||||
stickyHeader
|
||||
>
|
||||
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th key={header.id} className="px-6 py-3">
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{gatewaysQuery.isLoading ? (
|
||||
<TableLoadingRow colSpan={columns.length} />
|
||||
) : table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id} className="hover:bg-slate-50">
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id} className="px-6 py-4">
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</td>
|
||||
signedOut={{
|
||||
message: "Sign in to view gateways.",
|
||||
forceRedirectUrl: "/gateways",
|
||||
}}
|
||||
title="Gateways"
|
||||
description="Manage OpenClaw gateway connections used by boards"
|
||||
headerActions={
|
||||
isAdmin && gateways.length > 0 ? (
|
||||
<Link
|
||||
href="/gateways/new"
|
||||
className={buttonVariants({
|
||||
size: "md",
|
||||
variant: "primary",
|
||||
})}
|
||||
>
|
||||
Create gateway
|
||||
</Link>
|
||||
) : null
|
||||
}
|
||||
isAdmin={isAdmin}
|
||||
adminOnlyMessage="Only organization owners and admins can access gateways."
|
||||
stickyHeader
|
||||
>
|
||||
<div className="overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-left text-sm">
|
||||
<thead className="sticky top-0 z-10 bg-slate-50 text-xs font-semibold uppercase tracking-wider text-slate-500">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<tr key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => (
|
||||
<th key={header.id} className="px-6 py-3">
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<TableEmptyStateRow
|
||||
colSpan={columns.length}
|
||||
icon={
|
||||
<svg
|
||||
className="h-16 w-16 text-slate-300"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect x="2" y="7" width="20" height="14" rx="2" ry="2" />
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
|
||||
</svg>
|
||||
}
|
||||
title="No gateways yet"
|
||||
description="Create your first gateway to connect boards and start managing your OpenClaw connections."
|
||||
actionHref="/gateways/new"
|
||||
actionLabel="Create your first gateway"
|
||||
/>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
))}
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100">
|
||||
{gatewaysQuery.isLoading ? (
|
||||
<TableLoadingRow colSpan={columns.length} />
|
||||
) : table.getRowModel().rows.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<tr key={row.id} className="hover:bg-slate-50">
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<td key={cell.id} className="px-6 py-4">
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))
|
||||
) : (
|
||||
<TableEmptyStateRow
|
||||
colSpan={columns.length}
|
||||
icon={
|
||||
<svg
|
||||
className="h-16 w-16 text-slate-300"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<rect
|
||||
x="2"
|
||||
y="7"
|
||||
width="20"
|
||||
height="14"
|
||||
rx="2"
|
||||
ry="2"
|
||||
/>
|
||||
<path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" />
|
||||
</svg>
|
||||
}
|
||||
title="No gateways yet"
|
||||
description="Create your first gateway to connect boards and start managing your OpenClaw connections."
|
||||
actionHref="/gateways/new"
|
||||
actionLabel="Create your first gateway"
|
||||
/>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{gatewaysQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">{gatewaysQuery.error.message}</p>
|
||||
) : null}
|
||||
{gatewaysQuery.error ? (
|
||||
<p className="mt-4 text-sm text-red-500">
|
||||
{gatewaysQuery.error.message}
|
||||
</p>
|
||||
) : null}
|
||||
</DashboardPageLayout>
|
||||
|
||||
<ConfirmActionDialog
|
||||
|
||||
@@ -378,7 +378,9 @@ export default function OrganizationPage() {
|
||||
});
|
||||
|
||||
const membershipRole =
|
||||
membershipQuery.data?.status === 200 ? membershipQuery.data.data.role : null;
|
||||
membershipQuery.data?.status === 200
|
||||
? membershipQuery.data.data.role
|
||||
: null;
|
||||
const isOwner = membershipRole === "owner";
|
||||
const isAdmin = membershipRole === "admin" || membershipRole === "owner";
|
||||
|
||||
@@ -842,7 +844,9 @@ export default function OrganizationPage() {
|
||||
onClick={() => setInviteDialogOpen(true)}
|
||||
disabled={!isAdmin}
|
||||
title={
|
||||
isAdmin ? undefined : "Only organization admins can invite"
|
||||
isAdmin
|
||||
? undefined
|
||||
: "Only organization admins can invite"
|
||||
}
|
||||
>
|
||||
<UserPlus className="h-4 w-4" />
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
|
||||
import { ActivityFeed } from "./ActivityFeed";
|
||||
|
||||
type Item = { id: string; label: string };
|
||||
@@ -56,9 +55,7 @@ describe("ActivityFeed", () => {
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(
|
||||
screen.getByText("Waiting for new comments…"),
|
||||
).toBeInTheDocument();
|
||||
expect(screen.getByText("Waiting for new comments…")).toBeInTheDocument();
|
||||
expect(
|
||||
screen.getByText("When agents post updates, they will show up here."),
|
||||
).toBeInTheDocument();
|
||||
|
||||
@@ -159,10 +159,17 @@ export function GatewayForm({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{errorMessage ? <p className="text-sm text-red-500">{errorMessage}</p> : null}
|
||||
{errorMessage ? (
|
||||
<p className="text-sm text-red-500">{errorMessage}</p>
|
||||
) : null}
|
||||
|
||||
<div className="flex justify-end gap-3">
|
||||
<Button type="button" variant="ghost" onClick={onCancel} disabled={isLoading}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={onCancel}
|
||||
disabled={isLoading}
|
||||
>
|
||||
{cancelLabel}
|
||||
</Button>
|
||||
<Button type="submit" disabled={isLoading || !canSubmit}>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { createExponentialBackoff } from "./backoff";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
|
||||
|
||||
describe("createExponentialBackoff", () => {
|
||||
it("uses default options", () => {
|
||||
const backoff = createExponentialBackoff();
|
||||
|
||||
@@ -50,7 +50,8 @@ export async function checkGatewayConnection(params: {
|
||||
} catch (error) {
|
||||
return {
|
||||
ok: false,
|
||||
message: error instanceof Error ? error.message : "Unable to reach gateway.",
|
||||
message:
|
||||
error instanceof Error ? error.message : "Unable to reach gateway.",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user