Skip to content

XS⚠️ ◾ feat: Add context descriptions and source badges to prompt selection screen #773

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
tomek-i merged 4 commits into from
Mar 12, 2026
Merged

XS⚠️ ◾ feat: Add context descriptions and source badges to prompt selection screen #773

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5065ea8
Initial plan
Copilot Mar 12, 2026
b8a551b
feat: add context descriptions to prompt selection screen
Copilot Mar 12, 2026
3a1d6c1
Apply suggestions from code review
tomek-i Mar 12, 2026
b1fa26e
Update PromptSelectionDialog.tsx
Username-must-be-unique Mar 12, 2026
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
3 changes: 2 additions & 1 deletion src/ui/src/components/settings/custom-prompt/CustomPromptManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,7 +231,8 @@ export function CustomPromptSettingsPanel({
<header className="flex flex-col gap-1">
<h2 className="text-xl font-semibold">Custom Prompt Manager</h2>
<p className="text-muted-foreground text-sm">
Manage your saved prompts and choose which one YakShaver should use.
Manage your prompt templates. The active prompt is the default template YakShaver uses
when writing issues from your recordings.
</p>
</header>
<ScrollArea className="flex-1">
Expand Down
48 changes: 28 additions & 20 deletions src/ui/src/components/workflow/PromptSelectionDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
AlertDialogHeader,
AlertDialogTitle,
} from "../ui/alert-dialog";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { ScrollArea } from "../ui/scroll-area";
Expand Down Expand Up @@ -131,20 +132,21 @@ export function PromptSelectionDialog({
{view === "confirm" ? (
<>
<AlertDialogHeader>
<AlertDialogTitle>Confirm Project Prompt Selection</AlertDialogTitle>
<AlertDialogTitle>Confirm Prompt Selection</AlertDialogTitle>
<AlertDialogDescription>
YakShaver has selected a Project prompt for this video. Do you want to proceed with
this prompt?
YakShaver analysed your video and selected the most relevant prompt template below.
Prompts control how your issue is written — confirm to proceed, or switch to a
different one.
</AlertDialogDescription>
</AlertDialogHeader>

<div className="bg-secondary/20 p-4 rounded-md space-y-2 mt-2">
<h3 className="font-medium text-lg text-primary">
{initialProject.name}{" "}
<span className="text-secondary-foreground/60 text-sm font-normal">
({initialProject.source === "local" ? "local prompt" : "portal prompt"})
</span>
</h3>
<div className="flex items-center gap-2 flex-wrap">
<h3 className="font-medium text-lg text-primary">{initialProject.name}</h3>
<Badge variant="outline">
{initialProject.source === "local" ? "local" : "portal"}
</Badge>
</div>
{initialProject.description && (
<p className="text-sm text-muted-foreground">{initialProject.description}</p>
)}
Expand Down Expand Up @@ -194,9 +196,14 @@ export function PromptSelectionDialog({
) : (
<>
<AlertDialogHeader>
<AlertDialogTitle>Select a Prompt for your project</AlertDialogTitle>
<AlertDialogTitle>Select a Prompt</AlertDialogTitle>
<AlertDialogDescription>
Search and select the correct prompt for this video.
Prompts are templates that control how YakShaver writes your issue. Select the one
that best fits your project.{" "}
<span className="text-foreground/60">
Local prompts are saved on your device; portal prompts are synced from YakShaver
Portal.
</span>
</AlertDialogDescription>
</AlertDialogHeader>

Expand Down Expand Up @@ -230,17 +237,18 @@ export function PromptSelectionDialog({
}`}
onClick={() => setTempSelectedProjectId(project.id)}
>
<div className="font-medium">
{project.name}{" "}
<span
className={`text-xs font-normal ${
<div className="flex items-center gap-2 flex-wrap">
<span className="font-medium">{project.name}</span>
<Badge
variant="outline"
className={
tempSelectedProjectId === project.id
? "text-primary-foreground/80"
: "text-muted-foreground"
}`}
? "border-primary-foreground/40 text-primary-foreground/80"
: undefined
}
>
({project.source === "local" ? "local prompt" : "portal prompt"})
</span>
{project.source === "local" ? "local" : "portal"}
</Badge>
</div>
{project.description && (
<div
Expand Down
Loading