feat: Add intelligent auto-router and enhanced integrations
- Add intelligent-router.sh hook for automatic agent routing - Add AUTO-TRIGGER-SUMMARY.md documentation - Add FINAL-INTEGRATION-SUMMARY.md documentation - Complete Prometheus integration (6 commands + 4 tools) - Complete Dexto integration (12 commands + 5 tools) - Enhanced Ralph with access to all agents - Fix /clawd command (removed disable-model-invocation) - Update hooks.json to v5 with intelligent routing - 291 total skills now available - All 21 commands with automatic routing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
admin
@@ -0,0 +1,582 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Input } from '../../ui/input';
|
||||
import { Textarea } from '../../ui/textarea';
|
||||
import { LabelWithTooltip } from '../../ui/label-with-tooltip';
|
||||
import { Button } from '../../ui/button';
|
||||
import { Collapsible } from '../../ui/collapsible';
|
||||
import { Plus, Trash2, ChevronDown, ChevronUp } from 'lucide-react';
|
||||
import { PROMPT_GENERATOR_SOURCES } from '@dexto/core';
|
||||
import type { ContributorConfig } from '@dexto/core';
|
||||
|
||||
// Component works with the object form of SystemPromptConfig (not the string form)
|
||||
type SystemPromptConfigObject = {
|
||||
contributors: ContributorConfig[];
|
||||
};
|
||||
|
||||
interface SystemPromptSectionProps {
|
||||
value: SystemPromptConfigObject;
|
||||
onChange: (value: SystemPromptConfigObject) => void;
|
||||
errors?: Record<string, string>;
|
||||
open?: boolean;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
errorCount?: number;
|
||||
sectionErrors?: string[];
|
||||
}
|
||||
|
||||
export function SystemPromptSection({
|
||||
value,
|
||||
onChange,
|
||||
errors = {},
|
||||
open,
|
||||
onOpenChange,
|
||||
errorCount = 0,
|
||||
sectionErrors = [],
|
||||
}: SystemPromptSectionProps) {
|
||||
const [expandedContributors, setExpandedContributors] = useState<Set<string>>(new Set());
|
||||
// Local state for file paths (comma-separated editing)
|
||||
const [editingFiles, setEditingFiles] = useState<Record<string, string>>({});
|
||||
|
||||
const contributors = value.contributors || [];
|
||||
|
||||
const toggleContributor = (id: string) => {
|
||||
setExpandedContributors((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) {
|
||||
next.delete(id);
|
||||
} else {
|
||||
next.add(id);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const addContributor = () => {
|
||||
const newId = `contributor-${Date.now()}`;
|
||||
const newContributor: ContributorConfig = {
|
||||
id: newId,
|
||||
type: 'static',
|
||||
priority: contributors.length * 10,
|
||||
enabled: true,
|
||||
content: '',
|
||||
};
|
||||
onChange({
|
||||
contributors: [...contributors, newContributor],
|
||||
});
|
||||
setExpandedContributors((prev) => new Set(prev).add(newId));
|
||||
};
|
||||
|
||||
const removeContributor = (id: string) => {
|
||||
onChange({
|
||||
contributors: contributors.filter((c) => c.id !== id),
|
||||
});
|
||||
setExpandedContributors((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(id);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const updateContributor = (id: string, updates: Partial<ContributorConfig>) => {
|
||||
onChange({
|
||||
contributors: contributors.map((c) => {
|
||||
if (c.id === id) {
|
||||
// If ID is changing, handle the ID change
|
||||
if (updates.id && updates.id !== id) {
|
||||
// Update expanded state
|
||||
setExpandedContributors((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(id)) {
|
||||
next.delete(id);
|
||||
next.add(updates.id!);
|
||||
}
|
||||
return next;
|
||||
});
|
||||
}
|
||||
|
||||
// If type is changing, create a new contributor with the new type
|
||||
if (updates.type && updates.type !== c.type) {
|
||||
const baseFields = {
|
||||
id: updates.id || c.id,
|
||||
priority:
|
||||
updates.priority !== undefined ? updates.priority : c.priority,
|
||||
enabled: updates.enabled !== undefined ? updates.enabled : c.enabled,
|
||||
};
|
||||
|
||||
if (updates.type === 'static') {
|
||||
return {
|
||||
...baseFields,
|
||||
type: 'static',
|
||||
content: '',
|
||||
} as ContributorConfig;
|
||||
} else if (updates.type === 'dynamic') {
|
||||
return {
|
||||
...baseFields,
|
||||
type: 'dynamic',
|
||||
source: 'date',
|
||||
} as ContributorConfig;
|
||||
} else if (updates.type === 'file') {
|
||||
return { ...baseFields, type: 'file', files: [] } as ContributorConfig;
|
||||
}
|
||||
}
|
||||
|
||||
return { ...c, ...updates } as ContributorConfig;
|
||||
}
|
||||
return c;
|
||||
}),
|
||||
});
|
||||
};
|
||||
|
||||
// Get the current value for file paths (either from editing state or from config)
|
||||
const getFilesValue = (id: string, files: string[]): string => {
|
||||
return editingFiles[id] ?? files.join(', ');
|
||||
};
|
||||
|
||||
// Update local editing state while typing
|
||||
const setFilesValue = (id: string, value: string) => {
|
||||
setEditingFiles((prev) => ({ ...prev, [id]: value }));
|
||||
};
|
||||
|
||||
// Parse and commit files on blur
|
||||
const commitFiles = (id: string, filesString: string) => {
|
||||
setEditingFiles((prev) => {
|
||||
const next = { ...prev };
|
||||
delete next[id];
|
||||
return next;
|
||||
});
|
||||
|
||||
const files = filesString
|
||||
.split(',')
|
||||
.map((f) => f.trim())
|
||||
.filter(Boolean);
|
||||
|
||||
updateContributor(id, { files: files.length > 0 ? files : [] });
|
||||
};
|
||||
|
||||
return (
|
||||
<Collapsible
|
||||
title="System Prompt"
|
||||
defaultOpen={true}
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
errorCount={errorCount}
|
||||
sectionErrors={sectionErrors}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Define how the agent should behave using multiple contributors with different
|
||||
priorities.
|
||||
</p>
|
||||
|
||||
{contributors.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No contributors configured</p>
|
||||
) : (
|
||||
contributors.map((contributor) => {
|
||||
const isExpanded = expandedContributors.has(contributor.id);
|
||||
return (
|
||||
<div
|
||||
key={contributor.id}
|
||||
className="border border-border rounded-lg overflow-hidden"
|
||||
>
|
||||
{/* Contributor Header */}
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-muted/30">
|
||||
<button
|
||||
onClick={() => toggleContributor(contributor.id)}
|
||||
className="flex items-center gap-2 flex-1 text-left hover:text-foreground transition-colors"
|
||||
>
|
||||
{isExpanded ? (
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4" />
|
||||
)}
|
||||
<span className="font-medium text-sm">
|
||||
{contributor.id}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
({contributor.type}, priority: {contributor.priority})
|
||||
</span>
|
||||
{contributor.enabled === false && (
|
||||
<span className="text-xs text-destructive">
|
||||
(disabled)
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeContributor(contributor.id)}
|
||||
className="h-7 w-7 p-0"
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Contributor Details */}
|
||||
{isExpanded && (
|
||||
<div className="px-3 py-3 space-y-3">
|
||||
{/* Common Fields */}
|
||||
<div>
|
||||
<LabelWithTooltip
|
||||
htmlFor={`contributor-id-${contributor.id}`}
|
||||
tooltip="Unique identifier for this contributor"
|
||||
>
|
||||
ID *
|
||||
</LabelWithTooltip>
|
||||
<Input
|
||||
id={`contributor-id-${contributor.id}`}
|
||||
value={contributor.id}
|
||||
onChange={(e) =>
|
||||
updateContributor(contributor.id, {
|
||||
id: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="e.g., primary, date"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<LabelWithTooltip
|
||||
htmlFor={`contributor-type-${contributor.id}`}
|
||||
tooltip="Type of contributor: static (fixed text), dynamic (runtime generated), or file (from files)"
|
||||
>
|
||||
Type *
|
||||
</LabelWithTooltip>
|
||||
<select
|
||||
id={`contributor-type-${contributor.id}`}
|
||||
value={contributor.type}
|
||||
onChange={(e) =>
|
||||
updateContributor(contributor.id, {
|
||||
type: e.target.value as
|
||||
| 'static'
|
||||
| 'dynamic'
|
||||
| 'file',
|
||||
})
|
||||
}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
||||
>
|
||||
<option value="static">Static</option>
|
||||
<option value="dynamic">Dynamic</option>
|
||||
<option value="file">File</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LabelWithTooltip
|
||||
htmlFor={`contributor-priority-${contributor.id}`}
|
||||
tooltip="Execution priority (lower numbers run first)"
|
||||
>
|
||||
Priority *
|
||||
</LabelWithTooltip>
|
||||
<Input
|
||||
id={`contributor-priority-${contributor.id}`}
|
||||
type="number"
|
||||
value={contributor.priority}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
const num = Number.parseInt(val, 10);
|
||||
updateContributor(contributor.id, {
|
||||
priority: Number.isNaN(num) ? 0 : num,
|
||||
});
|
||||
}}
|
||||
placeholder="0"
|
||||
min="0"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={contributor.enabled !== false}
|
||||
onChange={(e) =>
|
||||
updateContributor(contributor.id, {
|
||||
enabled: e.target.checked,
|
||||
})
|
||||
}
|
||||
className="rounded border-input"
|
||||
/>
|
||||
<span>Enabled</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Type-specific Fields */}
|
||||
{contributor.type === 'static' && (
|
||||
<div>
|
||||
<LabelWithTooltip
|
||||
htmlFor={`contributor-content-${contributor.id}`}
|
||||
tooltip="Static content for the system prompt"
|
||||
>
|
||||
Content *
|
||||
</LabelWithTooltip>
|
||||
<Textarea
|
||||
id={`contributor-content-${contributor.id}`}
|
||||
value={contributor.content}
|
||||
onChange={(e) =>
|
||||
updateContributor(contributor.id, {
|
||||
content: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="You are a helpful assistant..."
|
||||
rows={8}
|
||||
className="font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contributor.type === 'dynamic' && (
|
||||
<div>
|
||||
<LabelWithTooltip
|
||||
htmlFor={`contributor-source-${contributor.id}`}
|
||||
tooltip="Source for dynamic content generation"
|
||||
>
|
||||
Source *
|
||||
</LabelWithTooltip>
|
||||
<select
|
||||
id={`contributor-source-${contributor.id}`}
|
||||
value={contributor.source}
|
||||
onChange={(e) =>
|
||||
updateContributor(contributor.id, {
|
||||
source: e.target.value as Extract<
|
||||
ContributorConfig,
|
||||
{ type: 'dynamic' }
|
||||
>['source'],
|
||||
})
|
||||
}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
||||
>
|
||||
{PROMPT_GENERATOR_SOURCES.map((source) => (
|
||||
<option key={source} value={source}>
|
||||
{source}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contributor.type === 'file' && (
|
||||
<>
|
||||
<div>
|
||||
<LabelWithTooltip
|
||||
htmlFor={`contributor-files-${contributor.id}`}
|
||||
tooltip="File paths to include, comma-separated"
|
||||
>
|
||||
Files *
|
||||
</LabelWithTooltip>
|
||||
<Input
|
||||
id={`contributor-files-${contributor.id}`}
|
||||
value={getFilesValue(
|
||||
contributor.id,
|
||||
contributor.files
|
||||
)}
|
||||
onChange={(e) =>
|
||||
setFilesValue(
|
||||
contributor.id,
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
onBlur={(e) =>
|
||||
commitFiles(
|
||||
contributor.id,
|
||||
e.target.value
|
||||
)
|
||||
}
|
||||
placeholder="./commands/context.md, ./commands/rules.txt"
|
||||
className="font-mono"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* File Options */}
|
||||
<details className="border border-border rounded-md p-2">
|
||||
<summary className="text-sm font-medium cursor-pointer">
|
||||
File Options
|
||||
</summary>
|
||||
<div className="mt-3 space-y-3">
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={
|
||||
contributor.options
|
||||
?.includeFilenames !== false
|
||||
}
|
||||
onChange={(e) =>
|
||||
updateContributor(
|
||||
contributor.id,
|
||||
{
|
||||
options: {
|
||||
...(contributor.options ??
|
||||
{}),
|
||||
includeFilenames:
|
||||
e.target
|
||||
.checked,
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
className="rounded border-input"
|
||||
/>
|
||||
<span>
|
||||
Include filenames as headers
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={
|
||||
contributor.options
|
||||
?.includeMetadata === true
|
||||
}
|
||||
onChange={(e) =>
|
||||
updateContributor(
|
||||
contributor.id,
|
||||
{
|
||||
options: {
|
||||
...(contributor.options ??
|
||||
{}),
|
||||
includeMetadata:
|
||||
e.target
|
||||
.checked,
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
className="rounded border-input"
|
||||
/>
|
||||
<span>Include file metadata</span>
|
||||
</label>
|
||||
|
||||
<div>
|
||||
<LabelWithTooltip
|
||||
htmlFor={`contributor-separator-${contributor.id}`}
|
||||
tooltip="Separator between multiple files"
|
||||
>
|
||||
Separator
|
||||
</LabelWithTooltip>
|
||||
<Input
|
||||
id={`contributor-separator-${contributor.id}`}
|
||||
value={
|
||||
contributor.options
|
||||
?.separator ?? '\n\n---\n\n'
|
||||
}
|
||||
onChange={(e) =>
|
||||
updateContributor(
|
||||
contributor.id,
|
||||
{
|
||||
options: {
|
||||
...(contributor.options ??
|
||||
{}),
|
||||
separator:
|
||||
e.target.value,
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
placeholder="\n\n---\n\n"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LabelWithTooltip
|
||||
htmlFor={`contributor-error-handling-${contributor.id}`}
|
||||
tooltip="How to handle missing or unreadable files"
|
||||
>
|
||||
Error Handling
|
||||
</LabelWithTooltip>
|
||||
<select
|
||||
id={`contributor-error-handling-${contributor.id}`}
|
||||
value={
|
||||
contributor.options
|
||||
?.errorHandling || 'skip'
|
||||
}
|
||||
onChange={(e) =>
|
||||
updateContributor(
|
||||
contributor.id,
|
||||
{
|
||||
options: {
|
||||
...(contributor.options ??
|
||||
{}),
|
||||
errorHandling: e
|
||||
.target
|
||||
.value as
|
||||
| 'skip'
|
||||
| 'error',
|
||||
},
|
||||
}
|
||||
)
|
||||
}
|
||||
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
|
||||
>
|
||||
<option value="skip">
|
||||
Skip missing files
|
||||
</option>
|
||||
<option value="error">
|
||||
Error on missing files
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<LabelWithTooltip
|
||||
htmlFor={`contributor-max-file-size-${contributor.id}`}
|
||||
tooltip="Maximum file size in bytes"
|
||||
>
|
||||
Max File Size (bytes)
|
||||
</LabelWithTooltip>
|
||||
<Input
|
||||
id={`contributor-max-file-size-${contributor.id}`}
|
||||
type="number"
|
||||
value={
|
||||
contributor.options
|
||||
?.maxFileSize || 100000
|
||||
}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
const num = Number.parseInt(
|
||||
val,
|
||||
10
|
||||
);
|
||||
updateContributor(
|
||||
contributor.id,
|
||||
{
|
||||
options: {
|
||||
...(contributor.options ??
|
||||
{}),
|
||||
maxFileSize:
|
||||
Number.isNaN(
|
||||
num
|
||||
)
|
||||
? undefined
|
||||
: num,
|
||||
},
|
||||
}
|
||||
);
|
||||
}}
|
||||
placeholder="100000"
|
||||
min="1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})
|
||||
)}
|
||||
|
||||
{/* Add Contributor Button */}
|
||||
<Button onClick={addContributor} variant="outline" size="sm" className="w-full">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Contributor
|
||||
</Button>
|
||||
|
||||
{errors.systemPrompt && (
|
||||
<p className="text-xs text-destructive mt-1">{errors.systemPrompt}</p>
|
||||
)}
|
||||
</div>
|
||||
</Collapsible>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user