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

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(),
),
),
],
);
}
}