feat: Add Haiku-powered dynamic placeholder text

Generates witty placeholder text using Claude Haiku at startup.
Includes typing animation effect for visual polish.

Author: Gustaf Eden

lib/modules/agent_network/pages/networks_overview_page.dart

@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'dart:io';
 import 'package:nocterm/nocterm.dart';
 import 'package:nocterm_riverpod/nocterm_riverpod.dart';
@@ -7,6 +8,10 @@ import 'package:vide_cli/modules/agent_network/pages/networks_list_page.dart';
 import 'package:vide_cli/modules/agent_network/service/agent_network_manager.dart';
 import 'package:vide_cli/modules/agent_network/state/agent_networks_state_notifier.dart';
 import 'package:vide_cli/components/attachment_text_field.dart';
+import 'package:vide_cli/modules/haiku/haiku_service.dart';
+import 'package:vide_cli/modules/haiku/haiku_providers.dart';
+import 'package:vide_cli/modules/haiku/prompts/loading_words_prompt.dart';
+import 'package:vide_cli/modules/haiku/prompts/placeholder_prompt.dart';
 import 'package:vide_cli/utils/project_detector.dart';
 import 'package:path/path.dart' as path;
 
@@ -20,10 +25,48 @@ class NetworksOverviewPage extends StatefulComponent {
 class _NetworksOverviewPageState extends State<NetworksOverviewPage> {
   ProjectType? projectType;
 
+  // Placeholder animation state
+  Timer? _placeholderTimer;
+  bool _isLoadingPlaceholder = true;
+  bool _isTypingPlaceholder = false;
+  String _fullPlaceholder = '';
+  String _displayedPlaceholder = '';
+  int _typingIndex = 0;
+
   @override
   void initState() {
     super.initState();
     _loadProjectInfo();
+    _generateStartupContent();
+  }
+
+  void _startTypingAnimation(String text) {
+    _placeholderTimer?.cancel();
+    _fullPlaceholder = text;
+    _typingIndex = 0;
+    _displayedPlaceholder = '';
+    _isTypingPlaceholder = true;
+
+    _placeholderTimer = Timer.periodic(const Duration(milliseconds: 30), (_) {
+      if (mounted && _typingIndex < _fullPlaceholder.length) {
+        setState(() {
+          _typingIndex++;
+          _displayedPlaceholder = _fullPlaceholder.substring(0, _typingIndex);
+        });
+      } else {
+        _placeholderTimer?.cancel();
+        setState(() {
+          _isTypingPlaceholder = false;
+          _displayedPlaceholder = _fullPlaceholder;
+        });
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _placeholderTimer?.cancel();
+    super.dispose();
   }
 
   Future<void> _loadProjectInfo() async {
@@ -37,6 +80,68 @@ class _NetworksOverviewPageState extends State<NetworksOverviewPage> {
     }
   }
 
+  /// Generate startup content using HaikuService
+  void _generateStartupContent() {
+    final now = DateTime.now();
+
+    // Pre-generate loading words for first message
+    HaikuService.invokeForList(
+      systemPrompt: LoadingWordsPrompt.build(now),
+      userMessage: 'Generate loading words for: "Starting a new coding session"',
+      delay: Duration.zero, // No delay on startup
+    ).then((words) {
+      if (mounted && words != null) {
+        context.read(loadingWordsProvider.notifier).state = words;
+      }
+    });
+
+    // Generate dynamic placeholder text
+    HaikuService.invoke(
+      systemPrompt: PlaceholderPrompt.build(now),
+      userMessage: 'Generate placeholder text',
+      delay: Duration.zero,
+    ).then((placeholder) {
+      if (mounted) {
+        setState(() {
+          _isLoadingPlaceholder = false;
+        });
+        String text = placeholder?.trim() ?? 'Describe your goal (you can attach images)';
+
+        // Validate: handle verbose multi-line responses
+        if (text.contains('\n') || text.length > 50) {
+          // Multi-line or too long - try to extract just the placeholder
+          final lines = text.split('\n').map((l) => l.trim()).where((l) => l.isNotEmpty).toList();
+          // Look for a short line that looks like a placeholder (not explanation text)
+          String? shortLine;
+          for (final line in lines) {
+            // Skip lines that look like explanations
+            if (line.startsWith('Here') ||
+                line.startsWith('Alright') ||
+                line.contains(':') ||
+                line.startsWith('Pick') ||
+                line.startsWith('I')) continue;
+            // Clean up markdown and list markers
+            final cleaned =
+                line.replaceAll(RegExp(r'^[\*\-\d\.\)]+\s*'), '').replaceAll('**', '').trim();
+            if (cleaned.length >= 3 && cleaned.length <= 45) {
+              shortLine = cleaned;
+              break;
+            }
+          }
+          text = shortLine ?? 'Describe your goal (you can attach images)';
+        }
+
+        // Final safety: if still too long, use fallback
+        if (text.length > 50) {
+          text = 'Describe your goal (you can attach images)';
+        }
+
+        context.read(placeholderTextProvider.notifier).state = text;
+        _startTypingAnimation(text);
+      }
+    });
+  }
+
   void _handleSubmit(Message message) async {
     // Start a new agent network with the full message (preserves attachments)
     final network = await context.read(agentNetworkManagerProvider.notifier).startNew(message);
@@ -54,6 +159,18 @@ class _NetworksOverviewPageState extends State<NetworksOverviewPage> {
     final currentDir = Directory.current.path;
     final dirName = path.basename(currentDir);
 
+    // Get placeholder - empty while loading, then type in the text when ready
+    final String placeholder;
+    if (_isLoadingPlaceholder) {
+      placeholder = '';
+    } else if (_isTypingPlaceholder) {
+      placeholder = _displayedPlaceholder;
+    } else {
+      placeholder = _displayedPlaceholder.isNotEmpty
+          ? _displayedPlaceholder
+          : (context.watch(placeholderTextProvider) ?? 'Describe your goal (you can attach images)');
+    }
+
     return Focusable(
       focused: true,
       onKeyEvent: (event) {
@@ -84,7 +201,7 @@ class _NetworksOverviewPageState extends State<NetworksOverviewPage> {
               Container(
                 child: AttachmentTextField(
                   focused: true,
-                  placeholder: 'Describe your goal (you can attach images)',
+                  placeholder: placeholder,
                   onSubmit: _handleSubmit,
                 ),
                 padding: EdgeInsets.all(1),
@@ -139,4 +256,3 @@ class _ProjectTypeBadge extends StatelessComponent {
     );
   }
 }
-

lib/modules/haiku/prompts/placeholder_prompt.dart

@@ -0,0 +1,23 @@
+/// Prompt builder for dynamic input field placeholder text
+class PlaceholderPrompt {
+  static String build(DateTime now) {
+    final randomSeed = now.millisecondsSinceEpoch % 100;
+
+    return '''
+Generate witty placeholder text for an AI coding assistant input field.
+
+Seed: $randomSeed
+
+RULES:
+- 3-5 words only
+- Playful, slightly cheeky tone
+- Like a friend asking what you want to work on
+- BANNED: "What's on your mind", "Describe your", "Enter your", "Type here"
+- Be creative! Think: "What are we breaking today?", "Got bugs?", "Your wish, my code..."
+
+CRITICAL: Output ONLY the placeholder text itself.
+NO explanations, NO options, NO numbering, NO markdown.
+Just the 3-5 word phrase, nothing else.
+''';
+  }
+}