feat: live gRPC pages — drop mock data, talk to the real hub
Studio's three MVP pages now pull live data from a running hub via fai_dart_sdk. Mock fixture removed. - data/hub.dart: HubService singleton wraps fai_dart_sdk's HubClient and exposes UI-friendly types (ModuleSummary, AuditEvent, PendingApproval) so pages don't import protobuf. - pages/modules.dart: FutureBuilder against listModules, groups CapabilityEntry rows by module, retry-on-error UI. - pages/audit.dart: 2s polling Timer, status bar shows "live (polling 2s)" or "disconnected — <error>". - pages/approvals.dart: live listApprovals, Approve sends DecideApproval(APPROVE), Reject opens a reason dialog and sends DecideApproval(REJECT). Both refresh after success. - Connection-error states across all pages: cloud_off icon + hint to start `fai serve` + Retry button. When no hub is running the pages render their disconnected state instead of crashing. When a hub is running, the data is real — no more mock fixture. Bumps fai_studio 0.1.0 -> 0.2.0. Signed-off-by: flemming-it <stefan.a.flemming@googlemail.com>
This commit is contained in:
flemming-it
parent
7c11598846
commit
127c497f73
6 changed files with 602 additions and 354 deletions
|
|
@ -1,10 +1,27 @@
|
|||
import 'package:flutter/material.dart';
|
||||
|
||||
import '../data/mock.dart';
|
||||
import '../data/hub.dart';
|
||||
|
||||
class ModulesPage extends StatelessWidget {
|
||||
class ModulesPage extends StatefulWidget {
|
||||
const ModulesPage({super.key});
|
||||
|
||||
@override
|
||||
State<ModulesPage> createState() => _ModulesPageState();
|
||||
}
|
||||
|
||||
class _ModulesPageState extends State<ModulesPage> {
|
||||
late Future<List<ModuleSummary>> _future;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_future = HubService.instance.listModules();
|
||||
}
|
||||
|
||||
void _refresh() => setState(() {
|
||||
_future = HubService.instance.listModules();
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
|
@ -12,67 +29,93 @@ class ModulesPage extends StatelessWidget {
|
|||
appBar: AppBar(
|
||||
title: const Text('Installed Modules'),
|
||||
centerTitle: false,
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.refresh),
|
||||
tooltip: 'Reload',
|
||||
onPressed: _refresh,
|
||||
),
|
||||
],
|
||||
),
|
||||
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(
|
||||
body: FutureBuilder<List<ModuleSummary>>(
|
||||
future: _future,
|
||||
builder: (context, snapshot) {
|
||||
if (snapshot.connectionState == ConnectionState.waiting) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
if (snapshot.hasError) {
|
||||
return _ConnectionError(
|
||||
message: 'Hub unreachable: ${snapshot.error}',
|
||||
onRetry: _refresh,
|
||||
);
|
||||
}
|
||||
final modules = snapshot.data ?? [];
|
||||
if (modules.isEmpty) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Text(
|
||||
'No modules installed.\n'
|
||||
'Run `fai install <capability-name>` or check ~/.fai/modules/.',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
return ListView.separated(
|
||||
padding: const EdgeInsets.all(24),
|
||||
itemCount: modules.length,
|
||||
separatorBuilder: (_, _) => const SizedBox(height: 12),
|
||||
itemBuilder: (context, i) {
|
||||
final m = modules[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: [
|
||||
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,
|
||||
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),
|
||||
_ChipRow(label: 'Capabilities', items: m.capabilities),
|
||||
],
|
||||
),
|
||||
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,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
|
|
@ -80,11 +123,11 @@ class ModulesPage extends StatelessWidget {
|
|||
}
|
||||
}
|
||||
|
||||
class _Row extends StatelessWidget {
|
||||
class _ChipRow extends StatelessWidget {
|
||||
final String label;
|
||||
final List<String> items;
|
||||
|
||||
const _Row({required this.label, required this.items});
|
||||
const _ChipRow({required this.label, required this.items});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
|
|
@ -131,3 +174,48 @@ class _Row extends StatelessWidget {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ConnectionError extends StatelessWidget {
|
||||
final String message;
|
||||
final VoidCallback onRetry;
|
||||
|
||||
const _ConnectionError({required this.message, required this.onRetry});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.cloud_off_outlined,
|
||||
size: 48,
|
||||
color: theme.colorScheme.error,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
message,
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Start the hub with `fai serve`.',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
FilledButton.tonal(
|
||||
onPressed: onRetry,
|
||||
child: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue