fai/chain-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: F∆I Studio MVP scaffold (Tier-2 desktop GUI)

Browse source 
Initial scaffold for the F∆I Platform Tier-2 generic GUI client.
Flutter Desktop (macOS, Linux, Windows). Three MVP pages with
mock data, sharing one navigation shell:

- Modules — installed modules with capabilities, declared
  permissions and required services.
- Audit — event-stream view with type filter and tone-coded
  rows (started / completed / failed).
- Approvals — pending system.approval@^0 reviews with prompt,
  payload preview, and approve/reject buttons.

Live gRPC connection arrives in the next iteration via
fai_dart_sdk (sibling repo, currently a typed stub).

Future Forgejo path: fai/studio. Local layout matches existing
fai_platform/ convention.

Background: see docs/architecture/client.md in the platform
repo. The tier-2 client was previously called "Stage" — renamed
to "Studio" on 2026-05-05 to avoid confusion with
"staging environment".

flutter analyze: clean. flutter test: 2/2.

Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it 2026-05-05 14:19:39 +02:00
commit a173eec1d0
68 changed files with 4277 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

165
lib/data/mock.dart Normal file
View file

@ -0,0 +1,165 @@
// Mock data for the MVP. Replaced by live gRPC calls via
// fai_dart_sdk in the next iteration.
class ModuleSummary {
final String name;
final String version;
final List<String> capabilities;
final List<String> permissions;
final List<String> requiresServices;
const ModuleSummary({
required this.name,
required this.version,
required this.capabilities,
required this.permissions,
required this.requiresServices,
});
}
class AuditEvent {
final String eventId;
final DateTime timestamp;
final String type;
final String? flowName;
final String? stepId;
final String? moduleName;
final int? durationMs;
final String? error;
const AuditEvent({
required this.eventId,
required this.timestamp,
required this.type,
this.flowName,
this.stepId,
this.moduleName,
this.durationMs,
this.error,
});
}
class PendingApproval {
final String id;
final String flowName;
final String stepId;
final String prompt;
final String? showPreview;
final DateTime createdAt;
final DateTime? expiresAt;
const PendingApproval({
required this.id,
required this.flowName,
required this.stepId,
required this.prompt,
this.showPreview,
required this.createdAt,
this.expiresAt,
});
}
const mockModules = <ModuleSummary>[
ModuleSummary(
name: 'echo',
version: '0.1.0',
capabilities: ['debug.echo@0.1.0'],
permissions: [],
requiresServices: [],
),
ModuleSummary(
name: 'text-extract',
version: '0.1.1',
capabilities: ['text.extract@0.1.0'],
permissions: [],
requiresServices: [],
),
ModuleSummary(
name: 'llm-chat',
version: '0.1.0',
capabilities: ['llm.chat@0.1.0'],
permissions: [
'net: localhost',
'net: 127.0.0.1',
'net: api.openai.com',
'net: api.anthropic.com',
],
requiresServices: ['ollama'],
),
ModuleSummary(
name: 'text-translate',
version: '0.1.0',
capabilities: ['text.translate@0.1.0'],
permissions: [
'net: localhost',
'net: 127.0.0.1',
],
requiresServices: ['ollama'],
),
ModuleSummary(
name: 'text-summarize',
version: '0.1.0',
capabilities: ['text.summarize@0.1.0'],
permissions: [
'net: localhost',
'net: 127.0.0.1',
],
requiresServices: ['ollama'],
),
];
final mockEvents = <AuditEvent>[
AuditEvent(
eventId: '01926f8a-7c34-7b2c-9e4f-a8d3c1f9e2b4',
timestamp: DateTime.now().subtract(const Duration(seconds: 2)),
type: 'flow.completed',
flowName: 'extract-translate-summarize',
durationMs: 8421,
),
AuditEvent(
eventId: '01926f8a-7b00-7000-aaaa-bbbbcccc0042',
timestamp: DateTime.now().subtract(const Duration(seconds: 3)),
type: 'step.completed',
flowName: 'extract-translate-summarize',
stepId: 'summarize',
moduleName: 'text-summarize',
durationMs: 3204,
),
AuditEvent(
eventId: '01926f8a-7a90-7000-aaaa-bbbbcccc0041',
timestamp: DateTime.now().subtract(const Duration(seconds: 9)),
type: 'step.completed',
flowName: 'extract-translate-summarize',
stepId: 'review',
moduleName: 'system.approval',
durationMs: 5102,
),
AuditEvent(
eventId: '01926f8a-7a00-7000-aaaa-bbbbcccc0040',
timestamp: DateTime.now().subtract(const Duration(seconds: 14)),
type: 'step.completed',
flowName: 'extract-translate-summarize',
stepId: 'translate',
moduleName: 'text-translate',
durationMs: 4815,
),
AuditEvent(
eventId: '01926f8a-7800-7000-aaaa-bbbbcccc003f',
timestamp: DateTime.now().subtract(const Duration(seconds: 19)),
type: 'flow.started',
flowName: 'extract-translate-summarize',
),
];
final mockApprovals = <PendingApproval>[
PendingApproval(
id: '01926f8a-9000-7b2c-9e4f-aaaa00000001',
flowName: 'extract-translate-summarize',
stepId: 'review',
prompt: 'Review the German→English translation before summarisation.',
showPreview:
'{ "translated": "The quarterly report shows..." }',
createdAt: DateTime.now().subtract(const Duration(minutes: 2)),
expiresAt: DateTime.now().add(const Duration(minutes: 28)),
),
];

137
lib/main.dart Normal file
View file

@ -0,0 +1,137 @@
// F∆I Studio — desktop GUI for the F∆I hub.
//
// MVP scope: three pages (Modules, Audit, Approvals) with mock
// data, sharing one navigation shell. Live gRPC connection
// arrives in the next iteration via fai_dart_sdk.
import 'package:flutter/material.dart';
import 'pages/approvals.dart';
import 'pages/audit.dart';
import 'pages/modules.dart';
void main() {
runApp(const StudioApp());
}
class StudioApp extends StatelessWidget {
const StudioApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'F∆I Studio',
theme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: const Color(0xFF1E3A8A),
brightness: Brightness.light,
),
),
darkTheme: ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: const Color(0xFF1E3A8A),
brightness: Brightness.dark,
),
),
home: const StudioShell(),
);
}
}
class StudioShell extends StatefulWidget {
const StudioShell({super.key});
@override
State<StudioShell> createState() => _StudioShellState();
}
class _StudioShellState extends State<StudioShell> {
int _selectedIndex = 0;
static const _pages = <_NavPage>[
_NavPage(
label: 'Modules',
icon: Icons.extension_outlined,
selectedIcon: Icons.extension,
page: ModulesPage(),
),
_NavPage(
label: 'Audit',
icon: Icons.timeline_outlined,
selectedIcon: Icons.timeline,
page: AuditPage(),
),
_NavPage(
label: 'Approvals',
icon: Icons.inbox_outlined,
selectedIcon: Icons.inbox,
page: ApprovalsPage(),
),
];
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
body: Row(
children: [
NavigationRail(
extended: true,
minExtendedWidth: 180,
selectedIndex: _selectedIndex,
onDestinationSelected: (i) => setState(() => _selectedIndex = i),
leading: Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Column(
children: [
Icon(Icons.hub_outlined, size: 32, color: theme.colorScheme.primary),
const SizedBox(height: 8),
Text(
'F∆I Studio',
style: theme.textTheme.titleMedium?.copyWith(
color: theme.colorScheme.primary,
fontWeight: FontWeight.w600,
),
),
Text(
'connected: localhost:50051',
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
],
),
),
destinations: _pages
.map(
(p) => NavigationRailDestination(
icon: Icon(p.icon),
selectedIcon: Icon(p.selectedIcon),
label: Text(p.label),
),
)
.toList(),
),
const VerticalDivider(width: 1),
Expanded(child: _pages[_selectedIndex].page),
],
),
);
}
}
class _NavPage {
final String label;
final IconData icon;
final IconData selectedIcon;
final Widget page;
const _NavPage({
required this.label,
required this.icon,
required this.selectedIcon,
required this.page,
});
}

176
lib/pages/approvals.dart Normal file
View file

@ -0,0 +1,176 @@
import 'package:flutter/material.dart';
import '../data/mock.dart';
class ApprovalsPage extends StatefulWidget {
const ApprovalsPage({super.key});
@override
State<ApprovalsPage> createState() => _ApprovalsPageState();
}
class _ApprovalsPageState extends State<ApprovalsPage> {
final _decided = <String>{};
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final pending =
mockApprovals.where((a) => !_decided.contains(a.id)).toList();
return Scaffold(
appBar: AppBar(
title: const Text('Pending Approvals'),
centerTitle: false,
),
body: pending.isEmpty
? Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.check_circle_outline,
size: 64,
color: theme.colorScheme.primary.withValues(alpha: 0.5),
),
const SizedBox(height: 16),
Text(
'No pending approvals.',
style: theme.textTheme.titleMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
],
),
),
)
: ListView.separated(
padding: const EdgeInsets.all(24),
itemCount: pending.length,
separatorBuilder: (_, _) => const SizedBox(height: 16),
itemBuilder: (context, i) {
final a = pending[i];
return _ApprovalCard(
approval: a,
onApprove: () =>
setState(() => _decided.add(a.id)),
onReject: () =>
setState(() => _decided.add(a.id)),
);
},
),
);
}
}
class _ApprovalCard extends StatelessWidget {
final PendingApproval approval;
final VoidCallback onApprove;
final VoidCallback onReject;
const _ApprovalCard({
required this.approval,
required this.onApprove,
required this.onReject,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Card(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: theme.colorScheme.outlineVariant),
),
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.pending_outlined,
color: theme.colorScheme.tertiary,
size: 20,
),
const SizedBox(width: 8),
Text(
'${approval.flowName} → ${approval.stepId}',
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w600,
),
),
const Spacer(),
if (approval.expiresAt != null)
Text(
_expiresIn(approval.expiresAt!),
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
],
),
const SizedBox(height: 16),
Text(
approval.prompt,
style: theme.textTheme.bodyLarge,
),
if (approval.showPreview != null) ...[
const SizedBox(height: 12),
Container(
width: double.infinity,
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: theme.colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(8),
),
child: Text(
approval.showPreview!,
style: theme.textTheme.bodySmall?.copyWith(
fontFamily: 'monospace',
),
),
),
],
const SizedBox(height: 16),
Row(
children: [
Text(
'approval id: ${approval.id}',
style: theme.textTheme.bodySmall?.copyWith(
fontFamily: 'monospace',
color: theme.colorScheme.onSurfaceVariant,
),
),
const Spacer(),
OutlinedButton.icon(
onPressed: onReject,
icon: const Icon(Icons.close),
label: const Text('Reject'),
),
const SizedBox(width: 8),
FilledButton.icon(
onPressed: onApprove,
icon: const Icon(Icons.check),
label: const Text('Approve'),
),
],
),
],
),
),
);
}
String _expiresIn(DateTime t) {
final remaining = t.difference(DateTime.now());
if (remaining.isNegative) return 'expired';
final minutes = remaining.inMinutes;
if (minutes < 60) return 'expires in ${minutes}m';
final hours = remaining.inHours;
return 'expires in ${hours}h';
}
}

181
lib/pages/audit.dart Normal file
View file

@ -0,0 +1,181 @@
import 'package:flutter/material.dart';
import '../data/mock.dart';
class AuditPage extends StatefulWidget {
const AuditPage({super.key});
@override
State<AuditPage> createState() => _AuditPageState();
}
class _AuditPageState extends State<AuditPage> {
String _typeFilter = 'all';
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final filtered = _typeFilter == 'all'
? mockEvents
: mockEvents.where((e) => e.type.startsWith(_typeFilter)).toList();
return Scaffold(
appBar: AppBar(
title: const Text('Audit Stream'),
centerTitle: false,
actions: [
Padding(
padding: const EdgeInsets.only(right: 16),
child: DropdownButton<String>(
value: _typeFilter,
onChanged: (v) => setState(() => _typeFilter = v ?? 'all'),
items: const [
DropdownMenuItem(value: 'all', child: Text('all events')),
DropdownMenuItem(value: 'flow.', child: Text('flow.*')),
DropdownMenuItem(value: 'step.', child: Text('step.*')),
DropdownMenuItem(value: 'module.', child: Text('module.*')),
],
),
),
],
),
body: Column(
children: [
_StatusBar(eventCount: filtered.length),
Expanded(
child: ListView.separated(
padding: const EdgeInsets.all(24),
itemCount: filtered.length,
separatorBuilder: (_, _) => const SizedBox(height: 8),
itemBuilder: (context, i) {
final e = filtered[i];
final ts = e.timestamp;
final tsStr =
'${ts.hour.toString().padLeft(2, '0')}:${ts.minute.toString().padLeft(2, '0')}:${ts.second.toString().padLeft(2, '0')}';
final tone = _toneFor(e.type);
return Card(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: BorderSide(
color: theme.colorScheme.outlineVariant,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
child: Row(
children: [
Container(
width: 4,
height: 32,
decoration: BoxDecoration(
color: tone,
borderRadius: BorderRadius.circular(2),
),
),
const SizedBox(width: 12),
SizedBox(
width: 90,
child: Text(
tsStr,
style: theme.textTheme.bodySmall?.copyWith(
fontFamily: 'monospace',
color: theme.colorScheme.onSurfaceVariant,
),
),
),
SizedBox(
width: 180,
child: Text(
e.type,
style: theme.textTheme.bodyMedium?.copyWith(
fontFamily: 'monospace',
fontWeight: FontWeight.w500,
),
),
),
Expanded(
child: Text(
_contextLine(e),
style: theme.textTheme.bodyMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
),
if (e.durationMs != null)
Text(
'${e.durationMs}ms',
style: theme.textTheme.bodySmall?.copyWith(
fontFamily: 'monospace',
color: theme.colorScheme.onSurfaceVariant,
),
),
],
),
),
);
},
),
),
],
),
);
}
String _contextLine(AuditEvent e) {
final parts = <String>[];
if (e.flowName != null) parts.add(e.flowName!);
if (e.stepId != null) parts.add(':${e.stepId}');
if (e.moduleName != null) parts.add(' via ${e.moduleName}');
if (e.error != null) parts.add(' [error: ${e.error}]');
return parts.join('');
}
Color _toneFor(String type) {
final scheme = Theme.of(context).colorScheme;
if (type.endsWith('.failed')) return scheme.error;
if (type.endsWith('.completed')) return scheme.primary;
if (type.endsWith('.started')) return scheme.tertiary;
return scheme.outline;
}
}
class _StatusBar extends StatelessWidget {
final int eventCount;
const _StatusBar({required this.eventCount});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
color: theme.colorScheme.surfaceContainerHigh,
child: Row(
children: [
Icon(
Icons.fiber_manual_record,
size: 12,
color: theme.colorScheme.tertiary,
),
const SizedBox(width: 8),
Text(
'live (mock data) — $eventCount events',
style: theme.textTheme.bodySmall,
),
const Spacer(),
Text(
'hash chain: verified',
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.primary,
),
),
],
),
);
}
}

133
lib/pages/modules.dart Normal file
View file

@ -0,0 +1,133 @@
import 'package:flutter/material.dart';
import '../data/mock.dart';
class ModulesPage extends StatelessWidget {
const ModulesPage({super.key});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
appBar: AppBar(
title: const Text('Installed Modules'),
centerTitle: false,
),
body: ListView.separated(
padding: const EdgeInsets.all(24),
itemCount: mockModules.length,
separatorBuilder: (_, _) => const SizedBox(height: 12),
itemBuilder: (context, i) {
final m = mockModules[i];
return Card(
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
side: BorderSide(color: theme.colorScheme.outlineVariant),
),
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
m.name,
style: theme.textTheme.titleMedium?.copyWith(
fontWeight: FontWeight.w600,
),
),
const SizedBox(width: 8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: theme.colorScheme.secondaryContainer,
borderRadius: BorderRadius.circular(4),
),
child: Text(
'v${m.version}',
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSecondaryContainer,
),
),
),
],
),
const SizedBox(height: 8),
_Row(label: 'Capabilities', items: m.capabilities),
if (m.permissions.isNotEmpty) ...[
const SizedBox(height: 6),
_Row(label: 'Permissions', items: m.permissions),
],
if (m.requiresServices.isNotEmpty) ...[
const SizedBox(height: 6),
_Row(
label: 'Requires services',
items: m.requiresServices,
),
],
],
),
),
);
},
),
);
}
}
class _Row extends StatelessWidget {
final String label;
final List<String> items;
const _Row({required this.label, required this.items});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 140,
child: Text(
label,
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
),
Expanded(
child: Wrap(
spacing: 6,
runSpacing: 6,
children: items
.map(
(s) => Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 3,
),
decoration: BoxDecoration(
color: theme.colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(4),
),
child: Text(
s,
style: theme.textTheme.bodySmall?.copyWith(
fontFamily: 'monospace',
),
),
),
)
.toList(),
),
),
],
);
}
}