User Interface Guide

OutcomeDev is designed to be intuitive, but it packs a lot of power. Here is a comprehensive tour of the interface.

The Header

The header is your command center for navigation and context.

• Repo Selector: Shows which project you are currently working on. Click it to switch projects or search for a new one.
• Menu (Hamburger Icon): Opens the sidebar for quick access to Tasks, Docs, and Settings.
• User Avatar: Your profile menu.
  • Theme: Toggle between Light, Dark, System, or specialized themes like Matrix, Neon, and Sapphire.
  • Sign Out: Log out of your session.

The Task Form

This is where you articulate your intent.

• Prompt Area: The input field says "Describe the outcome, artifacts, and constraints". This is your guide to writing a good prompt.
  • Outcome: What is the final result? (e.g., "A personal blog")
  • Artifacts: What specific things do you need? (e.g., "A Next.js app, a Markdown processing script, and a dark mode toggle")
  • Constraints: What are the limits? (e.g., "Must use Tailwind CSS, no external UI libraries")
• Agent Selector: Choose the "Brain" for the task (Claude, GPT-5, Gemini).
• Model Selector: Pick specific versions (e.g., Sonnet 3.5 vs Opus 4.5).
• Options (Gear Icon):
  • Install Dependencies: Uncheck if you want a faster start and don't need new packages.
  • Max Duration: Set a time limit for the agent.
• MCP (Plug Icon): Connect external tools like databases or web search.

The Task Workspace (Sandbox)

When you create a task, you enter the Task Workspace. This is a secure, isolated environment (Sandbox) where the agent works. It has four main tabs:

1. Chat

This is your command line to the agent.

• Iterate: If the result isn't perfect, tell the agent. "Make the button blue" or "Fix the mobile responsiveness."
• Context: The agent remembers the history of the task. You don't need to repeat yourself.
• Action Items: The agent will tell you what it's doing (e.g., "I am creating the components/navbar.tsx file").

2. Preview

A live, interactive window into your application.

• Real-time Updates: As the agent writes code, the preview refreshes automatically.
• Interactive: You can click buttons, type in forms, and test the app just like a user would.
• Address Bar: Shows the current path (e.g., /dashboard). You can navigate manually if needed.
• Open in New Tab: If the preview feels cramped, click the "External Link" icon to open the app in a full browser tab.

3. Code

Transparency is key. This tab shows you exactly what changed.

• File Tree: Navigate through the project structure.
• Diff View: See the "Before" and "After" side-by-side. Green lines are additions; red lines are deletions.
• Verify: Use this to ensure the agent isn't deleting important logic or introducing bad practices.

4. Terminal & Logs

Monitor the heartbeat of the sandbox.

• Build Logs: See the output of npm install, npm run dev, and other commands.
• Errors: If the preview is broken, check here. You'll often see syntax errors or missing dependency warnings.
• Agent Commands: Watch the specific shell commands the agent executes.
• Restart Server: If the app gets stuck, you can use the "Restart Dev Server" option in the actions menu to reboot the environment.

Profile & Settings

Click your Avatar in the top right.

• API Keys: Some agents (like OpenAI) may require you to bring your own API key. Enter them here securely. Keys are stored locally or encrypted.
• Theme Preferences: Customize the look of OutcomeDev. Choose from Light, Dark, or explore our new creative themes (Matrix, Neon, Sapphire) in the settings.