@burdenoff/microfe-vibecontrols 2026.624.3 → 2026.625.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/components/shared/Card.js +3 -3
  2. package/dist/components/shared/Card.js.map +1 -1
  3. package/dist/components/shared/StatCard.js +29 -22
  4. package/dist/components/shared/StatCard.js.map +1 -1
  5. package/dist/pages/ActionsPage.js +131 -134
  6. package/dist/pages/ActionsPage.js.map +1 -1
  7. package/dist/pages/AnalyticsPage.js +79 -77
  8. package/dist/pages/AnalyticsPage.js.map +1 -1
  9. package/dist/pages/CatalogPage.js +120 -122
  10. package/dist/pages/CatalogPage.js.map +1 -1
  11. package/dist/pages/ComponentsPage.js +67 -69
  12. package/dist/pages/ComponentsPage.js.map +1 -1
  13. package/dist/pages/GettingStartedPage.js +104 -99
  14. package/dist/pages/GettingStartedPage.js.map +1 -1
  15. package/dist/pages/HealthPage.js +91 -91
  16. package/dist/pages/HealthPage.js.map +1 -1
  17. package/dist/pages/OverviewPage.js +80 -79
  18. package/dist/pages/OverviewPage.js.map +1 -1
  19. package/dist/pages/SettingsPage.js +57 -58
  20. package/dist/pages/SettingsPage.js.map +1 -1
  21. package/dist/pages/VibesPage.js +180 -181
  22. package/dist/pages/VibesPage.js.map +1 -1
  23. package/dist/pages/WebhooksPage.js +329 -330
  24. package/dist/pages/WebhooksPage.js.map +1 -1
  25. package/package.json +2 -2
package/dist/pages/GettingStartedPage.js CHANGED
@@ -7,45 +7,46 @@ import { useI18n as o } from "@burdenoff/fe-libs/shared/providers/shell/I18nProv
7
7
  import { Download as s, ExternalLink as c, Info as l, Terminal as u } from "lucide-react";
8
8
  import { useSearchParams as d } from "react-router-dom";
9
9
  import { jsx as f, jsxs as p } from "react/jsx-runtime";
10
- import { Tabs as m } from "@burdenoff/fe-libs/chrome";
11
- import { MotionItem as h, MotionList as g, MotionPage as _ } from "@burdenoff/fe-libs/shared/motion";
10
+ import { EmphasisPanel as m, ShowMore as h } from "@burdenoff/fe-libs/ui";
11
+ import { Tabs as g } from "@burdenoff/fe-libs/chrome";
12
+ import { MotionItem as _, MotionList as v, MotionPage as y } from "@burdenoff/fe-libs/shared/motion";
12
13
  //#region src/pages/GettingStartedPage.tsx
13
- var v = "https://www.npmjs.com/package/@vibecontrols/agent", y = "https://docs.vibecontrols.com/users/installing-the-agent";
14
- function b() {
15
- let { t: b } = o(), x = r((e, t) => {
16
- let n = b(e);
14
+ var b = "https://www.npmjs.com/package/@vibecontrols/agent", x = "https://docs.vibecontrols.com/users/installing-the-agent";
15
+ function S() {
16
+ let { t: S } = o(), C = r((e, t) => {
17
+ let n = S(e);
17
18
  return n === e ? t : n;
18
- }, [b]), [S, C] = d(), w = i(() => [{
19
+ }, [S]), [w, T] = d(), E = i(() => [{
19
20
  id: "install",
20
- label: x("gettingStarted.installTab", "Install")
21
+ label: C("gettingStarted.installTab", "Install")
21
22
  }, {
22
23
  id: "cli",
23
- label: x("gettingStarted.cliTab", "CLI Reference")
24
- }], [x]), T = S.get("tab") ?? w[0].id, E = (e) => {
25
- let t = new URLSearchParams(S);
26
- e === w[0].id ? t.delete("tab") : t.set("tab", e), C(t, { replace: !0 });
27
- }, [D, O] = a("");
28
- return /* @__PURE__ */ p(_, {
24
+ label: C("gettingStarted.cliTab", "CLI Reference")
25
+ }], [C]), D = w.get("tab") ?? E[0].id, O = (e) => {
26
+ let t = new URLSearchParams(w);
27
+ e === E[0].id ? t.delete("tab") : t.set("tab", e), T(t, { replace: !0 });
28
+ }, [k, A] = a("");
29
+ return /* @__PURE__ */ p(y, {
29
30
  className: "space-y-8 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen",
30
31
  children: [
31
32
  /* @__PURE__ */ f(e, {
32
- title: x("gettingStarted.title", "Getting Started"),
33
- description: x("gettingStarted.description", "Install and configure the VibeControls Agent CLI")
33
+ title: C("gettingStarted.title", "Getting Started"),
34
+ description: C("gettingStarted.description", "Install and configure the VibeControls Agent CLI")
34
35
  }),
35
36
  /* @__PURE__ */ f("div", {
36
37
  className: "border-b border-border-subtle",
37
- children: /* @__PURE__ */ f(m, {
38
- items: w,
39
- activeTabId: T,
40
- onTabChange: E,
38
+ children: /* @__PURE__ */ f(g, {
39
+ items: E,
40
+ activeTabId: D,
41
+ onTabChange: O,
41
42
  variant: "underline"
42
43
  })
43
44
  }),
44
- T === "install" && /* @__PURE__ */ p("div", {
45
+ D === "install" && /* @__PURE__ */ p("div", {
45
46
  className: "space-y-6",
46
47
  children: [
47
- /* @__PURE__ */ f("div", {
48
- className: "relative border border-border-subtle bg-bg-elevated rounded-card p-6 sm:p-8 shadow-elevation-1",
48
+ /* @__PURE__ */ f(m, {
49
+ className: "sm:p-8",
49
50
  children: /* @__PURE__ */ p("div", {
50
51
  className: "flex items-start gap-4",
51
52
  children: [/* @__PURE__ */ f("div", {
@@ -56,18 +57,18 @@ function b() {
56
57
  children: [
57
58
  /* @__PURE__ */ f("h2", {
58
59
  className: "text-lg sm:text-xl font-semibold text-text-primary mb-1",
59
- children: x("gettingStarted.installAgent", "Install the Agent")
60
+ children: C("gettingStarted.installAgent", "Install the Agent")
60
61
  }),
61
62
  /* @__PURE__ */ f("p", {
62
63
  className: "text-sm text-text-secondary",
63
- children: x("gettingStarted.installAgentDesc", "Install the agent globally with bun or npm on the machine you want to manage, then run vibe start. Bun (or Node >= 18 for npm) is the only prerequisite.")
64
+ children: C("gettingStarted.installAgentDesc", "Install the agent globally with bun or npm on the machine you want to manage, then run vibe start. Bun (or Node >= 18 for npm) is the only prerequisite.")
64
65
  }),
65
66
  /* @__PURE__ */ p("a", {
66
- href: y,
67
+ href: x,
67
68
  target: "_blank",
68
69
  rel: "noopener noreferrer",
69
70
  className: "mt-3 inline-flex items-center gap-1.5 text-sm text-text-link hover:text-text-linkHover hover:underline",
70
- children: [x("gettingStarted.viewInstallDocs", "View the full install docs"), /* @__PURE__ */ f(c, { className: "size-3.5" })]
71
+ children: [C("gettingStarted.viewInstallDocs", "View the full install docs"), /* @__PURE__ */ f(c, { className: "size-3.5" })]
71
72
  })
72
73
  ]
73
74
  })]
@@ -77,7 +78,7 @@ function b() {
77
78
  padding: "none",
78
79
  children: /* @__PURE__ */ p("div", {
79
80
  className: "p-5 sm:p-6",
80
- children: [/* @__PURE__ */ f(n, { pinnedAgentVersion: D || void 0 }), /* @__PURE__ */ p("div", {
81
+ children: [/* @__PURE__ */ f(n, { pinnedAgentVersion: k || void 0 }), /* @__PURE__ */ p("div", {
81
82
  className: "mt-6 pt-4 border-t border-border-subtle",
82
83
  children: [/* @__PURE__ */ p("label", {
83
84
  htmlFor: "pinned-version",
@@ -85,15 +86,15 @@ function b() {
85
86
  children: [
86
87
  /* @__PURE__ */ f(l, { className: "size-3.5" }),
87
88
  " ",
88
- x("gettingStarted.pinVersion", "Pin a specific agent version (optional)")
89
+ C("gettingStarted.pinVersion", "Pin a specific agent version (optional)")
89
90
  ]
90
91
  }), /* @__PURE__ */ f("input", {
91
92
  "aria-label": "pinned-version",
92
93
  id: "pinned-version",
93
94
  type: "text",
94
- placeholder: x("gettingStarted.pinVersionPlaceholder", "e.g. 2026.408.1 (leave blank for latest)"),
95
- value: D,
96
- onChange: (e) => O(e.target.value),
95
+ placeholder: C("gettingStarted.pinVersionPlaceholder", "e.g. 2026.408.1 (leave blank for latest)"),
96
+ value: k,
97
+ onChange: (e) => A(e.target.value),
97
98
  className: "w-full max-w-xs px-3 py-2 rounded-input border border-border-default bg-bg-elevated text-sm text-text-primary focus-visible:outline-none focus-visible:border-border-strong focus-visible:shadow-[var(--shadow-focus)]"
98
99
  })]
99
100
  })]
@@ -106,57 +107,57 @@ function b() {
106
107
  children: [
107
108
  /* @__PURE__ */ f("h3", {
108
109
  className: "text-base font-semibold text-text-primary mb-3",
109
- children: x("gettingStarted.nextSteps", "Next steps")
110
+ children: C("gettingStarted.nextSteps", "Next steps")
110
111
  }),
111
112
  /* @__PURE__ */ p("ol", {
112
113
  className: "list-decimal list-inside space-y-2 text-sm text-text-secondary",
113
114
  children: [
114
115
  /* @__PURE__ */ p("li", { children: [
115
- x("gettingStarted.nextStep1Prefix", "Start the agent:"),
116
+ C("gettingStarted.nextStep1Prefix", "Start the agent:"),
116
117
  " ",
117
118
  /* @__PURE__ */ f("code", {
118
119
  className: "font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded",
119
120
  children: "vibe start"
120
121
  }),
121
122
  " ",
122
- x("gettingStarted.nextStep1Suffix", "— on first run it establishes a Cloudflare tunnel, generates an agentApiKey, and waits in pre-config mode for the platform.")
123
+ C("gettingStarted.nextStep1Suffix", "— on first run it establishes a Cloudflare tunnel, generates an agentApiKey, and waits in pre-config mode for the platform.")
123
124
  ] }),
124
125
  /* @__PURE__ */ p("li", { children: [
125
- x("gettingStarted.nextStep2Prefix", "In this UI, go to"),
126
+ C("gettingStarted.nextStep2Prefix", "In this UI, go to"),
126
127
  " ",
127
128
  /* @__PURE__ */ p("strong", { children: [
128
- x("gettingStarted.targetsAndAgents", "Targets & Agents"),
129
+ C("gettingStarted.targetsAndAgents", "Targets & Agents"),
129
130
  " →",
130
131
  " ",
131
- x("gettingStarted.addAgent", "Add Agent")
132
+ C("gettingStarted.addAgent", "Add Agent")
132
133
  ] }),
133
- x("gettingStarted.nextStep2Suffix", ", create or pick a target, and paste the tunnel URL and agentApiKey that vibe start printed. The platform then pushes OAuth credentials automatically and the agent activates.")
134
+ C("gettingStarted.nextStep2Suffix", ", create or pick a target, and paste the tunnel URL and agentApiKey that vibe start printed. The platform then pushes OAuth credentials automatically and the agent activates.")
134
135
  ] }),
135
136
  /* @__PURE__ */ p("li", { children: [
136
- x("gettingStarted.nextStep3Prefix", "Run it as a background service:"),
137
+ C("gettingStarted.nextStep3Prefix", "Run it as a background service:"),
137
138
  " ",
138
139
  /* @__PURE__ */ f("code", {
139
140
  className: "font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded",
140
141
  children: "vibe autostart install"
141
142
  }),
142
143
  " ",
143
- x("gettingStarted.nextStep3Suffix", "(remove later with"),
144
+ C("gettingStarted.nextStep3Suffix", "(remove later with"),
144
145
  " ",
145
146
  /* @__PURE__ */ f("code", {
146
147
  className: "font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded",
147
148
  children: "vibe autostart uninstall"
148
149
  }),
149
- x("gettingStarted.nextStep3End", ").")
150
+ C("gettingStarted.nextStep3End", ").")
150
151
  ] }),
151
152
  /* @__PURE__ */ p("li", { children: [
152
- x("gettingStarted.nextStep4Prefix", "Verify it is running with"),
153
+ C("gettingStarted.nextStep4Prefix", "Verify it is running with"),
153
154
  " ",
154
155
  /* @__PURE__ */ f("code", {
155
156
  className: "font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded",
156
157
  children: "vibe health"
157
158
  }),
158
159
  " ",
159
- x("gettingStarted.nextStep4And", "and"),
160
+ C("gettingStarted.nextStep4And", "and"),
160
161
  " ",
161
162
  /* @__PURE__ */ f("code", {
162
163
  className: "font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded",
@@ -167,88 +168,92 @@ function b() {
167
168
  ]
168
169
  }),
169
170
  /* @__PURE__ */ p("a", {
170
- href: y,
171
+ href: x,
171
172
  target: "_blank",
172
173
  rel: "noopener noreferrer",
173
174
  className: "mt-4 inline-flex items-center gap-1.5 text-sm text-text-link hover:text-text-linkHover hover:underline",
174
- children: [x("gettingStarted.viewInstallDocs", "View the full install docs"), /* @__PURE__ */ f(c, { className: "size-3.5" })]
175
+ children: [C("gettingStarted.viewInstallDocs", "View the full install docs"), /* @__PURE__ */ f(c, { className: "size-3.5" })]
175
176
  })
176
177
  ]
177
178
  })
178
179
  })
179
180
  ]
180
181
  }),
181
- T === "cli" && /* @__PURE__ */ f(t, {
182
+ D === "cli" && /* @__PURE__ */ f(t, {
182
183
  padding: "none",
183
184
  children: /* @__PURE__ */ p("div", {
184
185
  className: "p-5 sm:p-6",
185
186
  children: [
186
187
  /* @__PURE__ */ p("h3", {
187
188
  className: "text-base font-semibold text-text-primary mb-4 flex items-center gap-2",
188
- children: [/* @__PURE__ */ f(u, { className: "size-5 text-accent-purple" }), x("gettingStarted.cliQuickRef", "CLI Quick Reference")]
189
+ children: [/* @__PURE__ */ f(u, { className: "size-5 text-accent-purple" }), C("gettingStarted.cliQuickRef", "CLI Quick Reference")]
189
190
  }),
190
- /* @__PURE__ */ f(g, {
191
- stagger: .04,
192
- className: "space-y-2",
193
- children: [
194
- {
195
- cmd: "vibe start",
196
- desc: x("gettingStarted.cmdVibeStart", "First run: auto-detects deps, picks a port (default 3005), establishes a Cloudflare tunnel, generates an agentApiKey, then waits for the platform")
197
- },
198
- {
199
- cmd: "vibe start --profile <name>",
200
- desc: x("gettingStarted.cmdVibeStartProfile", "Run a named profile (e.g. alpha, default) for multiple agent instances")
201
- },
202
- {
203
- cmd: "vibe setup",
204
- desc: x("gettingStarted.cmdVibeSetup", "Install missing dependencies (tmux, ttyd, cloudflared)")
205
- },
206
- {
207
- cmd: "vibe health",
208
- desc: x("gettingStarted.cmdVibeHealth", "Run an HTTP health check on the agent")
209
- },
210
- {
211
- cmd: "vibe status",
212
- desc: x("gettingStarted.cmdVibeStatus", "Show all running agent instances")
213
- },
214
- {
215
- cmd: "vibe autostart install",
216
- desc: x("gettingStarted.cmdVibeAutostartInstall", "Run the agent as a background service (daemonize)")
217
- },
218
- {
219
- cmd: "vibe autostart uninstall",
220
- desc: x("gettingStarted.cmdVibeAutostartUninstall", "Remove the background service")
221
- },
222
- {
223
- cmd: "vibecontrols agents list --active",
224
- desc: x("gettingStarted.cmdAgentsListActive", "Platform CLI — see the connected agent on the backend")
225
- }
226
- ].map((e) => /* @__PURE__ */ p(h, {
227
- className: "flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 px-3 py-2 rounded-button hover:bg-bg-sunken transition-colors",
228
- children: [/* @__PURE__ */ p("code", {
229
- className: "text-xs font-mono text-text-primary sm:w-72 flex-shrink-0",
230
- children: ["$ ", e.cmd]
231
- }), /* @__PURE__ */ f("span", {
232
- className: "text-xs text-text-muted",
233
- children: e.desc
234
- })]
235
- }, e.cmd))
191
+ /* @__PURE__ */ f(h, {
192
+ collapsedHeight: 172,
193
+ label: C("gettingStarted.showAllCommands", "Show all commands"),
194
+ children: /* @__PURE__ */ f(v, {
195
+ stagger: .04,
196
+ className: "space-y-2",
197
+ children: [
198
+ {
199
+ cmd: "vibe start",
200
+ desc: C("gettingStarted.cmdVibeStart", "First run: auto-detects deps, picks a port (default 3005), establishes a Cloudflare tunnel, generates an agentApiKey, then waits for the platform")
201
+ },
202
+ {
203
+ cmd: "vibe start --profile <name>",
204
+ desc: C("gettingStarted.cmdVibeStartProfile", "Run a named profile (e.g. alpha, default) for multiple agent instances")
205
+ },
206
+ {
207
+ cmd: "vibe setup",
208
+ desc: C("gettingStarted.cmdVibeSetup", "Install missing dependencies (tmux, ttyd, cloudflared)")
209
+ },
210
+ {
211
+ cmd: "vibe health",
212
+ desc: C("gettingStarted.cmdVibeHealth", "Run an HTTP health check on the agent")
213
+ },
214
+ {
215
+ cmd: "vibe status",
216
+ desc: C("gettingStarted.cmdVibeStatus", "Show all running agent instances")
217
+ },
218
+ {
219
+ cmd: "vibe autostart install",
220
+ desc: C("gettingStarted.cmdVibeAutostartInstall", "Run the agent as a background service (daemonize)")
221
+ },
222
+ {
223
+ cmd: "vibe autostart uninstall",
224
+ desc: C("gettingStarted.cmdVibeAutostartUninstall", "Remove the background service")
225
+ },
226
+ {
227
+ cmd: "vibecontrols agents list --active",
228
+ desc: C("gettingStarted.cmdAgentsListActive", "Platform CLI — see the connected agent on the backend")
229
+ }
230
+ ].map((e) => /* @__PURE__ */ p(_, {
231
+ className: "flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 px-3 py-2 rounded-button hover:bg-bg-sunken transition-colors",
232
+ children: [/* @__PURE__ */ p("code", {
233
+ className: "text-xs font-mono text-text-primary sm:w-72 flex-shrink-0",
234
+ children: ["$ ", e.cmd]
235
+ }), /* @__PURE__ */ f("span", {
236
+ className: "text-xs text-text-muted",
237
+ children: e.desc
238
+ })]
239
+ }, e.cmd))
240
+ })
236
241
  }),
237
242
  /* @__PURE__ */ p("div", {
238
- className: "mt-4 pt-4 border-t border-border-subtle flex flex-wrap items-center gap-3",
243
+ className: "mt-4 pt-4 border-t border-border-seam flex flex-wrap items-center gap-3",
239
244
  children: [/* @__PURE__ */ p("a", {
240
- href: v,
245
+ href: b,
241
246
  target: "_blank",
242
247
  rel: "noopener noreferrer",
243
248
  className: "inline-flex items-center gap-2 px-3 py-1.5 text-xs border border-border-default text-text-secondary rounded-button hover:bg-bg-sunken hover:border-border-strong transition-colors",
244
249
  children: [
245
- x("gettingStarted.agentNpmPackage", "Agent npm package"),
250
+ C("gettingStarted.agentNpmPackage", "Agent npm package"),
246
251
  " ",
247
252
  /* @__PURE__ */ f(c, { className: "size-3" })
248
253
  ]
249
254
  }), /* @__PURE__ */ f("span", {
250
255
  className: "text-xs text-text-muted",
251
- children: x("gettingStarted.agentNpmLatest", "@vibecontrols/agent (latest)")
256
+ children: C("gettingStarted.agentNpmLatest", "@vibecontrols/agent (latest)")
252
257
  })]
253
258
  })
254
259
  ]
@@ -258,6 +263,6 @@ function b() {
258
263
  });
259
264
  }
260
265
  //#endregion
261
- export { b as GettingStartedPage };
266
+ export { S as GettingStartedPage };
262
267
 
263
268
  //# sourceMappingURL=GettingStartedPage.js.map
package/dist/pages/GettingStartedPage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"GettingStartedPage.js","names":[],"sources":["../../src/pages/GettingStartedPage.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { Terminal, ExternalLink, Download, Info } from 'lucide-react';\nimport { PageHeader, Card, InstallTabs } from '@/components/shared';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { Tabs, type TabItem } from '@burdenoff/fe-libs/chrome';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nconst AGENT_NPM_URL = 'https://www.npmjs.com/package/@vibecontrols/agent';\nconst INSTALL_DOCS_URL = 'https://docs.vibecontrols.com/users/installing-the-agent';\n\n/**\n * Getting Started page — a tabbed guide to installing and running the\n * VibeControls Agent. Two top-level tabs:\n *\n * • Install — shows the global bun / npm install commands via the shared\n * `InstallTabs` component, plus the real connect-and-run flow.\n * • CLI Reference — a compact reference of the agent's `vibe` commands.\n *\n * Bun (or Node >= 18 for npm) is the only machine prerequisite. On first run\n * `vibe start` sets up a Cloudflare tunnel, generates an agentApiKey, and\n * waits for the platform to push OAuth credentials once the agent is\n * connected here.\n *\n * Official docs: https://docs.vibecontrols.com/users/installing-the-agent\n */\nexport function GettingStartedPage() {\n const { t } = useI18n();\n const tr = useCallback(\n (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n },\n [t]\n );\n const [params, setParams] = useSearchParams();\n const tabs: TabItem[] = useMemo(\n () => [\n { id: 'install', label: tr('gettingStarted.installTab', 'Install') },\n { id: 'cli', label: tr('gettingStarted.cliTab', 'CLI Reference') },\n ],\n [tr]\n );\n const activeId = params.get('tab') ?? tabs[0].id;\n const handleTabChange = (id: string) => {\n const next = new URLSearchParams(params);\n if (id === tabs[0].id) next.delete('tab');\n else next.set('tab', id);\n setParams(next, { replace: true });\n };\n\n const [pinnedVersion, setPinnedVersion] = useState('');\n\n return (\n <MotionPage className=\"space-y-8 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n <PageHeader\n title={tr('gettingStarted.title', 'Getting Started')}\n description={tr(\n 'gettingStarted.description',\n 'Install and configure the VibeControls Agent CLI'\n )}\n />\n\n <div className=\"border-b border-border-subtle\">\n <Tabs\n items={tabs}\n activeTabId={activeId}\n onTabChange={handleTabChange}\n variant=\"underline\"\n />\n </div>\n\n {activeId === 'install' && (\n <div className=\"space-y-6\">\n {/* Hero */}\n <div className=\"relative border border-border-subtle bg-bg-elevated rounded-card p-6 sm:p-8 shadow-elevation-1\">\n <div className=\"flex items-start gap-4\">\n <div className=\"flex-shrink-0 size-12 rounded-xl bg-[var(--color-accent-soft)] flex items-center justify-center\">\n <Download className=\"size-6 text-accent-purple\" />\n </div>\n <div className=\"flex-1\">\n <h2 className=\"text-lg sm:text-xl font-semibold text-text-primary mb-1\">\n {tr('gettingStarted.installAgent', 'Install the Agent')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'gettingStarted.installAgentDesc',\n 'Install the agent globally with bun or npm on the machine you want to manage, then run vibe start. Bun (or Node >= 18 for npm) is the only prerequisite.'\n )}\n </p>\n <a\n href={INSTALL_DOCS_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mt-3 inline-flex items-center gap-1.5 text-sm text-text-link hover:text-text-linkHover hover:underline\"\n >\n {tr('gettingStarted.viewInstallDocs', 'View the full install docs')}\n <ExternalLink className=\"size-3.5\" />\n </a>\n </div>\n </div>\n </div>\n\n {/* Install tabs */}\n <Card padding=\"none\">\n <div className=\"p-5 sm:p-6\">\n <InstallTabs pinnedAgentVersion={pinnedVersion || undefined} />\n\n <div className=\"mt-6 pt-4 border-t border-border-subtle\">\n <label\n htmlFor=\"pinned-version\"\n className=\"text-xs font-medium text-text-secondary flex items-center gap-1.5 mb-1.5\"\n >\n <Info className=\"size-3.5\" />{' '}\n {tr('gettingStarted.pinVersion', 'Pin a specific agent version (optional)')}\n </label>\n <input\n aria-label=\"pinned-version\"\n id=\"pinned-version\"\n type=\"text\"\n placeholder={tr(\n 'gettingStarted.pinVersionPlaceholder',\n 'e.g. 2026.408.1 (leave blank for latest)'\n )}\n value={pinnedVersion}\n onChange={(e) => setPinnedVersion(e.target.value)}\n className=\"w-full max-w-xs px-3 py-2 rounded-input border border-border-default bg-bg-elevated text-sm text-text-primary focus-visible:outline-none focus-visible:border-border-strong focus-visible:shadow-[var(--shadow-focus)]\"\n />\n </div>\n </div>\n </Card>\n\n {/* Next steps */}\n <Card padding=\"none\">\n <div className=\"p-5 sm:p-6\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">\n {tr('gettingStarted.nextSteps', 'Next steps')}\n </h3>\n <ol className=\"list-decimal list-inside space-y-2 text-sm text-text-secondary\">\n <li>\n {tr('gettingStarted.nextStep1Prefix', 'Start the agent:')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe start\n </code>{' '}\n {tr(\n 'gettingStarted.nextStep1Suffix',\n '— on first run it establishes a Cloudflare tunnel, generates an agentApiKey, and waits in pre-config mode for the platform.'\n )}\n </li>\n <li>\n {tr('gettingStarted.nextStep2Prefix', 'In this UI, go to')}{' '}\n <strong>\n {tr('gettingStarted.targetsAndAgents', 'Targets & Agents')} →{' '}\n {tr('gettingStarted.addAgent', 'Add Agent')}\n </strong>\n {tr(\n 'gettingStarted.nextStep2Suffix',\n ', create or pick a target, and paste the tunnel URL and agentApiKey that vibe start printed. The platform then pushes OAuth credentials automatically and the agent activates.'\n )}\n </li>\n <li>\n {tr('gettingStarted.nextStep3Prefix', 'Run it as a background service:')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe autostart install\n </code>{' '}\n {tr('gettingStarted.nextStep3Suffix', '(remove later with')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe autostart uninstall\n </code>\n {tr('gettingStarted.nextStep3End', ').')}\n </li>\n <li>\n {tr('gettingStarted.nextStep4Prefix', 'Verify it is running with')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe health\n </code>{' '}\n {tr('gettingStarted.nextStep4And', 'and')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe status\n </code>\n .\n </li>\n </ol>\n <a\n href={INSTALL_DOCS_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mt-4 inline-flex items-center gap-1.5 text-sm text-text-link hover:text-text-linkHover hover:underline\"\n >\n {tr('gettingStarted.viewInstallDocs', 'View the full install docs')}\n <ExternalLink className=\"size-3.5\" />\n </a>\n </div>\n </Card>\n </div>\n )}\n\n {activeId === 'cli' && (\n <Card padding=\"none\">\n <div className=\"p-5 sm:p-6\">\n <h3 className=\"text-base font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Terminal className=\"size-5 text-accent-purple\" />\n {tr('gettingStarted.cliQuickRef', 'CLI Quick Reference')}\n </h3>\n <MotionList stagger={0.04} className=\"space-y-2\">\n {[\n {\n cmd: 'vibe start',\n desc: tr(\n 'gettingStarted.cmdVibeStart',\n 'First run: auto-detects deps, picks a port (default 3005), establishes a Cloudflare tunnel, generates an agentApiKey, then waits for the platform'\n ),\n },\n {\n cmd: 'vibe start --profile <name>',\n desc: tr(\n 'gettingStarted.cmdVibeStartProfile',\n 'Run a named profile (e.g. alpha, default) for multiple agent instances'\n ),\n },\n {\n cmd: 'vibe setup',\n desc: tr(\n 'gettingStarted.cmdVibeSetup',\n 'Install missing dependencies (tmux, ttyd, cloudflared)'\n ),\n },\n {\n cmd: 'vibe health',\n desc: tr('gettingStarted.cmdVibeHealth', 'Run an HTTP health check on the agent'),\n },\n {\n cmd: 'vibe status',\n desc: tr('gettingStarted.cmdVibeStatus', 'Show all running agent instances'),\n },\n {\n cmd: 'vibe autostart install',\n desc: tr(\n 'gettingStarted.cmdVibeAutostartInstall',\n 'Run the agent as a background service (daemonize)'\n ),\n },\n {\n cmd: 'vibe autostart uninstall',\n desc: tr(\n 'gettingStarted.cmdVibeAutostartUninstall',\n 'Remove the background service'\n ),\n },\n {\n cmd: 'vibecontrols agents list --active',\n desc: tr(\n 'gettingStarted.cmdAgentsListActive',\n 'Platform CLI — see the connected agent on the backend'\n ),\n },\n ].map((item) => (\n <MotionItem\n key={item.cmd}\n className=\"flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 px-3 py-2 rounded-button hover:bg-bg-sunken transition-colors\"\n >\n <code className=\"text-xs font-mono text-text-primary sm:w-72 flex-shrink-0\">\n $ {item.cmd}\n </code>\n <span className=\"text-xs text-text-muted\">{item.desc}</span>\n </MotionItem>\n ))}\n </MotionList>\n <div className=\"mt-4 pt-4 border-t border-border-subtle flex flex-wrap items-center gap-3\">\n <a\n href={AGENT_NPM_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"inline-flex items-center gap-2 px-3 py-1.5 text-xs border border-border-default text-text-secondary rounded-button hover:bg-bg-sunken hover:border-border-strong transition-colors\"\n >\n {tr('gettingStarted.agentNpmPackage', 'Agent npm package')}{' '}\n <ExternalLink className=\"size-3\" />\n </a>\n <span className=\"text-xs text-text-muted\">\n {tr('gettingStarted.agentNpmLatest', '@vibecontrols/agent (latest)')}\n </span>\n </div>\n </div>\n </Card>\n )}\n </MotionPage>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"GettingStartedPage.js","names":[],"sources":["../../src/pages/GettingStartedPage.tsx"],"sourcesContent":["import { useCallback, useMemo, useState } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { Terminal, ExternalLink, Download, Info } from 'lucide-react';\nimport { PageHeader, Card, InstallTabs } from '@/components/shared';\nimport { EmphasisPanel, ShowMore } from '@burdenoff/fe-libs/ui';\nimport { MotionPage, MotionList, MotionItem } from '@burdenoff/fe-libs/shared/motion';\nimport { Tabs, type TabItem } from '@burdenoff/fe-libs/chrome';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\n\nconst AGENT_NPM_URL = 'https://www.npmjs.com/package/@vibecontrols/agent';\nconst INSTALL_DOCS_URL = 'https://docs.vibecontrols.com/users/installing-the-agent';\n\n/**\n * Getting Started page — a tabbed guide to installing and running the\n * VibeControls Agent. Two top-level tabs:\n *\n * • Install — shows the global bun / npm install commands via the shared\n * `InstallTabs` component, plus the real connect-and-run flow.\n * • CLI Reference — a compact reference of the agent's `vibe` commands.\n *\n * Bun (or Node >= 18 for npm) is the only machine prerequisite. On first run\n * `vibe start` sets up a Cloudflare tunnel, generates an agentApiKey, and\n * waits for the platform to push OAuth credentials once the agent is\n * connected here.\n *\n * Official docs: https://docs.vibecontrols.com/users/installing-the-agent\n */\nexport function GettingStartedPage() {\n const { t } = useI18n();\n const tr = useCallback(\n (key: string, fallback: string): string => {\n const value = t(key);\n return value === key ? fallback : value;\n },\n [t]\n );\n const [params, setParams] = useSearchParams();\n const tabs: TabItem[] = useMemo(\n () => [\n { id: 'install', label: tr('gettingStarted.installTab', 'Install') },\n { id: 'cli', label: tr('gettingStarted.cliTab', 'CLI Reference') },\n ],\n [tr]\n );\n const activeId = params.get('tab') ?? tabs[0].id;\n const handleTabChange = (id: string) => {\n const next = new URLSearchParams(params);\n if (id === tabs[0].id) next.delete('tab');\n else next.set('tab', id);\n setParams(next, { replace: true });\n };\n\n const [pinnedVersion, setPinnedVersion] = useState('');\n\n return (\n <MotionPage className=\"space-y-8 px-6 lg:px-8 py-6 bg-bg-canvas min-h-screen\">\n <PageHeader\n title={tr('gettingStarted.title', 'Getting Started')}\n description={tr(\n 'gettingStarted.description',\n 'Install and configure the VibeControls Agent CLI'\n )}\n />\n\n <div className=\"border-b border-border-subtle\">\n <Tabs\n items={tabs}\n activeTabId={activeId}\n onTabChange={handleTabChange}\n variant=\"underline\"\n />\n </div>\n\n {activeId === 'install' && (\n <div className=\"space-y-6\">\n {/* Hero — the single emphasised zone on this page */}\n <EmphasisPanel className=\"sm:p-8\">\n <div className=\"flex items-start gap-4\">\n <div className=\"flex-shrink-0 size-12 rounded-xl bg-[var(--color-accent-soft)] flex items-center justify-center\">\n <Download className=\"size-6 text-accent-purple\" />\n </div>\n <div className=\"flex-1\">\n <h2 className=\"text-lg sm:text-xl font-semibold text-text-primary mb-1\">\n {tr('gettingStarted.installAgent', 'Install the Agent')}\n </h2>\n <p className=\"text-sm text-text-secondary\">\n {tr(\n 'gettingStarted.installAgentDesc',\n 'Install the agent globally with bun or npm on the machine you want to manage, then run vibe start. Bun (or Node >= 18 for npm) is the only prerequisite.'\n )}\n </p>\n <a\n href={INSTALL_DOCS_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mt-3 inline-flex items-center gap-1.5 text-sm text-text-link hover:text-text-linkHover hover:underline\"\n >\n {tr('gettingStarted.viewInstallDocs', 'View the full install docs')}\n <ExternalLink className=\"size-3.5\" />\n </a>\n </div>\n </div>\n </EmphasisPanel>\n\n {/* Install tabs */}\n <Card padding=\"none\">\n <div className=\"p-5 sm:p-6\">\n <InstallTabs pinnedAgentVersion={pinnedVersion || undefined} />\n\n <div className=\"mt-6 pt-4 border-t border-border-subtle\">\n <label\n htmlFor=\"pinned-version\"\n className=\"text-xs font-medium text-text-secondary flex items-center gap-1.5 mb-1.5\"\n >\n <Info className=\"size-3.5\" />{' '}\n {tr('gettingStarted.pinVersion', 'Pin a specific agent version (optional)')}\n </label>\n <input\n aria-label=\"pinned-version\"\n id=\"pinned-version\"\n type=\"text\"\n placeholder={tr(\n 'gettingStarted.pinVersionPlaceholder',\n 'e.g. 2026.408.1 (leave blank for latest)'\n )}\n value={pinnedVersion}\n onChange={(e) => setPinnedVersion(e.target.value)}\n className=\"w-full max-w-xs px-3 py-2 rounded-input border border-border-default bg-bg-elevated text-sm text-text-primary focus-visible:outline-none focus-visible:border-border-strong focus-visible:shadow-[var(--shadow-focus)]\"\n />\n </div>\n </div>\n </Card>\n\n {/* Next steps */}\n <Card padding=\"none\">\n <div className=\"p-5 sm:p-6\">\n <h3 className=\"text-base font-semibold text-text-primary mb-3\">\n {tr('gettingStarted.nextSteps', 'Next steps')}\n </h3>\n <ol className=\"list-decimal list-inside space-y-2 text-sm text-text-secondary\">\n <li>\n {tr('gettingStarted.nextStep1Prefix', 'Start the agent:')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe start\n </code>{' '}\n {tr(\n 'gettingStarted.nextStep1Suffix',\n '— on first run it establishes a Cloudflare tunnel, generates an agentApiKey, and waits in pre-config mode for the platform.'\n )}\n </li>\n <li>\n {tr('gettingStarted.nextStep2Prefix', 'In this UI, go to')}{' '}\n <strong>\n {tr('gettingStarted.targetsAndAgents', 'Targets & Agents')} →{' '}\n {tr('gettingStarted.addAgent', 'Add Agent')}\n </strong>\n {tr(\n 'gettingStarted.nextStep2Suffix',\n ', create or pick a target, and paste the tunnel URL and agentApiKey that vibe start printed. The platform then pushes OAuth credentials automatically and the agent activates.'\n )}\n </li>\n <li>\n {tr('gettingStarted.nextStep3Prefix', 'Run it as a background service:')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe autostart install\n </code>{' '}\n {tr('gettingStarted.nextStep3Suffix', '(remove later with')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe autostart uninstall\n </code>\n {tr('gettingStarted.nextStep3End', ').')}\n </li>\n <li>\n {tr('gettingStarted.nextStep4Prefix', 'Verify it is running with')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe health\n </code>{' '}\n {tr('gettingStarted.nextStep4And', 'and')}{' '}\n <code className=\"font-mono text-xs bg-bg-sunken/60 text-text-secondary px-1.5 py-0.5 rounded\">\n vibe status\n </code>\n .\n </li>\n </ol>\n <a\n href={INSTALL_DOCS_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"mt-4 inline-flex items-center gap-1.5 text-sm text-text-link hover:text-text-linkHover hover:underline\"\n >\n {tr('gettingStarted.viewInstallDocs', 'View the full install docs')}\n <ExternalLink className=\"size-3.5\" />\n </a>\n </div>\n </Card>\n </div>\n )}\n\n {activeId === 'cli' && (\n <Card padding=\"none\">\n <div className=\"p-5 sm:p-6\">\n <h3 className=\"text-base font-semibold text-text-primary mb-4 flex items-center gap-2\">\n <Terminal className=\"size-5 text-accent-purple\" />\n {tr('gettingStarted.cliQuickRef', 'CLI Quick Reference')}\n </h3>\n <ShowMore collapsedHeight={172} label={tr('gettingStarted.showAllCommands', 'Show all commands')}>\n <MotionList stagger={0.04} className=\"space-y-2\">\n {[\n {\n cmd: 'vibe start',\n desc: tr(\n 'gettingStarted.cmdVibeStart',\n 'First run: auto-detects deps, picks a port (default 3005), establishes a Cloudflare tunnel, generates an agentApiKey, then waits for the platform'\n ),\n },\n {\n cmd: 'vibe start --profile <name>',\n desc: tr(\n 'gettingStarted.cmdVibeStartProfile',\n 'Run a named profile (e.g. alpha, default) for multiple agent instances'\n ),\n },\n {\n cmd: 'vibe setup',\n desc: tr(\n 'gettingStarted.cmdVibeSetup',\n 'Install missing dependencies (tmux, ttyd, cloudflared)'\n ),\n },\n {\n cmd: 'vibe health',\n desc: tr('gettingStarted.cmdVibeHealth', 'Run an HTTP health check on the agent'),\n },\n {\n cmd: 'vibe status',\n desc: tr('gettingStarted.cmdVibeStatus', 'Show all running agent instances'),\n },\n {\n cmd: 'vibe autostart install',\n desc: tr(\n 'gettingStarted.cmdVibeAutostartInstall',\n 'Run the agent as a background service (daemonize)'\n ),\n },\n {\n cmd: 'vibe autostart uninstall',\n desc: tr(\n 'gettingStarted.cmdVibeAutostartUninstall',\n 'Remove the background service'\n ),\n },\n {\n cmd: 'vibecontrols agents list --active',\n desc: tr(\n 'gettingStarted.cmdAgentsListActive',\n 'Platform CLI — see the connected agent on the backend'\n ),\n },\n ].map((item) => (\n <MotionItem\n key={item.cmd}\n className=\"flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-3 px-3 py-2 rounded-button hover:bg-bg-sunken transition-colors\"\n >\n <code className=\"text-xs font-mono text-text-primary sm:w-72 flex-shrink-0\">\n $ {item.cmd}\n </code>\n <span className=\"text-xs text-text-muted\">{item.desc}</span>\n </MotionItem>\n ))}\n </MotionList>\n </ShowMore>\n <div className=\"mt-4 pt-4 border-t border-border-seam flex flex-wrap items-center gap-3\">\n <a\n href={AGENT_NPM_URL}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className=\"inline-flex items-center gap-2 px-3 py-1.5 text-xs border border-border-default text-text-secondary rounded-button hover:bg-bg-sunken hover:border-border-strong transition-colors\"\n >\n {tr('gettingStarted.agentNpmPackage', 'Agent npm package')}{' '}\n <ExternalLink className=\"size-3\" />\n </a>\n <span className=\"text-xs text-text-muted\">\n {tr('gettingStarted.agentNpmLatest', '@vibecontrols/agent (latest)')}\n </span>\n </div>\n </div>\n </Card>\n )}\n </MotionPage>\n );\n}\n"],"mappings":"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"}