Skip to content

feat(wireframes): align free-mode pages with app baseline #329

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
timini merged 1 commit into from
Feb 23, 2026
Merged

feat(wireframes): align free-mode pages with app baseline #329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
389 changes: 199 additions & 190 deletions packages/wireframes/app/config/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

593 changes: 254 additions & 339 deletions packages/wireframes/app/ensemble/page.tsx
View file
Open in desktop

Large diffs are not rendered by default.

33 changes: 19 additions & 14 deletions packages/wireframes/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,40 @@
import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import type { Metadata } from "next"
import localFont from "next/font/local"
import "./globals.css"
import { EnsembleHeader } from "@/components/ensemble-header"
import { Footer } from "@/components/footer"

const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
})

const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
})

export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
title: "Ensemble AI Wireframes",
description: "Wireframes for Ensemble AI free-mode and pro-mode planning",
}

export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
children: React.ReactNode
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<body className={`${geistSans.variable} ${geistMono.variable} bg-background text-foreground antialiased`}>
<div className="flex min-h-screen flex-col">
<EnsembleHeader />
<main className="flex-1">{children}</main>
<Footer />
</div>
</body>
</html>
);
)
}
132 changes: 59 additions & 73 deletions packages/wireframes/app/prompt/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,80 +7,44 @@ import { Card, CardContent } from "@/components/ui/card"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { ProgressSteps } from "@/components/progress-steps"
import { EnsembleHeader } from "@/components/ensemble-header"

const selectedModels = ["gpt-4o", "gpt-4o-mini"]
const summarizerModel = "gpt-4o"

export default function PromptPage() {
const router = useRouter()
const [prompt, setPrompt] = useState("")

// Mock data - in a real app this would come from state management
const selectedModels = ["claude-3-haiku-20240307", "claude-3-opus-20240229"]
const summarizerModel = "claude-3-opus-20240229"

return (
<div className="min-h-screen bg-gray-50">
<EnsembleHeader />

<div className="max-w-4xl mx-auto px-6 py-8">
<ProgressSteps currentStep="prompt" />
<div className="container mx-auto max-w-6xl px-4 py-8">
<ProgressSteps currentStep="prompt" />

<div className="text-center mb-8">
<h2 className="text-3xl font-bold text-gray-900 mb-4">Create Your Prompt</h2>
<p className="text-gray-600">Enter the question or brief you want to send to every model in your ensemble.</p>
</div>
<div className="text-center">
<h2 className="text-3xl font-bold tracking-tight">Enter Your Prompt</h2>
<p className="mx-auto mt-3 max-w-3xl text-muted-foreground">Describe what you want the AI models to do.</p>
</div>

{/* Ensemble Configuration Summary */}
<Card className="mb-8">
<div className="mt-8 space-y-8">
<Card>
<CardContent className="p-6">
<h3 className="font-semibold mb-4">Your Ensemble Configuration</h3>
<p className="text-sm text-gray-600 mb-4">
These models will receive the prompt and contribute to the comparison.
</p>

<div className="flex items-center justify-between">
<div>
<h4 className="font-medium text-sm mb-2">Selected Models ({selectedModels.length})</h4>
<div className="flex flex-wrap gap-2">
{selectedModels.map((model, index) => (
<Badge key={index} variant="outline" className="bg-gray-50">
{model}
</Badge>
))}
</div>
</div>

<div>
<h4 className="font-medium text-sm mb-2">Summarizer</h4>
<Badge className="bg-blue-100 text-blue-800 border-blue-200">{summarizerModel}</Badge>
</div>
<div className="mb-4 flex items-center justify-between">
<h3 className="text-lg font-semibold">Your Prompt</h3>
<span className="text-sm text-muted-foreground">Press Cmd+Enter to submit</span>
</div>
<Textarea
value={prompt}
onChange={(event) => setPrompt(event.target.value)}
placeholder="Enter your prompt here..."
className="min-h-[220px]"
/>
</CardContent>
</Card>

{/* Prompt Input */}
<div className="mb-8">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold">Enter Your Prompt</h3>
<span className="text-sm text-gray-500">⌘+Enter to submit</span>
</div>

<Textarea
placeholder="Enter your prompt here... For example: 'Explain quantum computing in simple terms' or 'Write a short story about a robot learning to paint'"
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
className="min-h-[200px] text-base"
/>
</div>

{/* Tips */}
<Card className="mb-8 bg-blue-50 border-blue-200">
<Card className="border-primary/20 bg-primary/10">
<CardContent className="p-6">
<h3 className="font-semibold mb-4 text-blue-900">Tips for better prompts</h3>
<p className="text-sm text-blue-800 mb-4">
Small adjustments often lead to noticeably more aligned outputs.
</p>

<ul className="space-y-2 text-sm text-blue-800">
<h3 className="text-lg font-semibold text-primary">Tips for better prompts</h3>
<p className="mt-2 text-sm text-primary/80">Small adjustments often lead to noticeably more aligned outputs.</p>
<ul className="mt-4 list-disc space-y-2 pl-5 text-sm text-primary/80">
<li>
<strong>Be specific and clear about the desired outcome.</strong>
</li>
Expand All @@ -97,19 +61,41 @@ export default function PromptPage() {
</CardContent>
</Card>

{/* Navigation */}
<div className="flex justify-between">
<Button variant="outline" onClick={() => router.push("/ensemble")}>
Back to Model Selection
</Button>
<Button
className="bg-blue-600 hover:bg-blue-700"
onClick={() => router.push("/review")}
disabled={!prompt.trim()}
>
Generate Responses
</Button>
</div>
<Card>
<CardContent className="p-6">
<h3 className="text-lg font-semibold">Your Ensemble Configuration</h3>
<p className="mt-2 text-sm text-muted-foreground">
These models will receive the prompt and contribute to the comparison.
</p>

<div className="mt-6 flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
<div>
<h4 className="mb-2 text-sm font-semibold">Selected Models ({selectedModels.length})</h4>
<div className="flex flex-wrap gap-2">
{selectedModels.map((model) => (
<Badge key={model} variant="outline" className="bg-muted">
{model}
</Badge>
))}
</div>
</div>

<div>
<h4 className="mb-2 text-sm font-semibold">Summarizer</h4>
<Badge className="border-primary/30 bg-primary/10 text-primary">{summarizerModel}</Badge>
</div>
</div>
</CardContent>
</Card>
</div>

<div className="mt-12 flex items-center justify-between">
<Button variant="outline" onClick={() => router.push("/ensemble")}>
Back
</Button>
<Button disabled={!prompt.trim()} onClick={() => router.push("/review")}>
Generate Responses
</Button>
</div>
</div>
)
Expand Down
Loading
Loading