Skip to content

Commit 62c6829

Browse files
tianzhouclaude
tianzhou
and
claude
committed
feat(website): add Human/Agent tabs to hero demo
Add a segmented control below the install commands that toggles the hero demo between the SQL editor screenshot (Human) and an MCP tool-call transcript (Agent), linking IAM and audit log to their docs pages. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
1 parent 8fb4575 commit 62c6829

4 files changed

Lines changed: 168 additions & 9 deletions

File tree

‎website/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ node_modules/
22
.next/
33
.DS_Store
44
next-env.d.ts
5+
*.tsbuildinfo

‎website/src/app/page.tsx‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { HeroDemo } from '@/components/elements/hero-demo'
12
import { InstallCommand } from '@/components/elements/install-command'
23
import { Link } from '@/components/elements/link'
34
import { Main } from '@/components/elements/main'
@@ -37,15 +38,7 @@ export default function Page() {
3738
<InstallCommand className="min-w-xs" snippet="docker run -p 9876:9876 pgplex/pgconsole" />
3839
</div>
3940
}
40-
demo={
41-
<img
42-
src="/sql-editor-overview.webp"
43-
alt="pgconsole SQL editor"
44-
className="rounded-lg ring-1 ring-black/10"
45-
width={2880}
46-
height={1800}
47-
/>
48-
}
41+
demo={<HeroDemo />}
4942
/>
5043

5144
{/* Features */}

‎website/src/components/elements/hero-demo.tsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { ElTabGroup, ElTabList, ElTabPanels } from '@tailwindplus/elements/react'
2+
import { CheckmarkIcon } from '../icons/checkmark-icon'
3+
import { RobotIcon } from '../icons/robot-icon'
4+
import { ShieldExclamationIcon } from '../icons/shield-exclamation-icon'
5+
import { TerminalIcon } from '../icons/terminal-icon'
6+
import { User2Icon } from '../icons/user-2-icon'
7+
8+
const tabClassName =
9+
'flex items-center gap-2 rounded-full px-4 py-1 text-mist-600 transition aria-selected:bg-white aria-selected:text-mist-950 aria-selected:shadow-sm dark:text-mist-400 dark:aria-selected:bg-white/15 dark:aria-selected:text-white'
10+
11+
export function HeroDemo() {
12+
return (
13+
<ElTabGroup className="flex w-full flex-col items-center gap-8">
14+
<ElTabList className="inline-flex items-center gap-1 rounded-full bg-mist-950/5 p-1 text-sm/7 font-medium inset-ring-1 inset-ring-black/5 dark:bg-white/5 dark:inset-ring-white/10">
15+
<button type="button" className={tabClassName}>
16+
<User2Icon className="size-4" /> Human
17+
</button>
18+
<button type="button" className={tabClassName}>
19+
<RobotIcon className="size-4" /> Agent
20+
</button>
21+
</ElTabList>
22+
23+
<ElTabPanels className="w-full">
24+
<div>
25+
<img
26+
src="/sql-editor-overview.webp"
27+
alt="pgconsole SQL editor"
28+
className="rounded-lg ring-1 ring-black/10"
29+
width={2880}
30+
height={1800}
31+
/>
32+
</div>
33+
<div hidden>
34+
<AgentDemo />
35+
</div>
36+
</ElTabPanels>
37+
</ElTabGroup>
38+
)
39+
}
40+
41+
function AgentDemo() {
42+
return (
43+
<div className="overflow-hidden rounded-lg bg-white text-left ring-1 ring-black/10 dark:bg-mist-900 dark:ring-white/10">
44+
{/* Window chrome */}
45+
<div className="flex items-center gap-2 border-b border-black/5 px-4 py-3 text-sm/6 dark:border-white/10">
46+
<TerminalIcon className="size-4 text-mist-500" />
47+
<span className="font-medium text-mist-950 dark:text-white">pgconsole MCP server</span>
48+
<span className="ml-auto flex items-center gap-1.5 text-mist-500">
49+
<span className="size-1.5 rounded-full bg-[#0A64C8]" />
50+
connected
51+
</span>
52+
</div>
53+
54+
<div className="grid lg:grid-cols-5">
55+
{/* Conversation */}
56+
<div className="flex flex-col gap-5 border-b border-black/5 p-5 lg:col-span-2 lg:border-r lg:border-b-0 dark:border-white/10">
57+
<div className="flex items-start gap-3">
58+
<span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-mist-950/5 text-mist-600 dark:bg-white/10 dark:text-mist-300">
59+
<User2Icon className="size-3.5" />
60+
</span>
61+
<p className="text-sm/6 text-mist-950 dark:text-white">
62+
Which orders are stuck in processing this week?
63+
</p>
64+
</div>
65+
<div className="flex items-start gap-3">
66+
<span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-mist-950 text-white dark:bg-white dark:text-mist-950">
67+
<RobotIcon className="size-3.5" />
68+
</span>
69+
<p className="text-sm/6 text-mist-600 dark:text-mist-300">
70+
I queried the <span className="font-medium text-mist-950 dark:text-white">prod-analytics</span>{' '}
71+
connection through pgconsole. 142 orders have been in <code className="rounded bg-mist-950/5 px-1 py-0.5 font-mono text-xs text-mist-950 dark:bg-white/10 dark:text-white">processing</code>{' '}
72+
for over 24h — all from the EU region.
73+
</p>
74+
</div>
75+
</div>
76+
77+
{/* MCP tool calls */}
78+
<div className="flex flex-col gap-3 p-5 font-mono text-xs/5 lg:col-span-3">
79+
<ToolCall name="list_connections" args="" result="prod-analytics · read, explain" />
80+
<ToolCall name="list_objects" args='schema: "public"' result="orders, customers, shipments" />
81+
<ToolCall name="describe_table" args='table: "public.orders"' result="14 columns · status, region, created_at" />
82+
<ToolCall
83+
name="query"
84+
args="SELECT count(*) … WHERE status = 'processing'"
85+
result="142 rows · capped at 1,000"
86+
/>
87+
</div>
88+
</div>
89+
90+
{/* Governance footer */}
91+
<div className="flex items-center gap-2 border-t border-black/5 px-5 py-3 text-xs/5 text-mist-500 dark:border-white/10">
92+
<ShieldExclamationIcon className="size-4 shrink-0" />
93+
<span>
94+
Every tool call runs through the same{' '}
95+
<a
96+
href="https://docs.pgconsole.com/features/database-access-control"
97+
target="_blank"
98+
className="text-mist-700 underline underline-offset-2 hover:text-mist-950 dark:text-mist-300 dark:hover:text-white"
99+
>
100+
IAM permissions
101+
</a>{' '}
102+
and{' '}
103+
<a
104+
href="https://docs.pgconsole.com/features/audit-log"
105+
target="_blank"
106+
className="text-mist-700 underline underline-offset-2 hover:text-mist-950 dark:text-mist-300 dark:hover:text-white"
107+
>
108+
audit log
109+
</a>{' '}
110+
as the console.
111+
</span>
112+
</div>
113+
</div>
114+
)
115+
}
116+
117+
function ToolCall({ name, args, result }: { name: string; args: string; result: string }) {
118+
return (
119+
<div className="flex items-start gap-2">
120+
<CheckmarkIcon className="mt-0.5 size-3.5 shrink-0 text-mist-400" />
121+
<div className="min-w-0">
122+
<span className="text-mist-950 dark:text-white">{name}</span>
123+
{args && <span className="text-mist-500">({args})</span>}
124+
<div className="truncate text-mist-500">→ {result}</div>
125+
</div>
126+
</div>
127+
)
128+
}

‎website/src/components/icons/robot-icon.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { clsx } from 'clsx/lite'
2+
import type { ComponentProps } from 'react'
3+
4+
export function RobotIcon({ className, ...props }: ComponentProps<'svg'>) {
5+
return (
6+
<svg
7+
width={13}
8+
height={13}
9+
viewBox="0 0 13 13"
10+
fill="none"
11+
strokeWidth={1}
12+
role="image"
13+
className={clsx('inline-block', className)}
14+
{...props}
15+
>
16+
<path d="M6.5 1.7V2.7" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
17+
<circle cx="6.5" cy="0.9" r="0.8" fill="currentColor" fillOpacity="0.2" stroke="currentColor" />
18+
<rect
19+
x="2"
20+
y="2.7"
21+
width="9"
22+
height="8"
23+
rx="1.8"
24+
fill="currentColor"
25+
fillOpacity="0.2"
26+
stroke="currentColor"
27+
strokeLinecap="round"
28+
strokeLinejoin="round"
29+
/>
30+
<path d="M2 6H1V7.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
31+
<path d="M11 6H12V7.5" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
32+
<circle cx="4.8" cy="5.9" r="0.7" fill="currentColor" />
33+
<circle cx="8.2" cy="5.9" r="0.7" fill="currentColor" />
34+
<path d="M4.8 8.4H8.2" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" />
35+
</svg>
36+
)
37+
}

0 commit comments

Comments
 (0)