cleanup: remove all unconnected Phase I+J scaffold code and unconnected Phase F+H modules (workstream_contract, proactive_feed, dashboard, dsgvo_export, onboarding, mcp_exposure, integration_tools, self_improvement, agent_workstream, workflows/workstream, knowledge_sources, knowledge_extraction, knowledge_lifecycle, platform.py routes, 13 frontend files, 2 test files), restore Dashboard.tsx, tsc clean, backend OK
This commit is contained in:
Agent Zero
@@ -1,159 +0,0 @@
|
||||
/**
|
||||
* Controlled Self-Improvement API client (Phase J).
|
||||
*
|
||||
* All requests use the shared `apiClient` (`baseURL: '/api/v1'`) and target
|
||||
* the self-improvement routes under `/improvement/...`.
|
||||
*/
|
||||
|
||||
import { apiDelete, apiGet, apiPost, apiPut } from './client';
|
||||
|
||||
// ─── Types ───
|
||||
|
||||
export type ProposalType =
|
||||
| 'agent'
|
||||
| 'skill'
|
||||
| 'trigger'
|
||||
| 'workflow'
|
||||
| 'miniapp_template'
|
||||
| 'plugin_patch';
|
||||
|
||||
export type ProposalStatus =
|
||||
| 'draft'
|
||||
| 'evaluating'
|
||||
| 'pending_approval'
|
||||
| 'approved'
|
||||
| 'rejected'
|
||||
| 'active'
|
||||
| 'rolled_back'
|
||||
| 'expired';
|
||||
|
||||
export type SignalType =
|
||||
| 'agent_run'
|
||||
| 'workflow_run'
|
||||
| 'proactive_suggestion'
|
||||
| 'audit_log'
|
||||
| 'entity_history'
|
||||
| 'user_correction'
|
||||
| 'handoff'
|
||||
| 'error_retry';
|
||||
|
||||
export interface ImprovementSignal {
|
||||
id: string;
|
||||
signal_type: SignalType;
|
||||
source_ref: string;
|
||||
tenant_id: string;
|
||||
user_id?: string | null;
|
||||
timestamp: string;
|
||||
outcome: string;
|
||||
metadata: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface DetectedPattern {
|
||||
id: string;
|
||||
pattern_type: string;
|
||||
description: string;
|
||||
confidence: number;
|
||||
occurrence_count: number;
|
||||
evidence_refs: string[];
|
||||
metadata: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface EvaluationResult {
|
||||
proposal_id?: string;
|
||||
draft_id?: string;
|
||||
evaluated_at?: string;
|
||||
test_cases: number;
|
||||
passed: number;
|
||||
failed: number;
|
||||
score: number;
|
||||
recommendation: string;
|
||||
details?: unknown[];
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
export interface ImprovementProposal {
|
||||
id: string;
|
||||
proposal_type: ProposalType;
|
||||
title: string;
|
||||
description: string;
|
||||
rationale: string;
|
||||
expected_benefit: string;
|
||||
risk_assessment: string;
|
||||
status: ProposalStatus;
|
||||
evidence_refs: string[];
|
||||
pattern_refs: string[];
|
||||
draft_config: Record<string, unknown>;
|
||||
evaluation_result: EvaluationResult;
|
||||
measurement_before: Record<string, unknown>;
|
||||
measurement_after: Record<string, unknown>;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
approved_by?: string | null;
|
||||
activated_at?: string | null;
|
||||
}
|
||||
|
||||
export interface VersionedDraft {
|
||||
id: string;
|
||||
proposal_id: string;
|
||||
version: number;
|
||||
config: Record<string, unknown>;
|
||||
previous_version_id?: string | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export interface ProposalActionResponse {
|
||||
proposal_id: string;
|
||||
status: string;
|
||||
error?: string;
|
||||
approval_id?: string;
|
||||
activated_at?: string;
|
||||
rolled_back_at?: string;
|
||||
rollback_available?: boolean;
|
||||
previous_version_id?: string | null;
|
||||
evaluation?: EvaluationResult;
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
// ─── Proposals ───
|
||||
|
||||
export const fetchProposals = (status?: ProposalStatus) =>
|
||||
apiGet<ImprovementProposal[]>('/improvement/proposals', {
|
||||
params: status ? { status } : {},
|
||||
});
|
||||
|
||||
export const fetchProposal = (id: string) =>
|
||||
apiGet<ImprovementProposal>(`/improvement/proposals/${id}`);
|
||||
|
||||
export const approveProposal = (id: string) =>
|
||||
apiPost<ProposalActionResponse>(`/improvement/proposals/${id}/approve`);
|
||||
|
||||
export const rejectProposal = (id: string) =>
|
||||
apiPost<ProposalActionResponse>(`/improvement/proposals/${id}/reject`);
|
||||
|
||||
export const rollbackProposal = (id: string) =>
|
||||
apiPost<ProposalActionResponse>(`/improvement/proposals/${id}/rollback`);
|
||||
|
||||
export const activateProposal = (id: string) =>
|
||||
apiPost<ProposalActionResponse>(`/improvement/proposals/${id}/activate`);
|
||||
|
||||
export const deleteProposal = (id: string) =>
|
||||
apiDelete<{ status: string }>(`/improvement/proposals/${id}`);
|
||||
|
||||
// ─── Patterns ───
|
||||
|
||||
export const fetchPatterns = () => apiGet<DetectedPattern[]>('/improvement/patterns');
|
||||
|
||||
// ─── Signals ───
|
||||
|
||||
export const fetchSignals = (days?: number) =>
|
||||
apiGet<ImprovementSignal[]>('/improvement/signals', {
|
||||
params: days ? { days } : {},
|
||||
});
|
||||
|
||||
// ─── Drafts ───
|
||||
|
||||
export const fetchDraft = (proposalId: string) =>
|
||||
apiGet<VersionedDraft>(`/improvement/proposals/${proposalId}/draft`);
|
||||
|
||||
export const updateDraft = (proposalId: string, config: Record<string, unknown>) =>
|
||||
apiPut<VersionedDraft>(`/improvement/proposals/${proposalId}/draft`, { config });
|
||||
@@ -1,87 +0,0 @@
|
||||
/**
|
||||
* MiniApp manifest types + workstream block types (Phase I.2 Workstream & MiniApps).
|
||||
*
|
||||
* Mirrors backend contracts:
|
||||
* - app/plugins/manifest.py → MiniAppContribution
|
||||
* - app/ai/workstream_contract.py → WorkstreamBlock / WorkstreamMessage
|
||||
* - app/ai/proactive_feed.py → ProactiveSuggestion
|
||||
*/
|
||||
|
||||
// ── MiniApp manifest contribution (backend: MiniAppContribution) ──
|
||||
|
||||
export interface MiniAppContribution {
|
||||
app_id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
render_schema: Record<string, unknown>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Plugin manifest with optional `miniapps` field.
|
||||
* Only the fields relevant to MiniApps are declared here; the full manifest
|
||||
* is typed in store/pluginStore.ts (PluginUiManifest).
|
||||
*/
|
||||
export interface PluginManifestWithMiniApps {
|
||||
name: string;
|
||||
display_name: string;
|
||||
version: string;
|
||||
miniapps?: MiniAppContribution[];
|
||||
}
|
||||
|
||||
// ── Workstream block types (backend: WorkstreamBlock) ──
|
||||
|
||||
export type WorkstreamBlockType =
|
||||
| 'text'
|
||||
| 'entity_card'
|
||||
| 'action_card'
|
||||
| 'evidence_card'
|
||||
| 'approval_card'
|
||||
| 'miniapp'
|
||||
| 'workflow_status'
|
||||
| 'workflow_handoff'
|
||||
| 'error';
|
||||
|
||||
export interface WorkstreamBlock {
|
||||
type: WorkstreamBlockType;
|
||||
content: string;
|
||||
metadata: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export type WorkstreamActorType = 'human' | 'system' | 'agent' | 'workflow';
|
||||
|
||||
export interface WorkstreamMessage {
|
||||
actor_type: WorkstreamActorType;
|
||||
actor_id?: string | null;
|
||||
content: string;
|
||||
blocks: WorkstreamBlock[];
|
||||
conversation_id?: string | null;
|
||||
tenant_id?: string | null;
|
||||
}
|
||||
|
||||
// ── Proactive suggestion (backend: ProactiveSuggestion) ──
|
||||
|
||||
export type ProactivePriority = 'low' | 'medium' | 'high' | 'urgent';
|
||||
|
||||
export interface ProactiveSuggestion {
|
||||
id: string;
|
||||
trigger: string;
|
||||
title: string;
|
||||
description: string;
|
||||
priority: ProactivePriority;
|
||||
action_type: 'suggestion' | 'action_required' | 'info';
|
||||
action_url: string;
|
||||
entity_type?: string | null;
|
||||
entity_id?: string | null;
|
||||
blocks: WorkstreamBlock[];
|
||||
created_at: string;
|
||||
expires_at?: string | null;
|
||||
metadata: Record<string, unknown>;
|
||||
}
|
||||
|
||||
export interface ProactiveFeedSettings {
|
||||
enabled: boolean;
|
||||
min_priority: ProactivePriority;
|
||||
max_per_hour: number;
|
||||
triggers_enabled: Record<string, boolean>;
|
||||
}
|
||||
@@ -1,153 +0,0 @@
|
||||
/**
|
||||
* Platform API hooks — Phase I.6/I.7 (I-ONB, I-DASH, I-COST, I-USE).
|
||||
*
|
||||
* Provides hooks for the setup wizard (onboarding) and the platform dashboard
|
||||
* (agent status, workflow stats, search metrics, knowledge coverage, cost
|
||||
* tracking, system health). Backend routes may not be wired yet, so all hooks
|
||||
* degrade gracefully to an "unavailable" state instead of throwing.
|
||||
*/
|
||||
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { apiGet } from './client';
|
||||
|
||||
// ── Onboarding ──────────────────────────────────────────────────────────────
|
||||
|
||||
export interface OnboardingStepStatus {
|
||||
completed: boolean;
|
||||
required: boolean;
|
||||
}
|
||||
|
||||
export interface OnboardingStatus {
|
||||
steps: Record<string, OnboardingStepStatus>;
|
||||
progress_pct: number;
|
||||
}
|
||||
|
||||
export interface OnboardingGuideStep {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
icon?: string;
|
||||
action_url?: string;
|
||||
}
|
||||
|
||||
export interface OnboardingGuide {
|
||||
steps: OnboardingGuideStep[];
|
||||
}
|
||||
|
||||
export function useOnboardingStatus() {
|
||||
return useQuery({
|
||||
queryKey: ['onboardingStatus'],
|
||||
queryFn: () => apiGet<OnboardingStatus>('/onboarding/status'),
|
||||
staleTime: 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
|
||||
export function useOnboardingGuide() {
|
||||
return useQuery({
|
||||
queryKey: ['onboardingGuide'],
|
||||
queryFn: () => apiGet<OnboardingGuide>('/onboarding/guide'),
|
||||
staleTime: 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
|
||||
// ── Platform dashboard ──────────────────────────────────────────────────────
|
||||
|
||||
export interface PlatformDashboardData {
|
||||
agents?: {
|
||||
active_agents?: number;
|
||||
total_runs?: number;
|
||||
recent_runs_7d?: number;
|
||||
error?: string;
|
||||
};
|
||||
workflows?: {
|
||||
active_workflows?: number;
|
||||
running_instances?: number;
|
||||
completed_instances?: number;
|
||||
error?: string;
|
||||
};
|
||||
search?: {
|
||||
total_queries?: number;
|
||||
avg_latency_ms?: number;
|
||||
error?: string;
|
||||
};
|
||||
knowledge?: {
|
||||
wiki_articles?: number;
|
||||
coverage_pct?: number;
|
||||
error?: string;
|
||||
};
|
||||
workstream?: {
|
||||
messages?: number;
|
||||
error?: string;
|
||||
};
|
||||
system_health?: {
|
||||
redis?: string;
|
||||
status?: string;
|
||||
error?: string;
|
||||
};
|
||||
generated_at?: string;
|
||||
}
|
||||
|
||||
export function usePlatformDashboard() {
|
||||
return useQuery({
|
||||
queryKey: ['platformDashboard'],
|
||||
queryFn: () => apiGet<PlatformDashboardData>('/dashboard/platform'),
|
||||
staleTime: 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
|
||||
// ── Cost tracking ───────────────────────────────────────────────────────────
|
||||
|
||||
export interface CostDashboardData {
|
||||
period_days?: number;
|
||||
total_cost_usd?: number;
|
||||
by_agent?: Record<string, { cost_usd: number; runs: number }>;
|
||||
budget?: {
|
||||
monthly_limit_usd?: number;
|
||||
utilization_pct?: number;
|
||||
};
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function useCostDashboard(days = 30) {
|
||||
return useQuery({
|
||||
queryKey: ['costDashboard', days],
|
||||
queryFn: () => apiGet<CostDashboardData>(`/dashboard/cost?days=${days}`),
|
||||
staleTime: 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
|
||||
// ── Usage analytics ─────────────────────────────────────────────────────────
|
||||
|
||||
export interface UsageAnalyticsData {
|
||||
period_days?: number;
|
||||
agent_runs?: {
|
||||
total?: number;
|
||||
completed?: number;
|
||||
failed?: number;
|
||||
success_rate?: number;
|
||||
error?: string;
|
||||
};
|
||||
workflow_executions?: {
|
||||
total?: number;
|
||||
completed?: number;
|
||||
error?: string;
|
||||
};
|
||||
search_queries?: {
|
||||
total?: number;
|
||||
error?: string;
|
||||
};
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export function useUsageAnalytics(days = 30) {
|
||||
return useQuery({
|
||||
queryKey: ['usageAnalytics', days],
|
||||
queryFn: () => apiGet<UsageAnalyticsData>(`/dashboard/usage?days=${days}`),
|
||||
staleTime: 60 * 1000,
|
||||
retry: false,
|
||||
});
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { TrendingUp, Lightbulb } from 'lucide-react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { Skeleton } from '@/components/ui/Skeleton';
|
||||
import { ProposalCard } from './ProposalCard';
|
||||
import { PatternInsight } from './PatternInsight';
|
||||
import {
|
||||
fetchProposals,
|
||||
fetchPatterns,
|
||||
approveProposal,
|
||||
rejectProposal,
|
||||
rollbackProposal,
|
||||
type ImprovementProposal,
|
||||
type DetectedPattern,
|
||||
} from '@/api/improvement';
|
||||
|
||||
export interface ImprovementCenterProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ImprovementCenter({ className }: ImprovementCenterProps) {
|
||||
const { t } = useTranslation();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: proposals = [], isLoading: loadingProposals } = useQuery<ImprovementProposal[]>({
|
||||
queryKey: ['improvement', 'proposals'],
|
||||
queryFn: () => fetchProposals(),
|
||||
});
|
||||
|
||||
const { data: patterns = [], isLoading: loadingPatterns } = useQuery<DetectedPattern[]>({
|
||||
queryKey: ['improvement', 'patterns'],
|
||||
queryFn: fetchPatterns,
|
||||
});
|
||||
|
||||
const invalidate = () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['improvement', 'proposals'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['improvement', 'patterns'] });
|
||||
};
|
||||
|
||||
const approveMutation = useMutation({
|
||||
mutationFn: approveProposal,
|
||||
onSuccess: invalidate,
|
||||
});
|
||||
|
||||
const rejectMutation = useMutation({
|
||||
mutationFn: rejectProposal,
|
||||
onSuccess: invalidate,
|
||||
});
|
||||
|
||||
const rollbackMutation = useMutation({
|
||||
mutationFn: rollbackProposal,
|
||||
onSuccess: invalidate,
|
||||
});
|
||||
|
||||
const busy = approveMutation.isPending || rejectMutation.isPending || rollbackMutation.isPending;
|
||||
|
||||
return (
|
||||
<div className={className} data-testid="improvement-center">
|
||||
<div className="mb-6">
|
||||
<h2 className="flex items-center gap-2 text-xl font-semibold text-secondary-900">
|
||||
<TrendingUp className="w-5 h-5 text-primary-600" aria-hidden="true" />
|
||||
{t('improvement.title')}
|
||||
</h2>
|
||||
<p className="text-sm text-secondary-500 mt-1">{t('improvement.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
{/* Patterns / Bottlenecks */}
|
||||
<section className="mb-8" aria-labelledby="improvement-patterns-heading">
|
||||
<h3 id="improvement-patterns-heading" className="text-base font-semibold text-secondary-800 mb-3">
|
||||
{t('improvement.patterns')}
|
||||
</h3>
|
||||
{loadingPatterns ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<Skeleton className="h-40" />
|
||||
<Skeleton className="h-40" />
|
||||
</div>
|
||||
) : patterns.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<Lightbulb className="w-6 h-6" />}
|
||||
title={t('improvement.noPatterns')}
|
||||
description={t('improvement.noPatternsDesc')}
|
||||
/>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{patterns.map((pattern) => (
|
||||
<PatternInsight key={pattern.id} pattern={pattern} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Proposals */}
|
||||
<section aria-labelledby="improvement-proposals-heading">
|
||||
<h3 id="improvement-proposals-heading" className="text-base font-semibold text-secondary-800 mb-3">
|
||||
{t('improvement.proposals')}
|
||||
</h3>
|
||||
{loadingProposals ? (
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
<Skeleton className="h-56" />
|
||||
<Skeleton className="h-56" />
|
||||
</div>
|
||||
) : proposals.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<Lightbulb className="w-6 h-6" />}
|
||||
title={t('improvement.noProposals')}
|
||||
description={t('improvement.noProposalsDesc')}
|
||||
/>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4">
|
||||
{proposals.map((proposal) => (
|
||||
<ProposalCard
|
||||
key={proposal.id}
|
||||
proposal={proposal}
|
||||
busy={busy}
|
||||
onApprove={(id) => approveMutation.mutate(id)}
|
||||
onReject={(id) => rejectMutation.mutate(id)}
|
||||
onRollback={(id) => rollbackMutation.mutate(id)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,70 +0,0 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TrendingUp, AlertTriangle, Lightbulb } from 'lucide-react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import type { DetectedPattern } from '@/api/improvement';
|
||||
|
||||
export interface PatternInsightProps {
|
||||
pattern: DetectedPattern;
|
||||
}
|
||||
|
||||
function formatConfidence(confidence: number): string {
|
||||
if (confidence === undefined || Number.isNaN(confidence)) return '—';
|
||||
return `${Math.round(confidence * 100)}%`;
|
||||
}
|
||||
|
||||
export function PatternInsight({ pattern }: PatternInsightProps) {
|
||||
const { t } = useTranslation();
|
||||
const confidence = pattern.confidence;
|
||||
const confidenceVariant =
|
||||
confidence >= 0.8 ? 'success' : confidence >= 0.6 ? 'warning' : 'secondary';
|
||||
|
||||
return (
|
||||
<Card className="flex flex-col" data-testid={`pattern-insight-${pattern.id}`}>
|
||||
<div className="flex items-center justify-between gap-2 mb-3">
|
||||
<h3 className="flex items-center gap-2 text-base font-semibold text-secondary-900">
|
||||
<Lightbulb className="w-4 h-4 text-primary-500 flex-shrink-0" aria-hidden="true" />
|
||||
{t(`improvement.patternTypes.${pattern.pattern_type}`)}
|
||||
</h3>
|
||||
<Badge variant={confidenceVariant} dot>
|
||||
{t('improvement.confidence')}: {formatConfidence(confidence)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-secondary-700 mb-3">{pattern.description}</p>
|
||||
|
||||
<div className="flex items-center gap-4 mb-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4 text-primary-600" aria-hidden="true" />
|
||||
<span className="text-sm text-secondary-700">
|
||||
{t('improvement.occurrences')}:{' '}
|
||||
<span className="font-semibold text-secondary-900">{pattern.occurrence_count}</span>
|
||||
</span>
|
||||
</div>
|
||||
{pattern.pattern_type === 'error_retries' && (
|
||||
<div className="flex items-center gap-2">
|
||||
<AlertTriangle className="w-4 h-4 text-warning-600" aria-hidden="true" />
|
||||
<span className="text-sm text-warning-700">{t('improvement.bottleneck')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{pattern.evidence_refs.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-xs font-semibold text-secondary-500 uppercase tracking-wide">
|
||||
{t('improvement.evidence')}
|
||||
</h4>
|
||||
<ul className="flex flex-wrap gap-2">
|
||||
{pattern.evidence_refs.map((ref) => (
|
||||
<li key={ref}>
|
||||
<code className="px-2 py-0.5 rounded bg-secondary-100 text-xs text-secondary-700">{ref}</code>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,131 +0,0 @@
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { TrendingUp, AlertTriangle, CheckCircle, XCircle, RotateCcw, Lightbulb } from 'lucide-react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import type { ImprovementProposal, ProposalStatus } from '@/api/improvement';
|
||||
|
||||
export interface ProposalCardProps {
|
||||
proposal: ImprovementProposal;
|
||||
onApprove?: (id: string) => void;
|
||||
onReject?: (id: string) => void;
|
||||
onRollback?: (id: string) => void;
|
||||
busy?: boolean;
|
||||
}
|
||||
|
||||
const statusVariant: Record<ProposalStatus, 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'secondary'> = {
|
||||
draft: 'secondary',
|
||||
evaluating: 'info',
|
||||
pending_approval: 'warning',
|
||||
approved: 'primary',
|
||||
rejected: 'danger',
|
||||
active: 'success',
|
||||
rolled_back: 'default',
|
||||
expired: 'default',
|
||||
};
|
||||
|
||||
function formatScore(score: number | undefined): string {
|
||||
if (score === undefined || Number.isNaN(score)) return '—';
|
||||
return `${Math.round(score)}%`;
|
||||
}
|
||||
|
||||
export function ProposalCard({ proposal, onApprove, onReject, onRollback, busy = false }: ProposalCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const score = proposal.evaluation_result?.score;
|
||||
const canApprove = proposal.status === 'pending_approval' || proposal.status === 'draft' || proposal.status === 'evaluating';
|
||||
const canReject = proposal.status === 'pending_approval' || proposal.status === 'draft' || proposal.status === 'evaluating';
|
||||
const canRollback = proposal.status === 'active';
|
||||
|
||||
return (
|
||||
<Card className="flex flex-col" data-testid={`proposal-card-${proposal.id}`}>
|
||||
<div className="flex items-center justify-between gap-2 mb-4">
|
||||
<h3 className="flex items-center gap-2 text-lg font-semibold text-secondary-900">
|
||||
<Lightbulb className="w-4 h-4 text-primary-500 flex-shrink-0" aria-hidden="true" />
|
||||
{proposal.title}
|
||||
</h3>
|
||||
<Badge variant={statusVariant[proposal.status]} dot>
|
||||
{t(`improvement.status.${proposal.status}`)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-secondary-700">{proposal.description}</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-xs font-semibold text-secondary-500 uppercase tracking-wide">
|
||||
{t('improvement.rationale')}
|
||||
</h4>
|
||||
<p className="text-sm text-secondary-700">{proposal.rationale}</p>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-xs font-semibold text-secondary-500 uppercase tracking-wide">
|
||||
{t('improvement.expectedBenefit')}
|
||||
</h4>
|
||||
<p className="text-sm text-secondary-700">{proposal.expected_benefit}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-2 rounded-md bg-warning-50 border border-warning-200 p-3">
|
||||
<AlertTriangle className="w-4 h-4 text-warning-600 mt-0.5 flex-shrink-0" aria-hidden="true" />
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-xs font-semibold text-warning-700 uppercase tracking-wide">
|
||||
{t('improvement.riskAssessment')}
|
||||
</h4>
|
||||
<p className="text-sm text-warning-800">{proposal.risk_assessment}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{proposal.evidence_refs.length > 0 && (
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-xs font-semibold text-secondary-500 uppercase tracking-wide">
|
||||
{t('improvement.evidence')}
|
||||
</h4>
|
||||
<ul className="flex flex-wrap gap-2">
|
||||
{proposal.evidence_refs.map((ref) => (
|
||||
<li key={ref}>
|
||||
<code className="px-2 py-0.5 rounded bg-secondary-100 text-xs text-secondary-700">{ref}</code>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between rounded-md bg-secondary-50 border border-secondary-200 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<TrendingUp className="w-4 h-4 text-primary-600" aria-hidden="true" />
|
||||
<span className="text-sm font-medium text-secondary-700">{t('improvement.score')}</span>
|
||||
</div>
|
||||
<span
|
||||
className={clsx(
|
||||
'text-lg font-semibold',
|
||||
score !== undefined && score >= 80 ? 'text-success-600' : score !== undefined && score >= 60 ? 'text-warning-600' : 'text-secondary-600'
|
||||
)}
|
||||
>
|
||||
{formatScore(score)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-secondary-200 flex flex-wrap items-center gap-2">
|
||||
{canApprove && onApprove && (
|
||||
<Button size="sm" variant="primary" icon={<CheckCircle className="w-4 h-4" />} isLoading={busy} onClick={() => onApprove(proposal.id)}>
|
||||
{t('improvement.approve')}
|
||||
</Button>
|
||||
)}
|
||||
{canReject && onReject && (
|
||||
<Button size="sm" variant="danger" icon={<XCircle className="w-4 h-4" />} isLoading={busy} onClick={() => onReject(proposal.id)}>
|
||||
{t('improvement.reject')}
|
||||
</Button>
|
||||
)}
|
||||
{canRollback && onRollback && (
|
||||
<Button size="sm" variant="secondary" icon={<RotateCcw className="w-4 h-4" />} isLoading={busy} onClick={() => onRollback(proposal.id)}>
|
||||
{t('improvement.rollback')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -54,10 +54,7 @@ function getIcon(name: string): React.ReactNode {
|
||||
const singleItems: NavSingleItem[] = [
|
||||
{ to: '/dashboard', labelKey: 'nav.dashboard', icon: <Home className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 0 },
|
||||
{ to: '/contacts', labelKey: 'nav.contacts', icon: <Users className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 10 },
|
||||
{ to: '/workstream', labelKey: 'nav.workstream', icon: <MessageSquare className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 25 },
|
||||
{ to: '/wiki', labelKey: 'nav.wiki', icon: <BookOpen className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 30 },
|
||||
{ to: '/improvement', labelKey: 'nav.improvement', icon: <Lightbulb className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 90 },
|
||||
{ to: '/onboarding', labelKey: 'nav.onboarding', icon: <Sparkles className="w-5 h-5 flex-shrink-0" aria-hidden="true" strokeWidth={2} />, order: 95 },
|
||||
];
|
||||
|
||||
const bottomItems: NavSingleItem[] = [];
|
||||
|
||||
@@ -1,136 +0,0 @@
|
||||
/**
|
||||
* SetupWizard — Phase I.6 (I-ONB) setup wizard.
|
||||
*
|
||||
* Guides users through 4 steps: Welcome, Create first Agent,
|
||||
* Create first Workflow, Enable Knowledge & Workstream.
|
||||
*
|
||||
* Uses lucide-react icons, Tailwind, and i18n via `t()`.
|
||||
*/
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Sparkles,
|
||||
Bot,
|
||||
Workflow,
|
||||
BookOpen,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
X,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
|
||||
interface SetupWizardProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onComplete?: () => void;
|
||||
}
|
||||
|
||||
const STEP_ICONS = [Sparkles, Bot, Workflow, BookOpen];
|
||||
|
||||
/**
|
||||
* Setup wizard with 4 steps. Each step shows a title, description and an
|
||||
* optional action button that deep-links to the relevant setup page.
|
||||
*/
|
||||
export function SetupWizard({ open, onClose, onComplete }: SetupWizardProps) {
|
||||
const { t } = useTranslation();
|
||||
const [step, setStep] = useState(0);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
const totalSteps = 4;
|
||||
const isLast = step === totalSteps - 1;
|
||||
const Icon = STEP_ICONS[step];
|
||||
|
||||
const handleNext = () => {
|
||||
if (isLast) {
|
||||
onComplete?.();
|
||||
onClose();
|
||||
return;
|
||||
}
|
||||
setStep((s) => s + 1);
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (step > 0) setStep((s) => s - 1);
|
||||
};
|
||||
|
||||
const stepKey = `setupWizard.step${step + 1}`;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-secondary-900/50 p-4"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={t('setupWizard.title')}
|
||||
data-testid="setup-wizard"
|
||||
>
|
||||
<Card className="w-full max-w-lg">
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-secondary-200">
|
||||
<h2 className="text-lg font-semibold text-secondary-900">
|
||||
{t('setupWizard.title')}
|
||||
</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-md text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500"
|
||||
aria-label={t('setupWizard.close')}
|
||||
>
|
||||
<X className="h-5 w-5" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-6">
|
||||
{/* Progress indicator */}
|
||||
<div className="flex items-center gap-2 mb-6" aria-hidden="true">
|
||||
{Array.from({ length: totalSteps }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`h-1.5 flex-1 rounded-full transition-colors ${
|
||||
i <= step ? 'bg-primary-500' : 'bg-secondary-200'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="flex-shrink-0 w-12 h-12 rounded-lg bg-primary-100 text-primary-700 flex items-center justify-center">
|
||||
<Icon className="h-6 w-6" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-lg font-semibold text-secondary-900">
|
||||
{t(`${stepKey}.title`)}
|
||||
</h3>
|
||||
<p className="mt-1 text-sm text-secondary-600">
|
||||
{t(`${stepKey}.description`)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 py-4 border-t border-secondary-200 flex items-center justify-between">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleBack}
|
||||
disabled={step === 0}
|
||||
icon={<ChevronLeft className="h-4 w-4" />}
|
||||
>
|
||||
{t('setupWizard.back')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
onClick={handleNext}
|
||||
icon={isLast ? undefined : <ChevronRight className="h-4 w-4" />}
|
||||
>
|
||||
{isLast ? t('setupWizard.finish') : t('setupWizard.next')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SetupWizard;
|
||||
@@ -1,64 +0,0 @@
|
||||
/**
|
||||
* MiniAppBlock — renders a `miniapp` workstream block.
|
||||
*
|
||||
* Uses `metadata.app_id` and `metadata.render_schema` to render the MiniApp.
|
||||
* Falls back to a placeholder state for unknown apps.
|
||||
*
|
||||
* Backend: app/ai/workstream_contract.py → build_miniapp_block
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { AppWindow, AlertCircle } from 'lucide-react';
|
||||
import type { WorkstreamBlock } from '@/api/miniapps';
|
||||
|
||||
interface MiniAppBlockProps {
|
||||
block: WorkstreamBlock;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a MiniApp block. If the app is unknown or render_schema is empty,
|
||||
* show a fallback state with the app_id.
|
||||
*/
|
||||
export function MiniAppBlock({ block }: MiniAppBlockProps) {
|
||||
const { t } = useTranslation();
|
||||
const metadata = block.metadata ?? {};
|
||||
const appId = typeof metadata.app_id === 'string' ? metadata.app_id : '';
|
||||
const title = typeof metadata.title === 'string' ? metadata.title : '';
|
||||
const renderSchema =
|
||||
metadata.render_schema && typeof metadata.render_schema === 'object'
|
||||
? (metadata.render_schema as Record<string, unknown>)
|
||||
: {};
|
||||
|
||||
const hasRenderSchema = Object.keys(renderSchema).length > 0;
|
||||
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary-100 text-primary-700 flex items-center justify-center">
|
||||
<AppWindow className="h-5 w-5" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{title || appId || t('workstream.miniapp.untitled')}
|
||||
</h4>
|
||||
{hasRenderSchema ? (
|
||||
<div className="mt-2 text-sm text-secondary-600">
|
||||
{t('workstream.miniapp.renderSchema')}
|
||||
<pre className="mt-2 p-2 rounded bg-secondary-50 text-xs font-mono overflow-x-auto">
|
||||
{JSON.stringify(renderSchema, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-2 flex items-center gap-2 text-xs text-secondary-400">
|
||||
<AlertCircle className="h-3.5 w-3.5" aria-hidden="true" />
|
||||
<span>{t('workstream.miniapp.noSchema')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MiniAppBlock;
|
||||
@@ -1,290 +0,0 @@
|
||||
/**
|
||||
* MiniAppSDK — standard building blocks for MiniApp rendering.
|
||||
*
|
||||
* Provides reusable components used by MiniAppBlock and the Workstream page:
|
||||
* - EntityCard: link to a CRM entity
|
||||
* - ActionButtons: list of action buttons (deep links / callbacks)
|
||||
* - ApprovalCard: approve/reject actions
|
||||
* - ProgressIndicator: progress bar with label
|
||||
* - DeepLink: safe external/internal link
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
ExternalLink,
|
||||
CheckCircle2,
|
||||
XCircle,
|
||||
ArrowRight,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
|
||||
// ── EntityCard ──
|
||||
|
||||
export interface EntityCardProps {
|
||||
entityType: string;
|
||||
entityId: string;
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
url?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Card linking to a CRM entity (contact, company, mail, etc.).
|
||||
*/
|
||||
export function EntityCard({
|
||||
entityType,
|
||||
entityId,
|
||||
title,
|
||||
subtitle,
|
||||
url,
|
||||
}: EntityCardProps) {
|
||||
const { t } = useTranslation();
|
||||
const href = url || `/${entityType}/${entityId}`;
|
||||
const safeHref = hrefSafe(href);
|
||||
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<Badge variant="secondary">{entityType}</Badge>
|
||||
<h4 className="mt-2 text-sm font-semibold text-secondary-900 truncate">
|
||||
{title || entityId}
|
||||
</h4>
|
||||
{subtitle && (
|
||||
<p className="mt-1 text-xs text-secondary-500 truncate">{subtitle}</p>
|
||||
)}
|
||||
</div>
|
||||
{safeHref && (
|
||||
<a
|
||||
href={safeHref}
|
||||
className="inline-flex items-center gap-1 text-xs font-medium text-primary-600 hover:text-primary-700 focus-visible:ring-2 focus-visible:ring-primary-500 rounded px-2 py-1"
|
||||
aria-label={t('workstream.sdk.openEntity')}
|
||||
>
|
||||
<ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />
|
||||
{t('workstream.sdk.open')}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// ── ActionButtons ──
|
||||
|
||||
export interface ActionButtonItem {
|
||||
label: string;
|
||||
action: string;
|
||||
type?: 'primary' | 'secondary' | 'danger';
|
||||
}
|
||||
|
||||
export interface ActionButtonsProps {
|
||||
actions: ActionButtonItem[];
|
||||
onAction?: (action: ActionButtonItem) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders a list of action buttons. Actions are either deep links (http/https)
|
||||
* or callbacks handled by the parent via `onAction`.
|
||||
*/
|
||||
export function ActionButtons({ actions, onAction }: ActionButtonsProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (!actions || actions.length === 0) return null;
|
||||
|
||||
const handleClick = (action: ActionButtonItem) => {
|
||||
if (onAction) {
|
||||
onAction(action);
|
||||
return;
|
||||
}
|
||||
const url = action.action;
|
||||
if (isSafeUrl(url)) {
|
||||
window.open(url, '_blank', 'noopener,noreferrer');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{actions.map((action, idx) => {
|
||||
const variant =
|
||||
action.type === 'danger'
|
||||
? 'danger'
|
||||
: action.type === 'secondary'
|
||||
? 'secondary'
|
||||
: 'primary';
|
||||
return (
|
||||
<Button
|
||||
key={idx}
|
||||
variant={variant}
|
||||
size="sm"
|
||||
onClick={() => handleClick(action)}
|
||||
>
|
||||
{action.label || t('workstream.sdk.action')}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── ApprovalCard ──
|
||||
|
||||
export interface ApprovalCardProps {
|
||||
approvalId: string;
|
||||
action: string;
|
||||
description?: string;
|
||||
onApprove?: (approvalId: string) => void;
|
||||
onReject?: (approvalId: string) => void;
|
||||
isPending?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Approval card with approve/reject actions.
|
||||
*/
|
||||
export function ApprovalCard({
|
||||
approvalId,
|
||||
action,
|
||||
description,
|
||||
onApprove,
|
||||
onReject,
|
||||
isPending = false,
|
||||
}: ApprovalCardProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="border border-warning-200 rounded-lg p-4 bg-warning-50 shadow-sm">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-warning-100 text-warning-700 flex items-center justify-center">
|
||||
<CheckCircle2 className="h-4 w-4" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{t('workstream.sdk.approvalNeeded')}: {action}
|
||||
</h4>
|
||||
{description && (
|
||||
<p className="mt-1 text-xs text-secondary-600">{description}</p>
|
||||
)}
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
isLoading={isPending}
|
||||
onClick={() => onApprove?.(approvalId)}
|
||||
icon={<CheckCircle2 className="h-4 w-4" />}
|
||||
>
|
||||
{t('workstream.sdk.approve')}
|
||||
</Button>
|
||||
<Button
|
||||
variant="danger"
|
||||
size="sm"
|
||||
isLoading={isPending}
|
||||
onClick={() => onReject?.(approvalId)}
|
||||
icon={<XCircle className="h-4 w-4" />}
|
||||
>
|
||||
{t('workstream.sdk.reject')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── ProgressIndicator ──
|
||||
|
||||
export interface ProgressIndicatorProps {
|
||||
label?: string;
|
||||
value: number; // 0-100
|
||||
status?: 'pending' | 'in_progress' | 'completed' | 'error';
|
||||
}
|
||||
|
||||
/**
|
||||
* Progress bar with optional label and status color.
|
||||
*/
|
||||
export function ProgressIndicator({
|
||||
label,
|
||||
value,
|
||||
status = 'in_progress',
|
||||
}: ProgressIndicatorProps) {
|
||||
const { t } = useTranslation();
|
||||
const clamped = Math.max(0, Math.min(100, value));
|
||||
const barColor =
|
||||
status === 'error'
|
||||
? 'bg-danger-500'
|
||||
: status === 'completed'
|
||||
? 'bg-success-500'
|
||||
: 'bg-primary-500';
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<span className="text-xs font-medium text-secondary-700">{label}</span>
|
||||
<span className="text-xs text-secondary-400">{clamped}%</span>
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="w-full h-2 rounded-full bg-secondary-100 overflow-hidden"
|
||||
role="progressbar"
|
||||
aria-valuenow={clamped}
|
||||
aria-valuemin={0}
|
||||
aria-valuemax={100}
|
||||
aria-label={label || t('workstream.sdk.progress')}
|
||||
>
|
||||
<div
|
||||
className={`h-full rounded-full transition-all ${barColor}`}
|
||||
style={{ width: `${clamped}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── DeepLink ──
|
||||
|
||||
export interface DeepLinkProps {
|
||||
href: string;
|
||||
label?: string;
|
||||
external?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Safe deep link — only allows http(s) and internal paths.
|
||||
*/
|
||||
export function DeepLink({ href, label, external = false }: DeepLinkProps) {
|
||||
const { t } = useTranslation();
|
||||
const safeHref = hrefSafe(href);
|
||||
if (!safeHref) {
|
||||
return <span className="text-xs text-secondary-400">{label || href}</span>;
|
||||
}
|
||||
return (
|
||||
<a
|
||||
href={safeHref}
|
||||
target={external ? '_blank' : undefined}
|
||||
rel={external ? 'noopener noreferrer' : undefined}
|
||||
className="inline-flex items-center gap-1 text-sm font-medium text-primary-600 hover:text-primary-700 hover:underline"
|
||||
>
|
||||
{label || href}
|
||||
{external && <ExternalLink className="h-3.5 w-3.5" aria-hidden="true" />}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
function hrefSafe(href: string): string | null {
|
||||
if (!href) return null;
|
||||
if (href.startsWith('/')) return href;
|
||||
try {
|
||||
const parsed = new URL(href);
|
||||
if (parsed.protocol === 'http:' || parsed.protocol === 'https:') return href;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function isSafeUrl(url: string): boolean {
|
||||
return hrefSafe(url) !== null;
|
||||
}
|
||||
@@ -1,155 +0,0 @@
|
||||
/**
|
||||
* ProactiveFeed — contextual suggestions/actions in the workstream.
|
||||
*
|
||||
* Renders ProactiveSuggestion items with priority, client-side dedupe and
|
||||
* cooldown (mirrors backend app/ai/proactive_feed.py). Suggestions are
|
||||
* non-intrusive: no popups, just a feed section.
|
||||
*/
|
||||
|
||||
import React, { useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Sparkles, Info, ArrowRight, X } from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import type { ProactiveSuggestion, ProactivePriority } from '@/api/miniapps';
|
||||
|
||||
interface ProactiveFeedProps {
|
||||
suggestions: ProactiveSuggestion[];
|
||||
/** Cooldown in ms per trigger; default 300000 (5 min). */
|
||||
cooldowns?: Record<string, number>;
|
||||
/** Minimum priority to show. */
|
||||
minPriority?: ProactivePriority;
|
||||
onDismiss?: (id: string) => void;
|
||||
onAction?: (suggestion: ProactiveSuggestion) => void;
|
||||
}
|
||||
|
||||
const PRIORITY_ORDER: Record<ProactivePriority, number> = {
|
||||
low: 0,
|
||||
medium: 1,
|
||||
high: 2,
|
||||
urgent: 3,
|
||||
};
|
||||
|
||||
const PRIORITY_VARIANT: Record<
|
||||
ProactivePriority,
|
||||
'secondary' | 'info' | 'warning' | 'danger'
|
||||
> = {
|
||||
low: 'secondary',
|
||||
medium: 'info',
|
||||
high: 'warning',
|
||||
urgent: 'danger',
|
||||
};
|
||||
|
||||
const ACTION_TYPE_ICON: Record<string, React.ReactNode> = {
|
||||
suggestion: <Sparkles className="h-4 w-4" aria-hidden="true" />,
|
||||
action_required: <ArrowRight className="h-4 w-4" aria-hidden="true" />,
|
||||
info: <Info className="h-4 w-4" aria-hidden="true" />,
|
||||
};
|
||||
|
||||
/**
|
||||
* Client-side dedupe + cooldown keyed by trigger + entity_id.
|
||||
* Persisted in a module-level map so it survives re-renders within a session.
|
||||
*/
|
||||
function dedupeKey(s: ProactiveSuggestion): string {
|
||||
return `${s.trigger}:${s.entity_id ?? 'none'}`;
|
||||
}
|
||||
|
||||
function isCooledDown(s: ProactiveSuggestion, cooldowns: Record<string, number>): boolean {
|
||||
const key = dedupeKey(s);
|
||||
const last = lastAt[key];
|
||||
if (last === undefined) return false;
|
||||
const cooldown = cooldowns[s.trigger] ?? cooldowns.default ?? 300000;
|
||||
return Date.now() - last < cooldown;
|
||||
}
|
||||
|
||||
function markShown(s: ProactiveSuggestion): void {
|
||||
lastAt[dedupeKey(s)] = Date.now();
|
||||
}
|
||||
|
||||
const lastAt: Record<string, number> = {};
|
||||
|
||||
/**
|
||||
* Renders a non-intrusive feed of proactive suggestions.
|
||||
*/
|
||||
export function ProactiveFeed({
|
||||
suggestions,
|
||||
cooldowns = {},
|
||||
minPriority = 'low',
|
||||
onDismiss,
|
||||
onAction,
|
||||
}: ProactiveFeedProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const visible = useMemo(() => {
|
||||
const minLevel = PRIORITY_ORDER[minPriority] ?? 0;
|
||||
return suggestions
|
||||
.filter((s) => PRIORITY_ORDER[s.priority] >= minLevel)
|
||||
.filter((s) => !isCooledDown(s, cooldowns))
|
||||
.sort((a, b) => PRIORITY_ORDER[b.priority] - PRIORITY_ORDER[a.priority]);
|
||||
}, [suggestions, cooldowns, minPriority]);
|
||||
|
||||
// Mark visible suggestions as shown (cooldown tracking)
|
||||
React.useEffect(() => {
|
||||
visible.forEach(markShown);
|
||||
}, [visible]);
|
||||
|
||||
if (visible.length === 0) return null;
|
||||
|
||||
return (
|
||||
<section
|
||||
className="space-y-2"
|
||||
aria-label={t('workstream.proactive.title')}
|
||||
>
|
||||
<div className="flex items-center gap-2 px-1">
|
||||
<Sparkles className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||
<h3 className="text-sm font-semibold text-secondary-800">
|
||||
{t('workstream.proactive.title')}
|
||||
</h3>
|
||||
</div>
|
||||
{visible.map((s) => (
|
||||
<div
|
||||
key={s.id}
|
||||
className="border border-secondary-200 rounded-lg p-3 bg-white shadow-sm flex items-start gap-3"
|
||||
>
|
||||
<div className="flex-shrink-0 mt-0.5 text-primary-500">
|
||||
{ACTION_TYPE_ICON[s.action_type] ?? (
|
||||
<Sparkles className="h-4 w-4" aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<span className="text-sm font-medium text-secondary-900">
|
||||
{s.title}
|
||||
</span>
|
||||
<Badge variant={PRIORITY_VARIANT[s.priority]}>
|
||||
{t(`workstream.proactive.priority.${s.priority}`)}
|
||||
</Badge>
|
||||
</div>
|
||||
{s.description && (
|
||||
<p className="mt-1 text-xs text-secondary-500">{s.description}</p>
|
||||
)}
|
||||
{s.action_url && (
|
||||
<button
|
||||
onClick={() => onAction?.(s)}
|
||||
className="mt-2 inline-flex items-center gap-1 text-xs font-medium text-primary-600 hover:text-primary-700 hover:underline"
|
||||
>
|
||||
{t('workstream.proactive.view')}
|
||||
<ArrowRight className="h-3 w-3" aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{onDismiss && (
|
||||
<button
|
||||
onClick={() => onDismiss(s.id)}
|
||||
className="flex-shrink-0 p-1 rounded text-secondary-400 hover:text-secondary-600 hover:bg-secondary-100"
|
||||
aria-label={t('workstream.proactive.dismiss')}
|
||||
>
|
||||
<X className="h-4 w-4" aria-hidden="true" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProactiveFeed;
|
||||
@@ -1,260 +0,0 @@
|
||||
/**
|
||||
* WorkstreamBlockRenderer — Phase I.7 (I-UI) universal block renderer.
|
||||
*
|
||||
* Renders every workstream block type (text, entity_card, action_card,
|
||||
* evidence_card, approval_card, miniapp, workflow_status, workflow_handoff,
|
||||
* error) with consistent loading / error / empty states.
|
||||
*
|
||||
* Reuses MiniAppBlock and the MiniAppSDK building blocks.
|
||||
*
|
||||
* Backend: app/ai/workstream_contract.py
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Link2,
|
||||
AlertTriangle,
|
||||
Workflow,
|
||||
ArrowRight,
|
||||
Loader2,
|
||||
MessageSquare,
|
||||
} from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { MiniAppBlock } from '@/components/workstream/MiniAppBlock';
|
||||
import {
|
||||
EntityCard,
|
||||
ActionButtons,
|
||||
ApprovalCard,
|
||||
ProgressIndicator,
|
||||
DeepLink,
|
||||
type ActionButtonItem,
|
||||
} from '@/components/workstream/MiniAppSDK';
|
||||
import type { WorkstreamBlock } from '@/api/miniapps';
|
||||
|
||||
interface WorkstreamBlockRendererProps {
|
||||
block: WorkstreamBlock;
|
||||
onApprove?: (approvalId: string) => void;
|
||||
onReject?: (approvalId: string) => void;
|
||||
onAction?: (action: ActionButtonItem) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a single workstream block by type.
|
||||
*/
|
||||
export function WorkstreamBlockRenderer({
|
||||
block,
|
||||
onApprove,
|
||||
onReject,
|
||||
onAction,
|
||||
}: WorkstreamBlockRendererProps) {
|
||||
const { t } = useTranslation();
|
||||
const meta = block.metadata ?? {};
|
||||
|
||||
switch (block.type) {
|
||||
case 'text':
|
||||
return (
|
||||
<div className="text-sm whitespace-pre-wrap break-words text-secondary-800">
|
||||
{block.content || String(meta.text ?? '')}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'entity_card':
|
||||
return (
|
||||
<EntityCard
|
||||
entityType={String(meta.entity_type ?? '')}
|
||||
entityId={String(meta.entity_id ?? '')}
|
||||
title={String(meta.title ?? block.content)}
|
||||
subtitle={String(meta.subtitle ?? '')}
|
||||
url={String(meta.url ?? '')}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'action_card': {
|
||||
const actions: ActionButtonItem[] = Array.isArray(meta.actions)
|
||||
? (meta.actions as ActionButtonItem[])
|
||||
: [];
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm space-y-2">
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{String(meta.title ?? block.content)}
|
||||
</h4>
|
||||
{meta.description ? (
|
||||
<p className="text-sm text-secondary-600">
|
||||
{String(meta.description)}
|
||||
</p>
|
||||
) : null}
|
||||
<ActionButtons actions={actions} onAction={onAction} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
case 'evidence_card':
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{String(meta.title ?? block.content)}
|
||||
</h4>
|
||||
{typeof meta.confidence === 'number' && (
|
||||
<Badge variant="secondary">
|
||||
{Math.round(meta.confidence * 100)}%
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{meta.snippet ? (
|
||||
<p className="mt-2 text-xs text-secondary-500">
|
||||
{String(meta.snippet)}
|
||||
</p>
|
||||
) : null}
|
||||
{meta.url ? (
|
||||
<div className="mt-2">
|
||||
<DeepLink
|
||||
href={String(meta.url)}
|
||||
label={t('workstream.block.openSource')}
|
||||
external
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'approval_card':
|
||||
return (
|
||||
<ApprovalCard
|
||||
approvalId={String(meta.approval_id ?? '')}
|
||||
action={String(meta.action ?? block.content)}
|
||||
description={String(meta.description ?? '')}
|
||||
onApprove={onApprove}
|
||||
onReject={onReject}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'miniapp':
|
||||
return <MiniAppBlock block={block} />;
|
||||
|
||||
case 'workflow_status':
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Workflow className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{String(meta.workflow_name ?? block.content)}
|
||||
</h4>
|
||||
<Badge variant="info">{String(meta.status ?? '')}</Badge>
|
||||
</div>
|
||||
{meta.step_name ? (
|
||||
<p className="mt-2 text-xs text-secondary-500">
|
||||
{t('workstream.block.step')}: {String(meta.step_name)}
|
||||
</p>
|
||||
) : null}
|
||||
{typeof meta.step_index === 'number' && (
|
||||
<div className="mt-3">
|
||||
<ProgressIndicator
|
||||
label={t('workstream.block.progress')}
|
||||
value={Math.min(100, (meta.step_index + 1) * 10)}
|
||||
status="in_progress"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'workflow_handoff':
|
||||
return (
|
||||
<div className="border border-warning-200 rounded-lg p-4 bg-warning-50 shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<ArrowRight className="h-4 w-4 text-warning-700" aria-hidden="true" />
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{t('workstream.block.handoff')}: {String(meta.handoff_type ?? '')}
|
||||
</h4>
|
||||
</div>
|
||||
{meta.description ? (
|
||||
<p className="mt-2 text-xs text-secondary-600">
|
||||
{String(meta.description)}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'error':
|
||||
return (
|
||||
<div className="border border-danger-200 rounded-lg p-4 bg-danger-50 shadow-sm flex items-start gap-2">
|
||||
<AlertTriangle
|
||||
className="h-4 w-4 text-danger-600 mt-0.5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div className="text-sm text-danger-700">
|
||||
{block.content || String(meta.error ?? '')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className="text-xs text-secondary-400 italic p-2 rounded bg-secondary-50">
|
||||
{t('workstream.block.unknown', { type: block.type })}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
interface WorkstreamBlockListProps {
|
||||
blocks: WorkstreamBlock[];
|
||||
isLoading?: boolean;
|
||||
onApprove?: (approvalId: string) => void;
|
||||
onReject?: (approvalId: string) => void;
|
||||
onAction?: (action: ActionButtonItem) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a list of blocks with consistent loading / empty states.
|
||||
*/
|
||||
export function WorkstreamBlockList({
|
||||
blocks,
|
||||
isLoading = false,
|
||||
onApprove,
|
||||
onReject,
|
||||
onAction,
|
||||
}: WorkstreamBlockListProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2
|
||||
className="animate-spin h-6 w-6 text-primary-500"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!blocks || blocks.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={<MessageSquare className="h-8 w-8" aria-hidden="true" />}
|
||||
title={t('workstream.empty.title')}
|
||||
description={t('workstream.empty.description')}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{blocks.map((block, idx) => (
|
||||
<WorkstreamBlockRenderer
|
||||
key={idx}
|
||||
block={block}
|
||||
onApprove={onApprove}
|
||||
onReject={onReject}
|
||||
onAction={onAction}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkstreamBlockRenderer;
|
||||
@@ -20,10 +20,7 @@
|
||||
"mcpSettings": "MCP Einstellungen",
|
||||
"reports": "Reports",
|
||||
"tasks": "Aufgaben",
|
||||
"workstream": "Workstream",
|
||||
"wiki": "Wiki",
|
||||
"improvement": "Verbesserungen",
|
||||
"onboarding": "Onboarding"
|
||||
"wiki": "Wiki"
|
||||
},
|
||||
"auth": {
|
||||
"login": "Anmelden",
|
||||
@@ -1289,111 +1286,5 @@
|
||||
"preview": "Vorschau",
|
||||
"split": "Geteilt",
|
||||
"writeLabel": "Markdown-Inhalt"
|
||||
},
|
||||
"workstream": {
|
||||
"title": "Workstream",
|
||||
"empty": {
|
||||
"title": "Keine Nachrichten",
|
||||
"description": "Es sind noch keine Workstream-Nachrichten vorhanden."
|
||||
},
|
||||
"actor": {
|
||||
"human": "Mensch",
|
||||
"system": "System",
|
||||
"agent": "Agent",
|
||||
"workflow": "Workflow"
|
||||
},
|
||||
"block": {
|
||||
"step": "Schritt",
|
||||
"progress": "Fortschritt",
|
||||
"handoff": "Übergabe",
|
||||
"openSource": "Quelle öffnen",
|
||||
"unknown": "Unbekannter Block-Typ: {{type}}"
|
||||
},
|
||||
"miniapp": {
|
||||
"untitled": "Unbenannte Mini-App",
|
||||
"renderSchema": "Render-Schema",
|
||||
"noSchema": "Kein Render-Schema für diese Mini-App vorhanden."
|
||||
},
|
||||
"sdk": {
|
||||
"openEntity": "Entität öffnen",
|
||||
"open": "Öffnen",
|
||||
"action": "Aktion",
|
||||
"approvalNeeded": "Freigabe erforderlich",
|
||||
"approve": "Genehmigen",
|
||||
"reject": "Ablehnen",
|
||||
"progress": "Fortschritt"
|
||||
},
|
||||
"proactive": {
|
||||
"title": "Vorschläge",
|
||||
"view": "Ansehen",
|
||||
"dismiss": "Verwerfen",
|
||||
"priority": {
|
||||
"low": "Niedrig",
|
||||
"medium": "Mittel",
|
||||
"high": "Hoch",
|
||||
"urgent": "Dringend"
|
||||
}
|
||||
}
|
||||
},
|
||||
"setupWizard": {
|
||||
"title": "Setup-Assistent",
|
||||
"close": "Schließen",
|
||||
"back": "Zurück",
|
||||
"next": "Weiter",
|
||||
"finish": "Fertigstellen",
|
||||
"step1": {
|
||||
"title": "Willkommen bei LeoCRM",
|
||||
"description": "Starten Sie mit Ihrer KI-gestützten CRM-Plattform."
|
||||
},
|
||||
"step2": {
|
||||
"title": "Ersten Agenten erstellen",
|
||||
"description": "Richten Sie einen KI-Agenten ein, der bei E-Mail-Triage, Kontaktanreicherung oder Follow-ups hilft."
|
||||
},
|
||||
"step3": {
|
||||
"title": "Ersten Workflow erstellen",
|
||||
"description": "Automatisieren Sie wiederkehrende Aufgaben mit Workflows. Starten Sie mit einer Vorlage oder erstellen Sie eigene."
|
||||
},
|
||||
"step4": {
|
||||
"title": "Knowledge & Workstream aktivieren",
|
||||
"description": "Erstellen Sie Wiki-Artikel und verbinden Sie Menschen, Agenten und Workflows in einem einheitlichen Stream."
|
||||
}
|
||||
},
|
||||
"improvement": {
|
||||
"title": "Improvement Center",
|
||||
"subtitle": "Kontrollierte Selbstverbesserung — Vorschläge, Muster und Wirkungsmessung.",
|
||||
"proposals": "Verbesserungsvorschläge",
|
||||
"patterns": "Erkannte Muster & Engpässe",
|
||||
"evidence": "Evidenz",
|
||||
"approve": "Genehmigen",
|
||||
"reject": "Ablehnen",
|
||||
"rollback": "Zurücksetzen",
|
||||
"score": "Bewertung",
|
||||
"confidence": "Konfidenz",
|
||||
"occurrences": "Vorkommen",
|
||||
"bottleneck": "Engpass",
|
||||
"rationale": "Begründung",
|
||||
"expectedBenefit": "Erwarteter Nutzen",
|
||||
"riskAssessment": "Risikobewertung",
|
||||
"noPatterns": "Keine Muster erkannt",
|
||||
"noPatternsDesc": "Es wurden noch keine Verbesserungsmuster oder Engpässe erkannt.",
|
||||
"noProposals": "Keine Vorschläge",
|
||||
"noProposalsDesc": "Es liegen noch keine Verbesserungsvorschläge vor.",
|
||||
"status": {
|
||||
"draft": "Entwurf",
|
||||
"evaluating": "Wird bewertet",
|
||||
"pending_approval": "Freigabe ausstehend",
|
||||
"approved": "Genehmigt",
|
||||
"rejected": "Abgelehnt",
|
||||
"active": "Aktiv",
|
||||
"rolled_back": "Zurückgesetzt",
|
||||
"expired": "Abgelaufen"
|
||||
},
|
||||
"patternTypes": {
|
||||
"repetitive_sequence": "Wiederkehrende Sequenz",
|
||||
"frequent_corrections": "Häufige Korrekturen",
|
||||
"rejected_suggestions": "Abgelehnte Vorschläge",
|
||||
"error_retries": "Fehler & Wiederholungen",
|
||||
"repetitive_handoffs": "Wiederkehrende Übergaben"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -20,10 +20,7 @@
|
||||
"mcpSettings": "MCP Settings",
|
||||
"reports": "Reports",
|
||||
"tasks": "Tasks",
|
||||
"workstream": "Workstream",
|
||||
"wiki": "Wiki",
|
||||
"improvement": "Improvements",
|
||||
"onboarding": "Onboarding"
|
||||
"wiki": "Wiki"
|
||||
},
|
||||
"auth": {
|
||||
"login": "Sign In",
|
||||
@@ -1289,111 +1286,5 @@
|
||||
"preview": "Preview",
|
||||
"split": "Split",
|
||||
"writeLabel": "Markdown content"
|
||||
},
|
||||
"workstream": {
|
||||
"title": "Workstream",
|
||||
"empty": {
|
||||
"title": "No messages",
|
||||
"description": "There are no workstream messages yet."
|
||||
},
|
||||
"actor": {
|
||||
"human": "Human",
|
||||
"system": "System",
|
||||
"agent": "Agent",
|
||||
"workflow": "Workflow"
|
||||
},
|
||||
"block": {
|
||||
"step": "Step",
|
||||
"progress": "Progress",
|
||||
"handoff": "Handoff",
|
||||
"openSource": "Open source",
|
||||
"unknown": "Unknown block type: {{type}}"
|
||||
},
|
||||
"miniapp": {
|
||||
"untitled": "Untitled Mini-App",
|
||||
"renderSchema": "Render schema",
|
||||
"noSchema": "No render schema available for this Mini-App."
|
||||
},
|
||||
"sdk": {
|
||||
"openEntity": "Open entity",
|
||||
"open": "Open",
|
||||
"action": "Action",
|
||||
"approvalNeeded": "Approval needed",
|
||||
"approve": "Approve",
|
||||
"reject": "Reject",
|
||||
"progress": "Progress"
|
||||
},
|
||||
"proactive": {
|
||||
"title": "Suggestions",
|
||||
"view": "View",
|
||||
"dismiss": "Dismiss",
|
||||
"priority": {
|
||||
"low": "Low",
|
||||
"medium": "Medium",
|
||||
"high": "High",
|
||||
"urgent": "Urgent"
|
||||
}
|
||||
}
|
||||
},
|
||||
"setupWizard": {
|
||||
"title": "Setup Wizard",
|
||||
"close": "Close",
|
||||
"back": "Back",
|
||||
"next": "Next",
|
||||
"finish": "Finish",
|
||||
"step1": {
|
||||
"title": "Welcome to LeoCRM",
|
||||
"description": "Get started with your AI-powered CRM platform."
|
||||
},
|
||||
"step2": {
|
||||
"title": "Create Your First Agent",
|
||||
"description": "Set up an AI agent to help with email triage, contact enrichment, or follow-ups."
|
||||
},
|
||||
"step3": {
|
||||
"title": "Create Your First Workflow",
|
||||
"description": "Automate repetitive tasks with workflows. Start with a template or build your own."
|
||||
},
|
||||
"step4": {
|
||||
"title": "Enable Knowledge & Workstream",
|
||||
"description": "Create wiki articles and connect humans, agents, and workflows in a unified stream."
|
||||
}
|
||||
},
|
||||
"improvement": {
|
||||
"title": "Improvement Center",
|
||||
"subtitle": "Controlled self-improvement — proposals, patterns and impact measurement.",
|
||||
"proposals": "Improvement Proposals",
|
||||
"patterns": "Detected Patterns & Bottlenecks",
|
||||
"evidence": "Evidence",
|
||||
"approve": "Approve",
|
||||
"reject": "Reject",
|
||||
"rollback": "Rollback",
|
||||
"score": "Score",
|
||||
"confidence": "Confidence",
|
||||
"occurrences": "Occurrences",
|
||||
"bottleneck": "Bottleneck",
|
||||
"rationale": "Rationale",
|
||||
"expectedBenefit": "Expected Benefit",
|
||||
"riskAssessment": "Risk Assessment",
|
||||
"noPatterns": "No patterns detected",
|
||||
"noPatternsDesc": "No improvement patterns or bottlenecks have been detected yet.",
|
||||
"noProposals": "No proposals",
|
||||
"noProposalsDesc": "There are no improvement proposals yet.",
|
||||
"status": {
|
||||
"draft": "Draft",
|
||||
"evaluating": "Evaluating",
|
||||
"pending_approval": "Pending Approval",
|
||||
"approved": "Approved",
|
||||
"rejected": "Rejected",
|
||||
"active": "Active",
|
||||
"rolled_back": "Rolled Back",
|
||||
"expired": "Expired"
|
||||
},
|
||||
"patternTypes": {
|
||||
"repetitive_sequence": "Repetitive Sequence",
|
||||
"frequent_corrections": "Frequent Corrections",
|
||||
"rejected_suggestions": "Rejected Suggestions",
|
||||
"error_retries": "Errors & Retries",
|
||||
"repetitive_handoffs": "Repetitive Handoffs"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +1,9 @@
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
Bot,
|
||||
Workflow,
|
||||
Search,
|
||||
BookOpen,
|
||||
DollarSign,
|
||||
HeartPulse,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
import { StatCard } from '@/components/shared/StatCard';
|
||||
import { ActivityFeed, ActivityItem } from '@/components/shared/ActivityFeed';
|
||||
import { DashboardGrid } from '@/components/dashboard/DashboardGrid';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { useUnifiedContacts, useAuditLog } from '@/api/hooks';
|
||||
import { useDashboardWidgets } from '@/api/dashboard';
|
||||
import {
|
||||
usePlatformDashboard,
|
||||
useCostDashboard,
|
||||
useUsageAnalytics,
|
||||
} from '@/api/platform';
|
||||
import { formatDateTime } from '@/utils/date';
|
||||
|
||||
export function DashboardPage() {
|
||||
@@ -30,22 +13,6 @@ export function DashboardPage() {
|
||||
const { data: auditData, isError: auditError } = useAuditLog(1, 5);
|
||||
const { data: widgetsData, isError: widgetsError } = useDashboardWidgets();
|
||||
|
||||
const {
|
||||
data: platformData,
|
||||
isLoading: platformLoading,
|
||||
isError: platformError,
|
||||
} = usePlatformDashboard();
|
||||
const {
|
||||
data: costData,
|
||||
isLoading: costLoading,
|
||||
isError: costError,
|
||||
} = useCostDashboard(30);
|
||||
const {
|
||||
data: usageData,
|
||||
isLoading: usageLoading,
|
||||
isError: usageError,
|
||||
} = useUsageAnalytics(30);
|
||||
|
||||
const totalCompanies = companiesData?.total ?? 0;
|
||||
const totalContacts = contactsData?.total ?? 0;
|
||||
|
||||
@@ -78,20 +45,6 @@ export function DashboardPage() {
|
||||
|
||||
const widgets = widgetsData?.items ?? [];
|
||||
|
||||
const agents = platformData?.agents;
|
||||
const workflows = platformData?.workflows;
|
||||
const search = platformData?.search;
|
||||
const knowledge = platformData?.knowledge;
|
||||
const systemHealth = platformData?.system_health;
|
||||
const searchQueries = usageData?.search_queries;
|
||||
|
||||
const costUsd = costData?.total_cost_usd ?? 0;
|
||||
const budget = costData?.budget;
|
||||
const budgetUtilization = budget?.utilization_pct ?? 0;
|
||||
|
||||
const healthLabel = systemHealth?.status ?? 'unknown';
|
||||
const healthVariant = healthStatusVariant(healthLabel);
|
||||
|
||||
return (
|
||||
<div className="p-6 max-w-7xl mx-auto" data-testid="dashboard-page">
|
||||
<h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('dashboard.title')}</h1>
|
||||
@@ -119,155 +72,6 @@ export function DashboardPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Platform Dashboard — Phase I.7 (I-DASH) */}
|
||||
<section className="mb-8" aria-label={t('dashboard.platform.title')}>
|
||||
<h2 className="text-lg font-semibold text-secondary-800 mb-4">
|
||||
{t('dashboard.platform.title')}
|
||||
</h2>
|
||||
|
||||
{platformLoading || costLoading || usageLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="animate-spin h-6 w-6 text-primary-500" aria-hidden="true" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* Agent status */}
|
||||
<Card title={t('dashboard.platform.agents')}>
|
||||
{agents?.error || platformError ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<MetricRow
|
||||
icon={<Bot className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.activeAgents')}
|
||||
value={agents?.active_agents ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<Bot className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.totalRuns')}
|
||||
value={agents?.total_runs ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<Bot className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.recentRuns7d')}
|
||||
value={agents?.recent_runs_7d ?? 0}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Workflow stats */}
|
||||
<Card title={t('dashboard.platform.workflows')}>
|
||||
{workflows?.error || platformError ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<MetricRow
|
||||
icon={<Workflow className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.activeWorkflows')}
|
||||
value={workflows?.active_workflows ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<Workflow className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.runningInstances')}
|
||||
value={workflows?.running_instances ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<Workflow className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.completedInstances')}
|
||||
value={workflows?.completed_instances ?? 0}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Search metrics */}
|
||||
<Card title={t('dashboard.platform.search')}>
|
||||
{usageError || searchQueries?.error ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<MetricRow
|
||||
icon={<Search className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.totalQueries')}
|
||||
value={searchQueries?.total ?? search?.total_queries ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<Search className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.avgLatency')}
|
||||
value={
|
||||
typeof search?.avg_latency_ms === 'number'
|
||||
? `${search.avg_latency_ms} ms`
|
||||
: '—'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Knowledge coverage */}
|
||||
<Card title={t('dashboard.platform.knowledge')}>
|
||||
{platformError || knowledge?.error ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<MetricRow
|
||||
icon={<BookOpen className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.wikiArticles')}
|
||||
value={knowledge?.wiki_articles ?? 0}
|
||||
/>
|
||||
<MetricRow
|
||||
icon={<BookOpen className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.coverage')}
|
||||
value={
|
||||
typeof knowledge?.coverage_pct === 'number'
|
||||
? `${knowledge.coverage_pct}%`
|
||||
: '—'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* Cost tracking */}
|
||||
<Card title={t('dashboard.platform.cost')}>
|
||||
{costError || costData?.error ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<MetricRow
|
||||
icon={<DollarSign className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.totalCost')}
|
||||
value={`$${costUsd.toFixed(2)}`}
|
||||
/>
|
||||
{budget?.monthly_limit_usd ? (
|
||||
<MetricRow
|
||||
icon={<DollarSign className="h-4 w-4" aria-hidden="true" />}
|
||||
label={t('dashboard.platform.budgetUtilization')}
|
||||
value={`${budgetUtilization.toFixed(1)}%`}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* System health */}
|
||||
<Card title={t('dashboard.platform.systemHealth')}>
|
||||
{platformError ? (
|
||||
<p className="text-sm text-secondary-500">{t('dashboard.platform.unavailable')}</p>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<HeartPulse className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||
<Badge variant={healthVariant} dot>
|
||||
{t(`dashboard.platform.health.${healthLabel}`)}
|
||||
</Badge>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Dynamic Plugin Widgets */}
|
||||
{widgetsError ? (
|
||||
<p className="text-sm text-secondary-500 mb-6" data-testid="dashboard-widgets-unavailable">
|
||||
@@ -291,31 +95,4 @@ export function DashboardPage() {
|
||||
);
|
||||
}
|
||||
|
||||
function MetricRow({
|
||||
icon,
|
||||
label,
|
||||
value,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string | number;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2 text-sm text-secondary-600">
|
||||
<span className="text-primary-500" aria-hidden="true">{icon}</span>
|
||||
{label}
|
||||
</span>
|
||||
<span className="text-sm font-semibold text-secondary-900">{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function healthStatusVariant(status: string): 'success' | 'warning' | 'danger' | 'secondary' {
|
||||
if (status === 'healthy') return 'success';
|
||||
if (status === 'degraded') return 'warning';
|
||||
if (status === 'down') return 'danger';
|
||||
return 'secondary';
|
||||
}
|
||||
|
||||
export default DashboardPage;
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
/**
|
||||
* OnboardingPage — Route wrapper for SetupWizard component.
|
||||
* Renders the SetupWizard as a full-page dialog.
|
||||
*/
|
||||
|
||||
import React, { useCallback } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { SetupWizard } from '@/components/onboarding/SetupWizard';
|
||||
|
||||
export function OnboardingPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleClose = useCallback(() => {
|
||||
navigate('/dashboard');
|
||||
}, [navigate]);
|
||||
|
||||
const handleComplete = useCallback(() => {
|
||||
navigate('/dashboard');
|
||||
}, [navigate]);
|
||||
|
||||
return (
|
||||
<SetupWizard open={true} onClose={handleClose} onComplete={handleComplete} />
|
||||
);
|
||||
}
|
||||
|
||||
export default OnboardingPage;
|
||||
@@ -1,296 +0,0 @@
|
||||
/**
|
||||
* Workstream page — central view rendering all workstream block types.
|
||||
*
|
||||
* Block types: text, entity_card, action_card, evidence_card, approval_card,
|
||||
* miniapp, workflow_status, workflow_handoff.
|
||||
*
|
||||
* Backend: app/ai/workstream_contract.py, app/workflows/workstream.py
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
MessageSquare,
|
||||
Link2,
|
||||
AlertTriangle,
|
||||
Workflow,
|
||||
ArrowRight,
|
||||
Loader2,
|
||||
} from 'lucide-react';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { MiniAppBlock } from '@/components/workstream/MiniAppBlock';
|
||||
import {
|
||||
EntityCard,
|
||||
ActionButtons,
|
||||
ApprovalCard,
|
||||
ProgressIndicator,
|
||||
DeepLink,
|
||||
type ActionButtonItem,
|
||||
} from '@/components/workstream/MiniAppSDK';
|
||||
import { ProactiveFeed } from '@/components/workstream/ProactiveFeed';
|
||||
import type {
|
||||
WorkstreamMessage,
|
||||
WorkstreamBlock,
|
||||
ProactiveSuggestion,
|
||||
} from '@/api/miniapps';
|
||||
|
||||
interface WorkstreamPageProps {
|
||||
messages?: WorkstreamMessage[];
|
||||
suggestions?: ProactiveSuggestion[];
|
||||
isLoading?: boolean;
|
||||
onApprove?: (approvalId: string) => void;
|
||||
onReject?: (approvalId: string) => void;
|
||||
onAction?: (action: ActionButtonItem) => void;
|
||||
onSuggestionAction?: (suggestion: ProactiveSuggestion) => void;
|
||||
onDismissSuggestion?: (id: string) => void;
|
||||
}
|
||||
|
||||
const ACTOR_VARIANT: Record<
|
||||
string,
|
||||
'secondary' | 'primary' | 'info' | 'success'
|
||||
> = {
|
||||
human: 'secondary',
|
||||
system: 'info',
|
||||
agent: 'primary',
|
||||
workflow: 'success',
|
||||
};
|
||||
|
||||
/**
|
||||
* Render a single workstream block by type.
|
||||
*/
|
||||
function BlockView({
|
||||
block,
|
||||
onApprove,
|
||||
onReject,
|
||||
onAction,
|
||||
}: {
|
||||
block: WorkstreamBlock;
|
||||
onApprove?: (approvalId: string) => void;
|
||||
onReject?: (approvalId: string) => void;
|
||||
onAction?: (action: ActionButtonItem) => void;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const meta = block.metadata ?? {};
|
||||
|
||||
switch (block.type) {
|
||||
case 'text':
|
||||
return (
|
||||
<div className="text-sm whitespace-pre-wrap break-words text-secondary-800">
|
||||
{block.content || String(meta.text ?? '')}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'entity_card':
|
||||
return (
|
||||
<EntityCard
|
||||
entityType={String(meta.entity_type ?? '')}
|
||||
entityId={String(meta.entity_id ?? '')}
|
||||
title={String(meta.title ?? block.content)}
|
||||
subtitle={String(meta.subtitle ?? '')}
|
||||
url={String(meta.url ?? '')}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'action_card': {
|
||||
const actions: ActionButtonItem[] = Array.isArray(meta.actions)
|
||||
? (meta.actions as ActionButtonItem[])
|
||||
: [];
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm space-y-2">
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{String(meta.title ?? block.content)}
|
||||
</h4>
|
||||
{meta.description ? (
|
||||
<p className="text-sm text-secondary-600">
|
||||
{String(meta.description)}
|
||||
</p>
|
||||
) : null}
|
||||
<ActionButtons actions={actions} onAction={onAction} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
case 'evidence_card':
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Link2 className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{String(meta.title ?? block.content)}
|
||||
</h4>
|
||||
{typeof meta.confidence === 'number' && (
|
||||
<Badge variant="secondary">
|
||||
{Math.round(meta.confidence * 100)}%
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
{meta.snippet ? (
|
||||
<p className="mt-2 text-xs text-secondary-500">
|
||||
{String(meta.snippet)}
|
||||
</p>
|
||||
) : null}
|
||||
{meta.url ? (
|
||||
<div className="mt-2">
|
||||
<DeepLink href={String(meta.url)} label={t('workstream.block.openSource')} external />
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'approval_card':
|
||||
return (
|
||||
<ApprovalCard
|
||||
approvalId={String(meta.approval_id ?? '')}
|
||||
action={String(meta.action ?? block.content)}
|
||||
description={String(meta.description ?? '')}
|
||||
onApprove={onApprove}
|
||||
onReject={onReject}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'miniapp':
|
||||
return <MiniAppBlock block={block} />;
|
||||
|
||||
case 'workflow_status':
|
||||
return (
|
||||
<div className="border border-secondary-200 rounded-lg p-4 bg-white shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Workflow className="h-4 w-4 text-primary-500" aria-hidden="true" />
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{String(meta.workflow_name ?? block.content)}
|
||||
</h4>
|
||||
<Badge variant="info">{String(meta.status ?? '')}</Badge>
|
||||
</div>
|
||||
{meta.step_name ? (
|
||||
<p className="mt-2 text-xs text-secondary-500">
|
||||
{t('workstream.block.step')}: {String(meta.step_name)}
|
||||
</p>
|
||||
) : null}
|
||||
{typeof meta.step_index === 'number' && (
|
||||
<div className="mt-3">
|
||||
<ProgressIndicator
|
||||
label={t('workstream.block.progress')}
|
||||
value={Math.min(100, (meta.step_index + 1) * 10)}
|
||||
status="in_progress"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'workflow_handoff':
|
||||
return (
|
||||
<div className="border border-warning-200 rounded-lg p-4 bg-warning-50 shadow-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<ArrowRight className="h-4 w-4 text-warning-700" aria-hidden="true" />
|
||||
<h4 className="text-sm font-semibold text-secondary-900">
|
||||
{t('workstream.block.handoff')}: {String(meta.handoff_type ?? '')}
|
||||
</h4>
|
||||
</div>
|
||||
{meta.description ? (
|
||||
<p className="mt-2 text-xs text-secondary-600">
|
||||
{String(meta.description)}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'error':
|
||||
return (
|
||||
<div className="border border-danger-200 rounded-lg p-4 bg-danger-50 shadow-sm flex items-start gap-2">
|
||||
<AlertTriangle className="h-4 w-4 text-danger-600 mt-0.5" aria-hidden="true" />
|
||||
<div className="text-sm text-danger-700">
|
||||
{block.content || String(meta.error ?? '')}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className="text-xs text-secondary-400 italic p-2 rounded bg-secondary-50">
|
||||
{t('workstream.block.unknown', { type: block.type })}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Central Workstream page.
|
||||
*/
|
||||
export function WorkstreamPage({
|
||||
messages = [],
|
||||
suggestions = [],
|
||||
isLoading = false,
|
||||
onApprove,
|
||||
onReject,
|
||||
onAction,
|
||||
onSuggestionAction,
|
||||
onDismissSuggestion,
|
||||
}: WorkstreamPageProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto p-4 space-y-6">
|
||||
<header className="flex items-center gap-2">
|
||||
<MessageSquare className="h-5 w-5 text-primary-500" aria-hidden="true" />
|
||||
<h1 className="text-lg font-semibold text-secondary-900">
|
||||
{t('workstream.title')}
|
||||
</h1>
|
||||
</header>
|
||||
|
||||
<ProactiveFeed
|
||||
suggestions={suggestions}
|
||||
onAction={onSuggestionAction}
|
||||
onDismiss={onDismissSuggestion}
|
||||
/>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<Loader2 className="animate-spin h-6 w-6 text-primary-500" aria-hidden="true" />
|
||||
</div>
|
||||
) : messages.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={<MessageSquare className="h-8 w-8" aria-hidden="true" />}
|
||||
title={t('workstream.empty.title')}
|
||||
description={t('workstream.empty.description')}
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{messages.map((message, idx) => (
|
||||
<article
|
||||
key={message.actor_id ? `${message.actor_id}-${idx}` : idx}
|
||||
className="border border-secondary-200 rounded-lg bg-white shadow-sm p-4"
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<Badge variant={ACTOR_VARIANT[message.actor_type] ?? 'secondary'}>
|
||||
{t(`workstream.actor.${message.actor_type}`)}
|
||||
</Badge>
|
||||
{message.content && (
|
||||
<span className="text-sm text-secondary-600 truncate">
|
||||
{message.content}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{message.blocks && message.blocks.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
{message.blocks.map((block, bidx) => (
|
||||
<BlockView
|
||||
key={bidx}
|
||||
block={block}
|
||||
onApprove={onApprove}
|
||||
onReject={onReject}
|
||||
onAction={onAction}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkstreamPage;
|
||||
@@ -88,10 +88,7 @@ const LogsOverviewPage = React.lazy(() => import('@/pages/logs/LogsOverview').th
|
||||
const LogsPlaceholderPage = React.lazy(() => import('@/pages/logs/LogsPlaceholder').then(m => ({ default: m.LogsPlaceholderPage })));
|
||||
const HelpApiDocsPage = React.lazy(() => import('@/pages/help/HelpApiDocs').then(m => ({ default: m.HelpApiDocsPage })));
|
||||
const ApiDocsPage = React.lazy(() => import('@/pages/ApiDocs').then(m => ({ default: m.ApiDocsPage })));
|
||||
const WorkstreamPage = React.lazy(() => import('@/pages/Workstream').then(m => ({ default: m.WorkstreamPage })));
|
||||
const WikiPage = React.lazy(() => import('@/pages/Wiki').then(m => ({ default: m.WikiPage })));
|
||||
const ImprovementCenterPage = React.lazy(() => import('@/components/improvement/ImprovementCenter').then(m => ({ default: m.ImprovementCenter })));
|
||||
const OnboardingPage = React.lazy(() => import('@/pages/Onboarding').then(m => ({ default: m.OnboardingPage })));
|
||||
|
||||
/** Centered spinner fallback for lazy-loaded routes */
|
||||
function PageLoader() {
|
||||
@@ -270,10 +267,7 @@ const router = createBrowserRouter([
|
||||
{ path: '/tags', element: <PermissionRoute permission="tags:read">{withSuspense(<TagsPage />)}</PermissionRoute> },
|
||||
{ path: '/api-docs', element: <PermissionRoute permission="settings:read">{withSuspense(<ApiDocsPage />)}</PermissionRoute> },
|
||||
{ path: '/activity', element: <PermissionRoute permission="activity:read">{withSuspense(<ActivityTimelinePage />)}</PermissionRoute> },
|
||||
{ path: '/workstream', element: withSuspense(<WorkstreamPage />) },
|
||||
{ path: '/wiki', element: withSuspense(<WikiPage />) },
|
||||
{ path: '/improvement', element: withSuspense(<ImprovementCenterPage />) },
|
||||
{ path: '/onboarding', element: withSuspense(<OnboardingPage />) },
|
||||
{ path: '/profile', element: withSuspense(<SettingsProfilePage />) },
|
||||
{ path: '*', element: <ErrorBoundary>{<PluginRouteRenderer />}</ErrorBoundary> },
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user