@jonsoc/console-app 1.1.34

package/src/routes/temp.tsx

@@ -0,0 +1,172 @@
+import "./index.css"
+import { Title } from "@solidjs/meta"
+import { onCleanup, onMount } from "solid-js"
+import logoLight from "../asset/logo-ornate-light.svg"
+import logoDark from "../asset/logo-ornate-dark.svg"
+import IMG_SPLASH from "../asset/lander/screenshot-splash.png"
+import { IconCopy, IconCheck } from "../component/icon"
+
+function CopyStatus() {
+  return (
+    <div data-component="copy-status">
+      <IconCopy data-slot="copy" />
+      <IconCheck data-slot="check" />
+    </div>
+  )
+}
+
+export default function Home() {
+  onMount(() => {
+    const commands = document.querySelectorAll("[data-copy]")
+    for (const button of commands) {
+      const callback = () => {
+        const text = button.textContent
+        if (text) {
+          navigator.clipboard.writeText(text)
+          button.setAttribute("data-copied", "")
+          setTimeout(() => {
+            button.removeAttribute("data-copied")
+          }, 1500)
+        }
+      }
+      button.addEventListener("click", callback)
+      onCleanup(() => {
+        button.removeEventListener("click", callback)
+      })
+    }
+  })
+
+  return (
+    <main data-page="home">
+      <Title>jonsoc | AI coding agent built for the terminal</Title>
+
+      <div data-component="content">
+        <section data-component="top">
+          <img data-slot="logo light" src={logoLight} alt="jonsoc logo light" />
+          <img data-slot="logo dark" src={logoDark} alt="jonsoc logo dark" />
+          <h1 data-slot="title">The AI coding agent built for the terminal</h1>
+          <div data-slot="login">
+            <a href="/auth">jonsoc zen</a>
+          </div>
+        </section>
+
+        <section data-component="cta">
+          <div data-slot="left">
+            <a href="/docs">Get Started</a>
+          </div>
+          <div data-slot="center">
+            <a href="/auth">jonsoc zen</a>
+          </div>
+          <div data-slot="right">
+            <button data-copy data-slot="command">
+              <span>
+                <span>curl -fsSL </span>
+                <span data-slot="protocol">https://</span>
+                <span data-slot="highlight">jonsoc.com/install</span>
+                <span> | bash</span>
+              </span>
+              <CopyStatus />
+            </button>
+          </div>
+        </section>
+
+        <section data-component="features">
+          <ul data-slot="list">
+            <li>
+              <strong>Native TUI</strong> A responsive, native, themeable terminal UI
+            </li>
+            <li>
+              <strong>LSP enabled</strong> Automatically loads the right LSPs for the LLM
+            </li>
+            <li>
+              <strong>jonsoc zen</strong> A <a href="/docs/zen">curated list of models</a> provided by jonsoc{" "}
+              <label>New</label>
+            </li>
+            <li>
+              <strong>Multi-session</strong> Start multiple agents in parallel on the same project
+            </li>
+            <li>
+              <strong>Shareable links</strong> Share a link to any sessions for reference or to debug
+            </li>
+            <li>
+              <strong>GitHub Copilot</strong> Log in with GitHub to use your Copilot account
+            </li>
+            <li>
+              <strong>ChatGPT Plus/Pro</strong> Log in with OpenAI to use your ChatGPT Plus or Pro account
+            </li>
+            <li>
+              <strong>Use any model</strong> Supports 75+ LLM providers through{" "}
+              <a href="https://models.dev">Models.dev</a>, including local models
+            </li>
+          </ul>
+        </section>
+
+        <section data-component="install">
+          <div data-component="method">
+            <h3 data-component="title">npm</h3>
+            <button data-copy data-slot="button">
+              <span>
+                npm install -g <strong>jonsoc</strong>
+              </span>
+              <CopyStatus />
+            </button>
+          </div>
+          <div data-component="method">
+            <h3 data-component="title">bun</h3>
+            <button data-copy data-slot="button">
+              <span>
+                bun install -g <strong>jonsoc</strong>
+              </span>
+              <CopyStatus />
+            </button>
+          </div>
+          <div data-component="method">
+            <h3 data-component="title">homebrew</h3>
+            <button data-copy data-slot="button">
+              <span>
+                brew install <strong>jonsoc</strong>
+              </span>
+              <CopyStatus />
+            </button>
+          </div>
+          <div data-component="method">
+            <h3 data-component="title">paru</h3>
+            <button data-copy data-slot="button">
+              <span>
+                paru -S <strong>jonsoc-bin</strong>
+              </span>
+              <CopyStatus />
+            </button>
+          </div>
+        </section>
+
+        <section data-component="screenshots">
+          <figure>
+            <figcaption>jonsoc TUI with the tokyonight theme</figcaption>
+            <a href="/docs/cli">
+              <img src={IMG_SPLASH} alt="jonsoc TUI with tokyonight theme" />
+            </a>
+          </figure>
+        </section>
+
+        <footer data-component="footer">
+          <div data-slot="cell">
+            <a href="https://x.com/jonsoc">X.com</a>
+          </div>
+          <div data-slot="cell">
+            <a href="https://github.com/anomalyco/jonsoc">GitHub</a>
+          </div>
+          <div data-slot="cell">
+            <a href="https://jonsoc.com/discord">Discord</a>
+          </div>
+        </footer>
+      </div>
+
+      <div data-component="legal">
+        <span>
+          ©2025 <a href="https://anoma.ly">Anomaly</a>
+        </span>
+      </div>
+    </main>
+  )
+}

package/src/routes/user-menu.css

@@ -0,0 +1,18 @@
+[data-component="user-menu"] {
+  [data-component="dropdown"] {
+    [data-slot="trigger"] span {
+      color: var(--color-text-muted);
+    }
+
+    [data-slot="dropdown"] {
+      form {
+        width: 100%;
+      }
+    }
+
+    [data-slot="item"] {
+      color: var(--color-danger);
+      text-decoration: none;
+    }
+  }
+}

package/src/routes/user-menu.tsx

@@ -0,0 +1,32 @@
+import { action } from "@solidjs/router"
+import { getRequestEvent } from "solid-js/web"
+import { useAuthSession } from "~/context/auth"
+import { Dropdown } from "~/component/dropdown"
+import "./user-menu.css"
+
+const logout = action(async () => {
+  "use server"
+  const auth = await useAuthSession()
+  const event = getRequestEvent()
+  const current = auth.data.current
+  if (current)
+    await auth.update((val) => {
+      delete val.account?.[current]
+      const first = Object.keys(val.account ?? {})[0]
+      val.current = first
+      event!.locals.actor = undefined
+      return val
+    })
+}, "auth.logout")
+
+export function UserMenu(props: { email: string | null | undefined }) {
+  return (
+    <div data-component="user-menu">
+      <Dropdown trigger={props.email ?? ""} align="right">
+        <a href="/auth/logout" data-slot="item">
+          Logout
+        </a>
+      </Dropdown>
+    </div>
+  )
+}

package/src/routes/workspace/[id]/billing/billing-section.module.css

@@ -0,0 +1,185 @@
+.root {
+  [data-slot="reload-error"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-4);
+
+    p {
+      color: var(--color-danger);
+      font-size: var(--font-size-sm);
+      line-height: 1.4;
+      margin: 0;
+      flex: 1;
+    }
+
+    [data-slot="create-form"] {
+      display: flex;
+      gap: var(--space-2);
+      margin: 0;
+      flex-shrink: 0;
+    }
+  }
+
+  [data-slot="section-content"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  [data-slot="balance-display"] {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+
+    @media (max-width: 30rem) {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--space-2);
+    }
+
+    [data-slot="balance-amount"] {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      padding: var(--space-4);
+      border: 1px solid var(--color-border);
+      border-radius: var(--border-radius-sm);
+      background-color: var(--color-bg-surface);
+      align-self: stretch;
+
+      [data-slot="balance-label"] {
+        font-size: var(--font-size-sm);
+        color: var(--color-text-muted);
+        margin-top: var(--space-2);
+        font-weight: 400;
+      }
+
+      [data-slot="balance-value"] {
+        font-size: var(--font-size-2xl);
+        font-weight: 600;
+        color: var(--color-text);
+      }
+    }
+
+    [data-slot="balance-right-section"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-3);
+      flex: 1;
+    }
+
+    [data-slot="add-balance-form-container"] {
+      display: flex;
+      flex-direction: column;
+      gap: var(--space-2);
+    }
+
+    [data-slot="add-balance-form"] {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: var(--space-3);
+
+      label {
+        font-size: var(--font-size-sm);
+        font-weight: 500;
+        color: var(--color-text-muted);
+        white-space: nowrap;
+      }
+
+      input[data-component="input"] {
+        padding: var(--space-2) var(--space-3);
+        border: 1px solid var(--color-border);
+        border-radius: var(--border-radius-sm);
+        background-color: var(--color-bg);
+        color: var(--color-text);
+        font-size: var(--font-size-sm);
+        line-height: 1.5;
+
+        &:focus {
+          outline: none;
+          border-color: var(--color-accent);
+          box-shadow: 0 0 0 3px var(--color-accent-alpha);
+        }
+
+        &::placeholder {
+          color: var(--color-text-disabled);
+        }
+      }
+
+      [data-slot="form-actions"] {
+        display: flex;
+        gap: var(--space-2);
+      }
+    }
+
+    [data-slot="form-error"] {
+      color: var(--color-danger);
+      font-size: var(--font-size-sm);
+      line-height: 1.4;
+    }
+
+    [data-slot="credit-card"] {
+      padding: var(--space-2) var(--space-4);
+      background-color: var(--color-bg-surface);
+      border-radius: var(--border-radius-sm);
+      display: flex;
+      align-items: center;
+      gap: var(--space-3);
+      min-width: 150px;
+      align-self: flex-start;
+
+      [data-slot="card-icon"] {
+        display: flex;
+        align-items: center;
+        color: var(--color-text-muted);
+      }
+
+      [data-slot="card-details"] {
+        display: flex;
+        align-items: baseline;
+        gap: var(--space-1);
+        flex: 1;
+        justify-content: flex-end;
+
+        [data-slot="secret"] {
+          font-size: var(--font-size-sm);
+          color: var(--color-text-muted);
+          font-weight: 400;
+        }
+
+        [data-slot="number"] {
+          font-size: var(--font-size-sm);
+          font-weight: 500;
+          color: var(--color-text-muted);
+        }
+
+        [data-slot="type"] {
+          font-size: var(--font-size-sm);
+          font-weight: 400;
+          color: var(--color-text-muted);
+        }
+      }
+
+      button {
+        white-space: nowrap;
+        flex-shrink: 0;
+      }
+    }
+
+    button {
+      align-self: flex-start;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+  }
+
+  [data-slot="enable-billing-button"] {
+    align-self: flex-start;
+    padding: var(--space-4);
+    min-width: 150px;
+  }
+}

package/src/routes/workspace/[id]/billing/billing-section.tsx

@@ -0,0 +1,240 @@
+import { action, useParams, useAction, createAsync, useSubmission, json } from "@solidjs/router"
+import { createMemo, Match, Show, Switch, createEffect } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Billing } from "@jonsoc/console-core/billing.js"
+import { withActor } from "~/context/auth.withActor"
+import { IconCreditCard, IconStripe } from "~/component/icon"
+import styles from "./billing-section.module.css"
+import { createCheckoutUrl, formatBalance, queryBillingInfo } from "../../common"
+
+const createSessionUrl = action(async (workspaceID: string, returnUrl: string) => {
+  "use server"
+  return json(
+    await withActor(
+      () =>
+        Billing.generateSessionUrl({ returnUrl })
+          .then((data) => ({ error: undefined, data }))
+          .catch((e) => ({
+            error: e.message as string,
+            data: undefined,
+          })),
+      workspaceID,
+    ),
+    { revalidate: queryBillingInfo.key },
+  )
+}, "sessionUrl")
+
+export function BillingSection() {
+  const params = useParams()
+  // ORIGINAL CODE - COMMENTED OUT FOR TESTING
+  const billingInfo = createAsync(() => queryBillingInfo(params.id!))
+  const checkoutAction = useAction(createCheckoutUrl)
+  const checkoutSubmission = useSubmission(createCheckoutUrl)
+  const sessionAction = useAction(createSessionUrl)
+  const sessionSubmission = useSubmission(createSessionUrl)
+  const [store, setStore] = createStore({
+    showAddBalanceForm: false,
+    addBalanceAmount: billingInfo()?.reloadAmount.toString() ?? "",
+    checkoutRedirecting: false,
+    sessionRedirecting: false,
+  })
+
+  createEffect(() => {
+    const info = billingInfo()
+    if (info) {
+      setStore("addBalanceAmount", info.reloadAmount.toString())
+    }
+  })
+  const balance = createMemo(() => formatBalance(billingInfo()?.balance ?? 0))
+
+  async function onClickCheckout() {
+    const amount = parseInt(store.addBalanceAmount)
+    const baseUrl = window.location.href
+
+    const checkout = await checkoutAction(params.id!, amount, baseUrl, baseUrl)
+    if (checkout && checkout.data) {
+      setStore("checkoutRedirecting", true)
+      window.location.href = checkout.data
+    }
+  }
+
+  async function onClickSession() {
+    const baseUrl = window.location.href
+    const sessionUrl = await sessionAction(params.id!, baseUrl)
+    if (sessionUrl && sessionUrl.data) {
+      setStore("sessionRedirecting", true)
+      window.location.href = sessionUrl.data
+    }
+  }
+
+  function showAddBalanceForm() {
+    while (true) {
+      checkoutSubmission.clear()
+      if (!checkoutSubmission.result) break
+    }
+    setStore({
+      showAddBalanceForm: true,
+    })
+  }
+
+  function hideAddBalanceForm() {
+    setStore("showAddBalanceForm", false)
+    checkoutSubmission.clear()
+  }
+
+  // DUMMY DATA FOR TESTING - UNCOMMENT ONE OF THE SCENARIOS BELOW
+
+  // Scenario 1: User has not added billing details and has no balance
+  // const balanceInfo = () => ({
+  //   balance: 0,
+  //   paymentMethodType: null as string | null,
+  //   paymentMethodLast4: null as string | null,
+  //   reload: false,
+  //   reloadError: null as string | null,
+  //   timeReloadError: null as Date | null,
+  // })
+
+  // Scenario 2: User has not added billing details but has a balance
+  // const balanceInfo = () => ({
+  //   balance: 1500000000, // $15.00
+  //   paymentMethodType: null as string | null,
+  //   paymentMethodLast4: null as string | null,
+  //   reload: false,
+  //   reloadError: null as string | null,
+  //   timeReloadError: null as Date | null
+  // })
+
+  // Scenario 3: User has added billing details (reload enabled)
+  // const balanceInfo = () => ({
+  //   balance: 750000000, // $7.50
+  //   paymentMethodType: "card",
+  //   paymentMethodLast4: "4242",
+  //   reload: true,
+  //   reloadError: null as string | null,
+  //   timeReloadError: null as Date | null
+  // })
+
+  // Scenario 4: User has billing details but reload failed
+  // const balanceInfo = () => ({
+  //   balance: 250000000, // $2.50
+  //   paymentMethodType: "card",
+  //   paymentMethodLast4: "4242",
+  //   reload: true,
+  //   reloadError: "Your card was declined." as string,
+  //   timeReloadError: new Date(Date.now() - 3600000) as Date // 1 hour ago
+  // })
+
+  // Scenario 5: User has Link payment method
+  // const balanceInfo = () => ({
+  //   balance: 500000000, // $5.00
+  //   paymentMethodType: "link",
+  //   paymentMethodLast4: null as string | null,
+  //   reload: true,
+  //   reloadError: null as string | null,
+  //   timeReloadError: null as Date | null
+  // })
+
+  return (
+    <section class={styles.root}>
+      <div data-slot="section-title">
+        <h2>Billing</h2>
+        <p>
+          Manage payments methods. <a href="mailto:contact@anoma.ly">Contact us</a> if you have any questions.
+        </p>
+      </div>
+      <div data-slot="section-content">
+        <div data-slot="balance-display">
+          <div data-slot="balance-amount">
+            <span data-slot="balance-value">${balance()}</span>
+            <span data-slot="balance-label">Current Balance</span>
+          </div>
+          <Show when={billingInfo()?.customerID}>
+            <div data-slot="balance-right-section">
+              <Show
+                when={!store.showAddBalanceForm}
+                fallback={
+                  <div data-slot="add-balance-form-container">
+                    <div data-slot="add-balance-form">
+                      <label>Add $</label>
+                      <input
+                        data-component="input"
+                        type="number"
+                        min={billingInfo()?.reloadAmountMin.toString()}
+                        step="1"
+                        value={store.addBalanceAmount}
+                        onInput={(e) => {
+                          setStore("addBalanceAmount", e.currentTarget.value)
+                          checkoutSubmission.clear()
+                        }}
+                        placeholder="Enter amount"
+                      />
+                      <div data-slot="form-actions">
+                        <button data-color="ghost" type="button" onClick={() => hideAddBalanceForm()}>
+                          Cancel
+                        </button>
+                        <button
+                          data-color="primary"
+                          type="button"
+                          disabled={!store.addBalanceAmount || checkoutSubmission.pending || store.checkoutRedirecting}
+                          onClick={onClickCheckout}
+                        >
+                          {checkoutSubmission.pending || store.checkoutRedirecting ? "Loading..." : "Add"}
+                        </button>
+                      </div>
+                    </div>
+                    <Show when={checkoutSubmission.result && (checkoutSubmission.result as any).error}>
+                      {(err: any) => <div data-slot="form-error">{err()}</div>}
+                    </Show>
+                  </div>
+                }
+              >
+                <button data-color="primary" onClick={() => showAddBalanceForm()}>
+                  Add Balance
+                </button>
+              </Show>
+              <div data-slot="credit-card">
+                <div data-slot="card-icon">
+                  <Switch fallback={<IconCreditCard style={{ width: "24px", height: "24px" }} />}>
+                    <Match when={billingInfo()?.paymentMethodType === "link"}>
+                      <IconStripe style={{ width: "24px", height: "24px" }} />
+                    </Match>
+                  </Switch>
+                </div>
+                <div data-slot="card-details">
+                  <Switch>
+                    <Match when={billingInfo()?.paymentMethodType === "card"}>
+                      <Show when={billingInfo()?.paymentMethodLast4} fallback={<span data-slot="number">----</span>}>
+                        <span data-slot="secret">••••</span>
+                        <span data-slot="number">{billingInfo()?.paymentMethodLast4}</span>
+                      </Show>
+                    </Match>
+                    <Match when={billingInfo()?.paymentMethodType === "link"}>
+                      <span data-slot="type">Linked to Stripe</span>
+                    </Match>
+                  </Switch>
+                </div>
+                <button
+                  data-color="ghost"
+                  disabled={sessionSubmission.pending || store.sessionRedirecting}
+                  onClick={onClickSession}
+                >
+                  {sessionSubmission.pending || store.sessionRedirecting ? "Loading..." : "Manage"}
+                </button>
+              </div>
+            </div>
+          </Show>
+        </div>
+        <Show when={!billingInfo()?.customerID}>
+          <button
+            data-slot="enable-billing-button"
+            data-color="primary"
+            disabled={checkoutSubmission.pending || store.checkoutRedirecting}
+            onClick={onClickCheckout}
+          >
+            {checkoutSubmission.pending || store.checkoutRedirecting ? "Loading..." : "Enable Billing"}
+          </button>
+        </Show>
+      </div>
+    </section>
+  )
+}