Improve UX of editing with AI (drafted by Brian).

.vscode/launch.json

@@ -10,6 +10,20 @@
                 "--disable-web-security",
             ],
         },
+        {
+            "name": "ui, beta channel",
+            "request": "launch",
+            "type": "dart",
+            "program": "pkgs/dartpad_ui/lib/main.dart",
+            "args": [
+                "--web-browser-flag",
+                "--disable-web-security",
+                "--web-port",
+                "8888",
+                "--web-launch-url",
+                "http://localhost:8888/?channel=beta",
+            ],
+        },
         {
             "name": "ui, local backend",
             "request": "launch",

pkgs/dartpad_ui/.firebaserc

@@ -1,18 +1,18 @@
 {
   "projects": {
-    "default": "dart-pad"
+    "default": "dartpad-polina"
   },
   "targets": {
-    "dart-pad": {
+    "dartpad-polina": {
       "hosting": {
         "dartpad": [
-          "dart-pad-a3c64"
+          "dartpad-polina"
         ],
         "preview": [
-          "sketch-pad-1cebb"
+          "dartpad-polina"
         ]
       }
     }
   },
   "etags": {}
-}
+}

pkgs/dartpad_ui/README.md

@@ -61,11 +61,9 @@ If you want to collaborate on an intermediate version, you can publish it to you
          ...
    ```
 
-2. Run `firebase init`
+2. Make sure your current Flutter channel is set to `stable`
 
-3. Make sure your current Flutter channel is set to `stable`
-
-4. Run the commands:
+3. Run the commands:
 
    ```
    cd pkgs/dartpad_ui

pkgs/dartpad_ui/lib/editor/editor.dart

@@ -622,19 +622,16 @@ class _ReadOnlyCodeWidgetState extends State<ReadOnlyCodeWidget> {
   Widget build(BuildContext context) {
     return Focus(
       autofocus: true,
-      child: SizedBox(
-        height: 500,
-        child: TextField(
-          controller: _textController,
-          readOnly: true,
-          maxLines: null,
-          style: GoogleFonts.robotoMono(
-            fontSize: 14,
-            fontWeight: FontWeight.w400,
-            color: Theme.of(context).textTheme.bodyMedium?.color,
-          ),
-          decoration: const InputDecoration(border: InputBorder.none),
+      child: TextField(
+        controller: _textController,
+        readOnly: true,
+        maxLines: null,
+        style: GoogleFonts.robotoMono(
+          fontSize: 14,
+          fontWeight: FontWeight.w400,
+          color: Theme.of(context).textTheme.bodyMedium?.color,
         ),
+        decoration: const InputDecoration(border: InputBorder.none),
       ),
     );
   }
@@ -656,27 +653,24 @@ class ReadOnlyDiffWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return Focus(
       autofocus: true,
-      child: SizedBox(
-        height: 500,
-        child: SingleChildScrollView(
-          scrollDirection: Axis.vertical,
-          child: PrettyDiffText(
-            oldText: existingSource,
-            newText: newSource,
-            defaultTextStyle: GoogleFonts.robotoMono(
-              fontSize: 14,
-              fontWeight: FontWeight.w400,
-              color: Theme.of(context).textTheme.bodyMedium?.color,
-            ),
-            addedTextStyle: const TextStyle(
-              color: Colors.black,
-              backgroundColor: Color.fromARGB(255, 201, 255, 201),
-            ),
-            deletedTextStyle: const TextStyle(
-              color: Colors.black,
-              backgroundColor: Color.fromARGB(255, 249, 199, 199),
-              decoration: TextDecoration.lineThrough,
-            ),
+      child: SingleChildScrollView(
+        scrollDirection: Axis.vertical,
+        child: PrettyDiffText(
+          oldText: existingSource,
+          newText: newSource,
+          defaultTextStyle: GoogleFonts.robotoMono(
+            fontSize: 14,
+            fontWeight: FontWeight.w400,
+            color: Theme.of(context).textTheme.bodyMedium?.color,
+          ),
+          addedTextStyle: const TextStyle(
+            color: Colors.black,
+            backgroundColor: Color.fromARGB(255, 201, 255, 201),
+          ),
+          deletedTextStyle: const TextStyle(
+            color: Colors.black,
+            backgroundColor: Color.fromARGB(255, 249, 199, 199),
+            decoration: TextDecoration.lineThrough,
           ),
         ),
       ),

pkgs/dartpad_ui/lib/editor/generating_panel.dart

@@ -0,0 +1,128 @@
+// Copyright (c) 2025, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+
+import '../model.dart';
+import '../simple_widgets.dart';
+import '../theme.dart';
+import '../utils.dart';
+import 'editor.dart';
+
+class GeneratingCodePanel extends StatefulWidget {
+  const GeneratingCodePanel({
+    required this.appModel,
+    required this.appServices,
+    super.key,
+  });
+
+  final AppModel appModel;
+  final AppServices appServices;
+
+  @override
+  State<GeneratingCodePanel> createState() => _GeneratingCodePanelState();
+}
+
+class _GeneratingCodePanelState extends State<GeneratingCodePanel> {
+  final _focusNode = FocusNode();
+  StreamSubscription<String>? _subscription;
+
+  @override
+  void initState() {
+    super.initState();
+
+    final genAiManager = widget.appModel.genAiManager;
+
+    final stream = genAiManager.stream;
+
+    _subscription = stream.value.listen(
+      (text) => setState(() {
+        genAiManager.writeToStreamBuffer(text);
+      }),
+      onDone: () {
+        setState(() {
+          final generatedCode = genAiManager.generatedCode().trim();
+          if (generatedCode.isEmpty) {
+            widget.appModel.editorStatus.showToast('Error generating code');
+            widget.appModel.appendError(
+              'There was an error generating your code, please try again.',
+            );
+            widget.appModel.genAiManager.enterStandby();
+            return;
+          }
+          genAiManager.setStreamBufferValue(generatedCode);
+          genAiManager.setStreamIsDone(true);
+          genAiManager.enterAwaitingAcceptReject();
+          _focusNode.requestFocus();
+          widget.appModel.sourceCodeController.textNoScroll = generatedCode;
+          widget.appServices.performCompileAndReloadOrRun();
+        });
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    _subscription?.cancel();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final genAiManager = widget.appModel.genAiManager;
+    return ValueListenableBuilder(
+      valueListenable: genAiManager.streamIsDone,
+      builder: (
+        BuildContext context,
+        bool genAiCodeStreamIsDone,
+        Widget? child,
+      ) {
+        final resolvedSpinner =
+            genAiCodeStreamIsDone
+                ? SizedBox(width: 0, height: 0)
+                : Positioned(
+                  top: 10,
+                  right: 10,
+                  child: AnimatedContainer(
+                    duration: animationDelay,
+                    curve: animationCurve,
+                    child: CircularProgressIndicator(),
+                  ),
+                );
+        return Stack(
+          children: [
+            resolvedSpinner,
+            MultiValueListenableBuilder(
+              listenables: [
+                genAiManager.streamBuffer,
+                widget.appModel.genAiManager.activeCuj,
+                genAiManager.preGenAiSourceCode,
+              ],
+              builder: (_) {
+                final genAiCodeStreamBuffer =
+                    genAiManager.streamBuffer.value.toString();
+
+                return Focus(
+                  autofocus: true,
+                  focusNode: _focusNode,
+                  child:
+                      widget.appModel.genAiManager.activeCuj.value ==
+                              GenAiCuj.generateCode
+                          ? ReadOnlyCodeWidget(genAiCodeStreamBuffer)
+                          : ReadOnlyDiffWidget(
+                            existingSource:
+                                genAiManager.preGenAiSourceCode.value,
+                            newSource: genAiCodeStreamBuffer,
+                          ),
+                );
+              },
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

pkgs/dartpad_ui/lib/extensions.dart

@@ -2,6 +2,7 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
+import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 extension GoRouteHelpers on GoRouter {
@@ -21,3 +22,13 @@ extension GoRouteHelpers on GoRouter {
     go(currentUri.replace(queryParameters: newQueryParameters).toString());
   }
 }
+
+extension MenuControllerToggleMenu on MenuController {
+  void toggleMenuState() {
+    if (isOpen) {
+      close();
+    } else {
+      open();
+    }
+  }
+}