diff --git a/docs/get-started/quickstart.md b/docs/get-started/quickstart.md index 466ee73..46ae539 100644 --- a/docs/get-started/quickstart.md +++ b/docs/get-started/quickstart.md @@ -7,85 +7,18 @@ sidebar_position: 1 keywords: [quickstart, getting started, dreamflow tutorial, ai app generation, flutter development, mobile app creation, natural language prompts] --- - - # Quickstart +When starting a new Dreamflow project you have three options: -## Start from Scratch - -Starting a new Flutter project in Dreamflow is simple and flexible. When you create a project from scratch, you'll begin with Flutter's classic counter app template. From there, you have multiple ways to build out your application: - -- Use the **[AI Agent](../workspace/agent-panel.md)** to add features through natural language conversations. -- Visually construct your UI with the **[Properties Editor](../workspace/properties-panel.md)** and drag-and-drop tools. -- Write and edit code directly in the integrated **[Code Editor](../workspace/content-panel.md#code-editor)**. -- Combine these approaches seamlessly as your project grows. - -This flexibility allows you to work in whatever way best suits your development style and project needs. - -
- -
- -## Start from a Template - -Dreamflow also provides a collection of professionally designed, production-ready templates to jumpstart your app development. Our templates are fully customizable to match your brand and requirements while being designed to work seamlessly across mobile, tablet, and web platforms. - -Simply choose a template that matches your needs and customize it to create your unique application. - -
- -
- +- **[Start from a prompt](/quickstart#start-with-a-prompt)**: when you want to get a jumpstart on a brand new app idea. +- **[Start from scratch](/quickstart#start-from-scratch)**: when you want to incrementally build from a blank project. +- **[Start from a template](/quickstart#start-from-a-template)**: when you want to start from an existing beautiful, tailored app. ## Start With a Prompt -Dreamflow's AI-powered app generation allows you to create fully functional, production-ready applications from simple text or image descriptions. Simply describe what you want to build, and Dreamflow Agent will generate the entire app structure, UI components, and functionality for you. +Dreamflow's AI-powered app generation allows you to create fully functional, production-ready applications from simple text and image descriptions. Simply describe what you want to build, additionally add screenshots for design inspiration, and Dreamflow Agent will generate the entire app structure, UI components, and functionality for you. Ready to create your app? Simply: @@ -171,3 +104,76 @@ Build a small chat app (store the data locally for now) where users can chat wit - Make the chats clustered when folks are close to each other - Store the chat data in a cloud database - Show a notification when a message arrives when the app is not active + + +## Start from Scratch + +When you create a project from scratch, you'll begin with Flutter's classic counter app template. From there, you have multiple ways to build out your application: + +- Use the **[AI Agent](../workspace/agent-panel.md)** to add features through natural language conversations. +- Add new UI elements to your page through the **[Widget Tree]** +- Visually construct your UI with the **[Properties Editor](../workspace/properties-panel.md)** and drag-and-drop tools. +- Write and edit code directly in the integrated **[Code Editor](../workspace/content-panel.md#code-editor)**. +- Combine these approaches seamlessly as your project grows. + +This flexibility allows you to work in whatever way best suits your development style and project needs. + +
+ +
+ +## Start from a Template + +Dreamflow also provides a collection of professionally designed, production-ready templates to jumpstart your app development. Our templates are fully customizable to match your brand and requirements while being designed to work seamlessly across mobile, tablet, and web platforms. + +Simply choose a template that matches your needs and customize it to create your unique application. + +
+ +
+ + diff --git a/docs/imgs/overview.avif b/docs/imgs/overview.avif new file mode 100644 index 0000000..156f08b Binary files /dev/null and b/docs/imgs/overview.avif differ diff --git a/docs/index.md b/docs/index.md index dcbb9c6..f8a4900 100644 --- a/docs/index.md +++ b/docs/index.md @@ -12,7 +12,7 @@ keywords: [dreamflow welcome, flutter development platform, ai mobile app develo **The Fastest Way to Build Mobile Apps** -Dreamflow is an AI-first platform that combines code, visual, and agentic app development for Flutter—no install, no lock-in, production-ready workflows. Transform your ideas into production-ready mobile apps in minutes using natural language prompts and our integrated development environment. +Dreamflow is an AI-first platform that combines agentic, visual and code development for Flutter — no install, no lock-in, production-ready workflows. Transform your ideas into production-ready mobile apps in minutes using natural language prompts and our integrated development environment. ### Product Tour @@ -40,42 +40,41 @@ Dreamflow is an AI-first platform that combines code, visual, and agentic app de - ## Key Features -- **[AI Agent](workspace/agent-panel.md)**: Prompt small edits or large refactors with natural language commands. The AI agent can scaffold entire screens, implement complex flows, and generate comprehensive tests, making development faster and more intuitive than traditional coding approaches. +In Dreamflow, the code is always the single source of truth. Whether you build with the agent, use visual controls, or edit the source directly - the code is updated in realtime as you build. -- **[Realtime Preview](workspace/content-panel.md#app-preview)**: See your changes instantly with a live run session that compiles and previews your app in real-time. Inspect logs, monitor state changes, and debug issues as they happen, providing immediate feedback for faster iteration and development. +![overview](./imgs/overview.avif) -- **[Visual Widget Tree](workspace/modules-panel/widget-panel.md)**: Add, remove, move, wrap, collapse, and expand UI components with intuitive visual controls. Restructure your entire widget hierarchy instantly through drag-and-drop interactions, making UI development more visual and accessible. +- **[AI Agent](workspace/agent-panel.md)**: Start a new app, get a jump start on new features for your existing project, or get help fixing issues using natural language commands. The AI agent can scaffold entire screens, implement complex flows, and help add debug outputs - making development faster and easier to understand. -- **[Properties Editor](workspace/properties-panel.md)**: Type-safe controls for every widget property with intelligent suggestions and validation. Use expressions, formulas, or simply ask the AI for assistance when configuring complex widget behaviors and styling. +- **[Realtime Preview](workspace/content-panel.md#app-preview)**: See your changes instantly with a live run session that compiles and previews your app in real-time. Inspect logs, monitor state changes, and debug issues as they happen, providing immediate feedback for faster iteration and development. -- **[Deploy](test-and-publish/publish/web-deployment.md)**: Push your applications to the web or app stores with streamlined one-click deployment. Support for multiple platforms including Web, iOS, Android ensures your app reaches users everywhere. +- **[Visual Widget Tree](workspace/modules-panel/widget-panel.md)**: Add, remove, move, wrap, collapse, and expand UI components with intuitive visual controls. Restructure your entire widget hierarchy instantly through drag-and-drop interactions, making UI development more visual and accessible. -- **Hot Reload**: See changes instantly as you develop with Flutter's hot reload technology, enabling rapid iteration and real-time feedback during the development process. +- **[Visual Property Editors](workspace/properties-panel.md)**: Type-safe controls for every widget property with intelligent suggestions and validation. Visually select different styles, use code expressions, or simply ask the AI for assistance when configuring complex widget behaviors and styling. -- **[Debug Console](workspace/content-panel.md#debug-console)**: Monitor app logs and performance in real-time with integrated debugging tools that help you identify and resolve issues quickly. +- **Deploy**: Push your applications to the web or app stores with streamlined one-click deployment. Support for multiple platforms including Web, iOS, and Android ensures your app reaches users everywhere. -- **Multi-Platform Support**: Build applications that run seamlessly across mobile (iOS and Android), web (responsive), and desktop (macOS, Windows, Linux) platforms from a single codebase. ## How It Works -Dreamflow follows a simple 3-step workflow: **Start → Build → Run & Ship** +Dreamflow follows a simple 3-step workflow: **Start → Iterate → Ship** ### 1. Start -Kick off from a natural-language prompt, a blank Flutter project, or import an existing repo (coming soon). +Kick off from a natural-language prompt, a blank Flutter project, or import an existing Flutter repo using git (coming soon). -### 2. Build +### 2. Iterate Jump between multiple development modes to build your app efficiently: -- Use the **Code** editor for direct Flutter development. -- Navigate the **Visual widget tree** for drag-and-drop UI building. -- Configure components in the **Properties editor** with type-safe controls. -- Leverage the **AI agent** to scaffold features and refactor code through natural language. +- Leverage the **AI agent** to get a jump start on new features or for help debugging. +- Add, remove or rearrange UI elements (Widgets) in the **visual Widget Tree**. +- Configure arguments for widgets visually in the **Properties editor** with type-safe controls. +- Use the **Code** editor to peak under-the-hood and see what's going on. + -Built-in Firebase and Supabase integrations provide authentication, database, and storage capabilities without complex setup. The integrated **Language Server Protocol (LSP)** delivers intelligent code completions, quick fixes, and real-time diagnostics as you type. +Built-in Firebase and Supabase integrations provide authentication and database capabilities without complex setup. The integrated **Language Server Protocol (LSP)** delivers intelligent code completions, quick fixes, and real-time diagnostics as you type.
-### 3. Run & Ship +### 3. Ship A managed run session compiles and previews your app in real time. Connect Firebase/Supabase, test flows, and deploy to web or the app stores when ready. - - ## Ready to Start Building? Whether you're a seasoned developer looking to accelerate your workflow or a newcomer wanting to bring your app ideas to life, Dreamflow provides the tools and AI assistance you need to succeed. diff --git a/docs/workspace/agent-panel.md b/docs/workspace/agent-panel.md index 0faad71..efce031 100644 --- a/docs/workspace/agent-panel.md +++ b/docs/workspace/agent-panel.md @@ -58,7 +58,6 @@ The AI automatically has access to: - Your project's dependencies and configuration - ### Image Attachments Use the Attach Image button in the message box to add screenshots or images to your conversation. This can help the AI understand: @@ -113,7 +112,6 @@ The "Add to Agent" feature enhances AI conversations by providing detailed conte This gives the AI agent comprehensive understanding of the components you're working with, enabling more accurate assistance. -

-![Switch Positions](imgs/swap-positions.png) +- **Split Mode**: Shows both preview and code editor side-by-side with adjustable split ratio. Great for larger screens. ::: -The Code editor is built on **Monaco Editor** (the same editor that powers VS Code) and provides a full-featured coding experience. It includes syntax highlighting, auto-completion, and IntelliSense for Dart/Flutter development. The editor supports multi-file editing with tabs, real-time collaboration features, and integrates seamlessly with the platform's live preview system. It also includes advanced features like go-to-definition, find references, and code formatting that you'd expect from a professional IDE. - - - ## App Preview The App Preview panel is the central component of Dreamflow's environment, providing real-time preview of Flutter applications with advanced inspection and editing capabilities. @@ -54,31 +37,49 @@ The panel displays a real-time preview of your Flutter app running in **debug mo ### Inspect Mode -Inspect mode provides an interactive way to explore and modify your Flutter widgets visually. When enabled, hovering over widgets in the preview reveals their boundaries with colored overlays, making it easy to understand widget layout and hierarchy. This visual feedback helps developers quickly identify and understand the structure of their UI components. +Inspect mode provides an interactive way to explore and modify your Flutter widgets visually. When enabled, hovering over widgets in the preview reveals their boundaries with colored overlays, making it easy to understand widget layout and hierarchy. This visual feedback helps developers quickly identify and understand the structure of their UI components. + +To turn on inspect mode, select the **Inspect Mode** toggle in the Content Panel canvas. Selecting a widget with a click automatically synchronizes the [Widget Tree](modules-panel/widget-panel.md) and [Property Panel](properties-panel.md) to display detailed information about that widget, maintaining the highlight until another selection is made. This seamless integration between the preview and development panels streamlines the workflow for analyzing and modifying widgets. The context menu, accessed through right-click, offers powerful widget-specific actions including property editing, adding context to agent, code navigation, and other operations, enabling rapid iterations on your Flutter application's user interface. -### Hot Reload and Hot Restart -Dreamflow provides integrated hot reload and hot restart capabilities that allow you to quickly test code changes without losing your development context. These essential Flutter development tools are accessible through dedicated buttons in the content panel toolbar. +### Hot Reload, Hot Restart and Stop +Dreamflow provides integrated hot reload and hot restart capabilities that allow you to quickly test code changes without losing your development context. These essential Flutter development tools are accessible through dedicated buttons in the Content Panel toolbar. + +**Hot Reload** applies your code changes instantly while preserving the current application state. This is ideal for UI modifications, styling updates, and minor code changes. To Hot Reload the preview, click the **lightning button** at the top of the Content Panel. -**Hot Reload (⚡)** applies your code changes instantly while preserving the current application state. This is ideal for UI modifications, styling updates, and minor code changes. The operation typically completes in under 250ms and maintains your app's navigation stack, variables, and user interactions. +**Hot Restart** completely restarts your Flutter app with all code changes applied, resetting the application state. Use this for structural changes, when hot reload fails, or after fixing compilation errors. To Hot Restart the preview, click the **refresh** button at the top right of the Content Panel. -**Hot Restart (↶)** completely restarts your Flutter app with all code changes applied, resetting the application state. Use this for structural changes, when hot reload fails, or after fixing compilation errors. The system intelligently prevents restart attempts when compilation errors are detected. +**Stop Preview** ends the preview session completely. While Dreamflow works to prevent issues, sometimes the preview can enter an unusual or broken state. If problems aren’t resolved by Hot Reload or Hot Restart, it’s best to click the **Stop** button at the top of the Content Panel to stop the preview completely and restart it. Once stopped, you can restart the preview using the **Restart** button that appears on the preview device. +:::info[If you're still experiencing issues in the preview...] +You can try to reload the project entirely by selecting the project name in the top left corner and selecting "Reload Project" +::: ### Additional Features -- **Multi-Device Preview**: Choose from four preview modes to test your app across different form factors: +- **Multi-Device Preview**: Choose from four preview modes to test your app across different form factors (by selecting the device button in the Content Panel canvas): - Phone (iPhone 16 Pro Max - 390x844) - Tablet (iPad Pro 13" - 834x1194) - Desktop (1920x1080 landscape) - Expanded (full-width preview without device frame) + - **Interactive Zoom & Pan**: The preview supports zoom levels from 30% to 300% with smooth panning capabilities. Zoom preferences are automatically saved and restored between sessions. -- **Theme Support**: Preview both light and dark themes for your Flutter app. +- **Theme Support**: Use the App Brightness toggle (moon / sun button) on the Content Panel canvas to preview both light and dark themes for your app. + +## Code Editor + +The Code Editor is located on the left side of the Content Panel and provides a powerful environment for writing and editing your Flutter code. +:::tip +You can swap the positions of the preview and code editor by clicking on the icon at the top right of your Content Panel. +

+![Switch Positions](imgs/swap-positions.png) +::: +The Code editor is built on **Monaco Editor** (the same editor that powers VS Code) and provides a full-featured coding experience. It includes syntax highlighting, auto-completion, and IntelliSense for Dart/Flutter development. The editor supports multi-file editing with tabs, real-time collaboration features, and integrates seamlessly with the platform's live preview system. It also includes advanced right-click features like go-to-definition, find references, and code formatting that you'd expect from a professional IDE. ## Debug Console @@ -91,7 +92,6 @@ The Debug Console is a dedicated output panel in Dreamflow that displays real-ti - Error messages and stack traces -

![Widget Tree View Modes](../imgs/widget-tree-view-mode.png) - ::: ## Widget Management Right-click on any widget to access a comprehensive context menu with options for: -- Adding new widgets +- [Adding new widgets](/workspace/widget-tree#add-widget)(to widgets that take other widgets as children or have properties that take a widget) - Wrapping existing widgets - Copying, cutting, and pasting widgets -- Taking screenshots for AI context - Navigating to component definitions +- Navigating to component references - Removing widgets +- Navigating to the definition of the widget in code +- Adding the widget (and correspinding screenshot) as context to the agent chat (Add to Agent) +- Doing a quick AI-fueled edit of the widget using the agent (Prompt Edit) + +:::tip[Collapse / Expand all] +Sometimes you need to quickly take stock of the different pages and components in your application. You can use the Expand / Collapse button at the top of the Widget Tree panel to quickly expand or collapse all widgets within the tree. +::: ### Add Widget -Insert new widgets into your tree by selecting a parent widget and choosing from a categorized catalog of available widgets (Framework, Project, Dependencies). For structural widgets like Scaffold, you will see a list of property-specific widgets that can be added as children. +Insert new widgets into your tree by selecting a parent widget, clicking the plus (add) button, and choosing from a categorized catalog of available widgets (Framework, Project, Dependencies). For structural widgets like Scaffold, you will see a list of property-specific widgets that can be added as children. + +- **Framework widgets** are widgets imported directly from the Flutter framework, or the Material and Cupertino Flutter Libraries +- **Project widgets** are widgets (custom components) defined within the project +- **Dependency widgets** are widgets imported from packages

+ + Here’s a quick demo showing how you can add a widget to a Column:
+ ### Wrap Widget Wrap existing widgets with containers, padding, or other layout widgets to modify their behavior without changing their core functionality. +To wrap a widget, right click and select "Wrap Widget." Then select a widget to wrap with. +

+### Jumping to Component Definitions and References +When building your application, you may want to see where custom components are defined or referenced. For example, you can right click instances of components (denoted using the component icon) and click "See Definition" to jump to the definition of that component in the Widget Tree. + +To see references, or usages, of a component, right click on the component and select "See References." This allows you to step through each of the references within the Widget Tree. + + + + ### Clipboard Operations -The context menu provides standard clipboard operations (cut, copy, paste) that allow you to move and duplicate widgets across your layout tree. You can use either the context menu options or familiar keyboard shortcuts: +Right clicking on a widget in the Widget Tree also provides standard clipboard operations (cut, copy, paste) that allow you to move and duplicate widgets across your layout tree. You can use either the context menu options or familiar keyboard shortcuts: - **Cut**: Ctrl/Cmd + X - **Copy**: Ctrl/Cmd + C @@ -163,10 +202,6 @@ The context menu provides standard clipboard operations (cut, copy, paste) that These operations enable efficient widget reuse and layout restructuring without having to recreate widgets from scratch. ### Go to Code -The "Go to Code" and "Go to Component" features provide quick navigation from the widget tree to the underlying [code implementation](../content-panel.md#code-editor). You can access these features by hovering over a widget in the tree and right-clicking on the widget to use the context menu options. - -- **Go to Code**: Jumps to the Code Editor and highlights the code for the selected widget. -- **Go to Component**: For custom project widgets, opens the component file with the relevant widget code highlighted. +The "Go to Code" features provide quick navigation from the Widget Tree to the underlying [code implementation](../content-panel.md#code-editor). You can access these features by hovering over a widget in the tree and right-clicking on the widget and selecting "Go to Code". -This makes it easy to inspect and modify widget code directly from the visual layout editor. diff --git a/docs/workspace/properties-panel.md b/docs/workspace/properties-panel.md index ddc0141..9627b27 100644 --- a/docs/workspace/properties-panel.md +++ b/docs/workspace/properties-panel.md @@ -9,7 +9,7 @@ keywords: [properties panel, widget properties, property editing, flutter develo # Properties Panel -The Properties Panel is a sophisticated interface for editing widget properties in real-time, providing both visual and code-based editing capabilities with intelligent property type detection and specialized editors. +The Properties Panel allows you to edit widget properties in real-time, providing both easy-to-use visual editors and flexible code-based editing capabilities.

- -**Real-Time Property Editing**: The panel displays all properties of the currently selected widget and allows you to edit them with immediate visual feedback. Changes are applied instantly to your running app. - -**Intelligent Property Editors:** The system automatically detects property types and provides specialized editors: -- **Color Properties:** Color picker with hex input and visual color swatches -- **TextStyle Properties:** Rich text styling editor with font family, size, weight, and color options -- **Padding/Margin:** Visual padding editor with individual side controls -- **Border Radius:** Corner-specific radius controls with visual preview -- **Gradients:** Linear, radial, and sweep gradient editors with color stops -- **Borders:** Border style, width, and color controls -- **Images:** Asset and network image selectors -- **Icons:** Icon picker with search functionality -- **Alignment:** Visual alignment controls -- **Boolean Properties:** Toggle switches for true/false values -- **Enum Properties:** Dropdown menus for predefined options - - -This makes the Properties Panel a comprehensive tool for visual Flutter development, allowing you to modify any aspect of your UI without writing code manually. - :::tip[Quick Access from Widget Tree] -The Properties Panel can be quickly accessed by clicking any widget in the Widget Tree. The panel will automatically update to show the properties of the selected widget. +The Properties Panel can be quickly accessed by double clicking any widget in the Widget Tree. The panel will automatically update to show the properties of the selected widget. ::: +:::note[Switching to Code] +To switch from the visual property editor to a code-based property editor, hover near the property and click the "Switch to Code View" button. You can also cmd+click this button to jump to the specific line in the code editor where the property is defined. +::: -### Advanced Functionalities - -- **Property Search:** Search functionality to quickly find specific properties within complex widgets. -- **Add Property Button:** Add new properties to widgets that don't have them configured yet. -- **Grouped Properties:** For supported widgets (Container, Text, TextField), properties are organized into logical groups like "Layout", "Styling", "Behavior" for easier navigation. -- **Syntax Highlighting:** For complex expressions and function properties, the panel provides syntax-highlighted code editors. -- **CopyWith Support:** Automatically handles Flutter's copyWith pattern for updating nested properties like TextStyle sub-properties. - +## Ading Hidden Propertis +Some properties for widgets are hidden by default. However, any property that's accessible in the underlying widget can be set from the property panel. +If you are looking for a hidden property, you can search for it or add it using the "+ Add Property" button at the top of the Property panel. ## Modifiers - -Modifiers refer to wrapper widgets that can be added around existing Flutter widgets to modify their behavior, appearance, or layout. Think of them as "decorators" or "containers" that wrap around your base widgets. They are Flutter widgets that wrap around other widgets to modify their: +Modifiers refer to wrapper widgets that can be added around existing Flutter widgets to modify their behavior, appearance, or layout. Think of them as "decorators" that wrap around your base widgets. They are Flutter widgets that wrap around other widgets to modify their: - **Layout behavior** (positioning, sizing, constraints) - **Visual appearance** (colors, borders, shadows, opacity) - **Interactive behavior** (gestures, focus, accessibility) - **Animation properties** (transitions, transformations) - +:::note[Modifiers in the Widget Tree] +Modifier widgets are hidden from the "Simplified View" in the [widget tree](/workspace/widget-tree). +::: ### Adding a Modifier diff --git a/docs/workspace/workspace.md b/docs/workspace/workspace.md index 6f340ad..fc78945 100644 --- a/docs/workspace/workspace.md +++ b/docs/workspace/workspace.md @@ -9,25 +9,27 @@ keywords: [workspace, panels, modules panel, content panel, properties panel, ag # Workspace -The workspace is organized into several specialized panels that work together to provide a complete development experience. Each panel focuses on specific aspects of your project while maintaining seamless integration with the overall workflow. +The workspace is organized into panels that work together to provide a complete development experience. + +![workspace-overview](./imgs/workspace.avif) ## Core Panels - **Top Bar**: Central command center for project navigation, panel management, and deployment. Provides access to project settings, undo/redo functionality, panel visibility controls, and deployment actions. -- **[Modules Panel](modules-panel/widget-panel.md)**: Helps users access different functional areas of the platform. Includes Widget Tree (default navigation), Theme (styling), Assets (file management), Firebase (backend services), and Supabase (database integration). +- **[Modules Panel](modules-panel/widget-panel.md)**: Helps users access different functional areas of the platform. Includes Widget Tree (default navigation), Theme (styling), Assets (file management), Firebase (backend services), and Supabase (database integration). The module panel appears on the left side of the screen, and its content is managed through the left-side rail. -- **[Content Panel](../workspace/content-panel.md)**: Main workspace area that displays either the app preview or code editor depending on the selected mode. Features real-time app preview with device frame options, hot reload/restart controls, and integrated Monaco code editor with syntax highlighting. +- **[Content Panel](../workspace/content-panel.md)**: Main workspace area that displays either the app preview and/or code editor depending on the selected mode (preview, code or split). Features real-time app preview with device frame options, hot reload/restart controls, and integrated code editor with syntax highlighting and auto-complete. The content panel is in the center of the workspace. -- **[Properties Panel](../workspace/properties-panel.md)**: Comprehensive property editing interface for selected widgets. Provides intelligent property editors for colors, text styles, padding, borders, gradients, and more, with real-time visual feedback and specialized controls for different Flutter property types. +- **[Properties Panel](../workspace/properties-panel.md)**: Comprehensive property editing interface for selected widgets. Provides visual property editors for colors, text styles, padding, borders, gradients, and more. When you double click on a widget in the Widget Tree or the Preview, the Property Panel is automatically displayed to the right of the Content Panel. -- **[Agent Panel](../workspace/agent-panel.md)**: AI-powered development assistant that helps you build and modify your Flutter app through natural language conversations. Features streaming conversations, context management, screenshot integration, and support for multiple AI models. +- **[Agent Panel](../workspace/agent-panel.md)**: AI-powered development assistant that helps you build and modify your Flutter app through natural language conversations. Features streaming conversations, context management, screenshot integration, and support for multiple AI models. The agent panel is to the right of the workspace. - **Bottom Bar**: Provides essential project status and debugging tools: - **Refresh Dependencies**: Runs `flutter pub get` to update project packages - **Debug Console**: Toggle to view real-time app logs and debugging output - **App Status**: Live indicator showing if your app is running, loading, has errors, or is stopped - - **Analysis Issues**: Quick overview of errors, warnings, and info messages in your code + - **Analysis Issues**: Quick overview of errors, warnings, and info messages in your code (coming from the code analyzer) This integrated workspace approach eliminates the need to switch between different tools and provides a cohesive environment for building, testing, and deploying Flutter applications. \ No newline at end of file