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.

• Workspace Pill (GitHub): This is where you pick the “scope” you’re working in (which GitHub account/org and which repo).
  • Owner / Org Selector: The left dropdown shows your GitHub user and any organizations you have access to. Switching this changes which repos are available.
  • Repo Selector: The repo dropdown opens a fast, full-screen picker so you can search and switch repos quickly. If a repo is private, you’ll see a lock icon.
  • Repo Workspace Actions (⋯): The three-dot menu contains repo/workspace actions like creating a new repo, opening a repo by URL, refreshing owners/repos, and managing GitHub access. These are intentionally separate from your account settings.
• Menu (Hamburger Icon): Opens the sidebar for quick access to Tasks, Docs, and Settings.
• User Avatar: Your account/profile menu (billing, top ups, sign out, etc). This is “you”, not GitHub.
  • Theme: Toggle between Light, Dark, System, or specialized themes like Matrix, Neon, and Sapphire.
  • Sign Out: Log out of your session.

On mobile, these controls collapse to keep the header compact while staying one-tap accessible.

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").
• Why there are sub-tabs: Chat is the “conversation stream”, but real work also has external signals (PR feedback, CI results, preview links).
  • Comments: Shows GitHub pull request comments for this task (appears once a PR exists).
  • Checks: Shows GitHub Checks (CI status) for this task’s branch (appears once a branch exists).
  • Deployments: Shows the latest preview deployment link when available (for example, a Vercel Preview URL).

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.