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

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

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';
}
}