feat: prompts list redesign with separate columns, bar sparklines, version/override display, breadcrumb fix

Author: ericallam

apps/webapp/app/presenters/v3/PromptPresenter.server.ts

@@ -82,6 +82,7 @@ export class PromptPresenter extends BasePresenter {
         tags: p.tags,
         defaultModel: effectiveModel,
         currentVersion: currentVersion ? { version: currentVersion.version } : null,
+        overrideVersion: overrideVersion ? { version: overrideVersion.version } : null,
         hasOverride,
         updatedAt: p.updatedAt,
       };

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx

@@ -69,7 +69,7 @@ import { MetricWidget } from "~/routes/resources.metric";
 import { InfoPanel } from "~/components/primitives/InfoPanel";
 import { InlineCode } from "~/components/code/InlineCode";
 import { TextLink } from "~/components/primitives/TextLink";
-import { EnvironmentParamSchema, v3RunSpanPath } from "~/utils/pathBuilder";
+import { EnvironmentParamSchema, v3PromptsPath, v3RunSpanPath } from "~/utils/pathBuilder";
 import { z } from "zod";
 
 const ParamSchema = EnvironmentParamSchema.extend({
@@ -434,6 +434,9 @@ export default function PromptDetailPage() {
     possibleOperations,
     possibleProviders,
   } = useTypedLoaderData<typeof loader>();
+  const organization = useOrganization();
+  const project = useProject();
+  const environment = useEnvironment();
   const fetcher = useFetcher();
   const { value: searchValue, replace: replaceSearch } = useSearchParams();
 
@@ -486,7 +489,7 @@ export default function PromptDetailPage() {
               </span>
             </div>
           }
-          backButton={{ to: "..", text: "Prompts" }}
+          backButton={{ to: v3PromptsPath(organization, project, environment), text: "Prompts" }}
         />
         <PageAccessories>
           <div className="flex items-center gap-2">

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts._index/route.tsx

@@ -1,11 +1,10 @@
 import { type MetaFunction } from "@remix-run/react";
 import { type LoaderFunctionArgs } from "@remix-run/server-runtime";
-import { Area, AreaChart, ResponsiveContainer } from "recharts";
+import { Bar, BarChart, ResponsiveContainer } from "recharts";
 import { typedjson, useTypedLoaderData } from "remix-typedjson";
 import { PromptsNone } from "~/components/BlankStatePanels";
 import { MainCenteredContainer, PageBody, PageContainer } from "~/components/layout/AppLayout";
 import { TruncatedCopyableValue } from "~/components/primitives/TruncatedCopyableValue";
-import { Badge } from "~/components/primitives/Badge";
 import { DateTime } from "~/components/primitives/DateTime";
 import { NavBar, PageTitle } from "~/components/primitives/PageHeader";
 import {
@@ -87,51 +86,57 @@ export default function PromptsPage() {
           <TableHeader>
             <TableRow>
               <TableHeaderCell>ID</TableHeaderCell>
-              <TableHeaderCell>Prompt</TableHeaderCell>
+              <TableHeaderCell>Slug</TableHeaderCell>
+              <TableHeaderCell>Description</TableHeaderCell>
               <TableHeaderCell>Model</TableHeaderCell>
-              <TableHeaderCell>Current</TableHeaderCell>
+              <TableHeaderCell>Version</TableHeaderCell>
               <TableHeaderCell>Usage (24h)</TableHeaderCell>
               <TableHeaderCell alignment="right">Last updated</TableHeaderCell>
             </TableRow>
           </TableHeader>
           <TableBody>
             {prompts.length === 0 ? (
-              <TableBlankRow colSpan={6}>No prompts found</TableBlankRow>
+              <TableBlankRow colSpan={7}>No prompts found</TableBlankRow>
             ) : (
               prompts.map((prompt) => {
                 const path = `${v3PromptsPath(organization, project, environment)}/${prompt.slug}`;
+                const activeVersion = prompt.overrideVersion ?? prompt.currentVersion;
+                const isOverride = !!prompt.overrideVersion;
 
                 return (
                   <TableRow key={prompt.id}>
                     <TableCell to={path} isTabbableCell>
                       <TruncatedCopyableValue value={prompt.friendlyId} />
                     </TableCell>
                     <TableCell to={path}>
-                      <div className="flex flex-col">
-                        <div className="flex items-center gap-1.5">
-                          <span className="text-text-bright">{prompt.slug}</span>
-                          {prompt.hasOverride && (
-                            <Badge variant="extra-small" className="border-amber-500/30 text-amber-400">
-                              override
-                            </Badge>
-                          )}
-                        </div>
-                        {prompt.description && (
-                          <span className="text-xs text-text-dimmed">{prompt.description}</span>
-                        )}
-                      </div>
+                      <span className="text-text-bright">{prompt.slug}</span>
+                    </TableCell>
+                    <TableCell to={path}>
+                      {prompt.description ? (
+                        <span className="text-text-dimmed" title={prompt.description.length > 80 ? prompt.description : undefined}>
+                          {prompt.description.length > 80
+                            ? prompt.description.slice(0, 80) + "..."
+                            : prompt.description}
+                        </span>
+                      ) : (
+                        <span className="text-charcoal-500">-</span>
+                      )}
                     </TableCell>
                     <TableCell to={path}>
                       <span className="text-text-dimmed">
                         {prompt.defaultModel ?? <span className="text-charcoal-500">-</span>}
                       </span>
                     </TableCell>
                     <TableCell to={path}>
-                      {prompt.currentVersion ? (
+                      {activeVersion ? (
                         <div className="flex items-center gap-1.5">
-                          <div className="size-1.5 rounded-full bg-green-500" />
+                          <div
+                            className={`size-1.5 rounded-full ${
+                              isOverride ? "bg-amber-400" : "bg-green-500"
+                            }`}
+                          />
                           <span className="text-text-bright">
-                            v{prompt.currentVersion.version}
+                            v{activeVersion.version}
                           </span>
                         </div>
                       ) : (
@@ -167,22 +172,14 @@ function UsageSparkline({ data }: { data?: number[] }) {
     <div className="flex items-center gap-2">
       <div className="h-6 w-16">
         <ResponsiveContainer width="100%" height="100%">
-          <AreaChart data={chartData} margin={{ top: 1, right: 0, bottom: 1, left: 0 }}>
-            <defs>
-              <linearGradient id="sparkFill" x1="0" y1="0" x2="0" y2="1">
-                <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.3} />
-                <stop offset="100%" stopColor="#3b82f6" stopOpacity={0} />
-              </linearGradient>
-            </defs>
-            <Area
-              type="monotone"
+          <BarChart data={chartData} margin={{ top: 1, right: 0, bottom: 1, left: 0 }}>
+            <Bar
               dataKey="value"
-              stroke="#3b82f6"
-              strokeWidth={1.5}
-              fill="url(#sparkFill)"
+              fill="#3b82f6"
+              radius={[1, 1, 0, 0]}
               isAnimationActive={false}
             />
-          </AreaChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
       <span className="text-xs tabular-nums text-text-dimmed">{total.toLocaleString()}</span>