@jonsoc/console-app 1.1.34

package/.opencode/agent/css.md

@@ -0,0 +1,149 @@
+---
+description: use whenever you are styling a ui with css
+---
+
+you are very good at writing clean maintainable css using modern techniques
+
+css is structured like this
+
+```css
+[data-page="home"] {
+  [data-component="header"] {
+    [data-slot="logo"] {
+    }
+  }
+}
+```
+
+top level pages are scoped using `data-page`
+
+pages can break down into components using `data-component`
+
+components can break down into slots using `data-slot`
+
+structure things so that this hierarchy is followed IN YOUR CSS - you should rarely need to
+nest components inside other components. you should NEVER nest components inside
+slots. you should NEVER nest slots inside other slots.
+
+**IMPORTANT: This hierarchy rule applies to CSS structure, NOT JSX/DOM structure.**
+
+The hierarchy in css file does NOT have to match the hierarchy in the dom - you
+can put components or slots at the same level in CSS even if one goes inside another in the DOM.
+
+Your JSX can nest however makes semantic sense - components can be inside slots,
+slots can contain components, etc. The DOM structure should be whatever makes the most
+semantic and functional sense.
+
+It is more important to follow the pages -> components -> slots structure IN YOUR CSS,
+while keeping your JSX/DOM structure logical and semantic.
+
+use data attributes to represent different states of the component
+
+```css
+[data-component="modal"] {
+  opacity: 0;
+
+  &[data-state="open"] {
+    opacity: 1;
+  }
+}
+```
+
+this will allow jsx to control the styling
+
+avoid selectors that just target an element type like `> span` you should assign
+it a slot name. it's ok to do this sometimes where it makes sense semantically
+like targeting `li` elements in a list
+
+in terms of file structure `./src/style/` contains all universal styling rules.
+these should not contain anything specific to a page
+
+`./src/style/token` contains all the tokens used in the project
+
+`./src/style/component` is for reusable components like buttons or inputs
+
+page specific styles should go next to the page they are styling so
+`./src/routes/about.tsx` should have its styles in `./src/routes/about.css`
+
+`about.css` should be scoped using `data-page="about"`
+
+## Example of correct implementation
+
+JSX can nest however makes sense semantically:
+
+```jsx
+<div data-slot="left">
+  <div data-component="title">Section Title</div>
+  <div data-slot="content">Content here</div>
+</div>
+```
+
+CSS maintains clean hierarchy regardless of DOM nesting:
+
+```css
+[data-page="home"] {
+  [data-component="screenshots"] {
+    [data-slot="left"] {
+      /* styles */
+    }
+    [data-slot="content"] {
+      /* styles */
+    }
+  }
+
+  [data-component="title"] {
+    /* can be at same level even though nested in DOM */
+  }
+}
+```
+
+## Reusable Components
+
+If a component is reused across multiple sections of the same page, define it at the page level:
+
+```jsx
+<!-- Used in multiple places on the same page -->
+<section data-component="install">
+  <div data-component="method">
+    <h3 data-component="title">npm</h3>
+  </div>
+  <div data-component="method">
+    <h3 data-component="title">bun</h3>
+  </div>
+</section>
+
+<section data-component="screenshots">
+  <div data-slot="left">
+    <div data-component="title">Screenshot Title</div>
+  </div>
+</section>
+```
+
+```css
+[data-page="home"] {
+  /* Reusable title component defined at page level since it's used in multiple components */
+  [data-component="title"] {
+    text-transform: uppercase;
+    font-weight: 400;
+  }
+
+  [data-component="install"] {
+    /* install-specific styles */
+  }
+
+  [data-component="screenshots"] {
+    /* screenshots-specific styles */
+  }
+}
+```
+
+This is correct because the `title` component has consistent styling and behavior across the page.
+
+## Key Clarifications
+
+1. **JSX Nesting is Flexible**: Components can be nested inside slots, slots can contain components - whatever makes semantic sense
+2. **CSS Hierarchy is Strict**: Follow pages → components → slots structure in CSS
+3. **Reusable Components**: Define at the appropriate level where they're shared (page level if used across the page, component level if only used within that component)
+4. **DOM vs CSS Structure**: These don't need to match - optimize each for its purpose
+
+See ./src/routes/index.css and ./src/routes/index.tsx for a complete example.

package/README.md

@@ -0,0 +1,32 @@
+# SolidStart
+
+Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
+
+## Creating a project
+
+```bash
+# create a new project in the current directory
+npm init solid@latest
+
+# create a new project in my-app
+npm init solid@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Solid apps are built with _presets_, which optimise your project for deployment to different environments.
+
+By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
+
+## This project was created with the [Solid CLI](https://github.com/solidjs-community/solid-cli)

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@jonsoc/console-app",
+  "version": "1.1.34",
+  "type": "module",
+  "license": "MIT",
+  "scripts": {
+    "typecheck": "tsgo --noEmit",
+    "dev": "vite dev --host 0.0.0.0",
+    "dev:remote": "VITE_AUTH_URL=https://auth.dev.jonsoc.com VITE_STRIPE_PUBLISHABLE_KEY=pk_test_51RtuLNE7fOCwHSD4mewwzFejyytjdGoSDK7CAvhbffwaZnPbNb2rwJICw6LTOXCmWO320fSNXvb5NzI08RZVkAxd00syfqrW7t bun sst shell --stage=dev bun dev",
+    "build": "./script/generate-sitemap.ts && vite build && ../../jonsoc/script/schema.ts ./.output/public/config.json",
+    "start": "vite start"
+  },
+  "dependencies": {
+    "@cloudflare/vite-plugin": "1.15.2",
+    "@ibm/plex": "6.4.1",
+    "@jsx-email/render": "1.1.1",
+    "@kobalte/core": "catalog:",
+    "@openauthjs/openauth": "catalog:",
+    "@jonsoc/console-core": "workspace:*",
+    "@jonsoc/console-mail": "workspace:*",
+    "@jonsoc/console-resource": "workspace:*",
+    "@jonsoc/ui": "workspace:*",
+    "@smithy/eventstream-codec": "4.2.7",
+    "@smithy/util-utf8": "4.2.0",
+    "@solidjs/meta": "catalog:",
+    "@solidjs/router": "catalog:",
+    "@solidjs/start": "catalog:",
+    "@stripe/stripe-js": "8.6.1",
+    "chart.js": "4.5.1",
+    "nitro": "3.0.1-alpha.1",
+    "solid-js": "catalog:",
+    "solid-list": "0.3.0",
+    "solid-stripe": "0.8.1",
+    "vite": "catalog:",
+    "zod": "catalog:"
+  },
+  "devDependencies": {
+    "@typescript/native-preview": "catalog:",
+    "@webgpu/types": "0.1.54",
+    "typescript": "catalog:",
+    "wrangler": "4.50.0"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/public/apple-touch-icon-v3.png

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/apple-touch-icon-v3.png

package/public/apple-touch-icon.png

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/apple-touch-icon.png

package/public/email

@@ -0,0 +1 @@
+../../mail/emails/templates/static

package/public/favicon-96x96-v3.png

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/favicon-96x96-v3.png

package/public/favicon-96x96.png

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/favicon-96x96.png

package/public/favicon-v3.ico

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/favicon-v3.ico

package/public/favicon-v3.svg

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/favicon-v3.svg

package/public/favicon.ico

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/favicon.ico

package/public/favicon.svg

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/favicon.svg

package/public/robots.txt

@@ -0,0 +1,6 @@
+User-agent: *
+Allow: /
+
+# Disallow shared content pages
+Disallow: /s/
+Disallow: /share/

package/public/site.webmanifest

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/site.webmanifest

package/public/social-share-black.png

@@ -0,0 +1 @@
+../../../ui/src/assets/images/social-share-black.png

package/public/social-share-zen.png

@@ -0,0 +1 @@
+../../../ui/src/assets/images/social-share-zen.png

package/public/social-share.png

@@ -0,0 +1 @@
+../../../ui/src/assets/images/social-share.png

package/public/theme.json

@@ -0,0 +1,182 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "properties": {
+    "$schema": {
+      "type": "string",
+      "description": "JSON schema reference for configuration validation"
+    },
+    "defs": {
+      "type": "object",
+      "description": "Color definitions that can be referenced in the theme",
+      "patternProperties": {
+        "^[a-zA-Z][a-zA-Z0-9_]*$": {
+          "oneOf": [
+            {
+              "type": "string",
+              "pattern": "^#[0-9a-fA-F]{6}$",
+              "description": "Hex color value"
+            },
+            {
+              "type": "integer",
+              "minimum": 0,
+              "maximum": 255,
+              "description": "ANSI color code (0-255)"
+            },
+            {
+              "type": "string",
+              "enum": ["none"],
+              "description": "No color (uses terminal default)"
+            }
+          ]
+        }
+      },
+      "additionalProperties": false
+    },
+    "theme": {
+      "type": "object",
+      "description": "Theme color definitions",
+      "properties": {
+        "primary": { "$ref": "#/definitions/colorValue" },
+        "secondary": { "$ref": "#/definitions/colorValue" },
+        "accent": { "$ref": "#/definitions/colorValue" },
+        "error": { "$ref": "#/definitions/colorValue" },
+        "warning": { "$ref": "#/definitions/colorValue" },
+        "success": { "$ref": "#/definitions/colorValue" },
+        "info": { "$ref": "#/definitions/colorValue" },
+        "text": { "$ref": "#/definitions/colorValue" },
+        "textMuted": { "$ref": "#/definitions/colorValue" },
+        "background": { "$ref": "#/definitions/colorValue" },
+        "backgroundPanel": { "$ref": "#/definitions/colorValue" },
+        "backgroundElement": { "$ref": "#/definitions/colorValue" },
+        "border": { "$ref": "#/definitions/colorValue" },
+        "borderActive": { "$ref": "#/definitions/colorValue" },
+        "borderSubtle": { "$ref": "#/definitions/colorValue" },
+        "diffAdded": { "$ref": "#/definitions/colorValue" },
+        "diffRemoved": { "$ref": "#/definitions/colorValue" },
+        "diffContext": { "$ref": "#/definitions/colorValue" },
+        "diffHunkHeader": { "$ref": "#/definitions/colorValue" },
+        "diffHighlightAdded": { "$ref": "#/definitions/colorValue" },
+        "diffHighlightRemoved": { "$ref": "#/definitions/colorValue" },
+        "diffAddedBg": { "$ref": "#/definitions/colorValue" },
+        "diffRemovedBg": { "$ref": "#/definitions/colorValue" },
+        "diffContextBg": { "$ref": "#/definitions/colorValue" },
+        "diffLineNumber": { "$ref": "#/definitions/colorValue" },
+        "diffAddedLineNumberBg": { "$ref": "#/definitions/colorValue" },
+        "diffRemovedLineNumberBg": { "$ref": "#/definitions/colorValue" },
+        "markdownText": { "$ref": "#/definitions/colorValue" },
+        "markdownHeading": { "$ref": "#/definitions/colorValue" },
+        "markdownLink": { "$ref": "#/definitions/colorValue" },
+        "markdownLinkText": { "$ref": "#/definitions/colorValue" },
+        "markdownCode": { "$ref": "#/definitions/colorValue" },
+        "markdownBlockQuote": { "$ref": "#/definitions/colorValue" },
+        "markdownEmph": { "$ref": "#/definitions/colorValue" },
+        "markdownStrong": { "$ref": "#/definitions/colorValue" },
+        "markdownHorizontalRule": { "$ref": "#/definitions/colorValue" },
+        "markdownListItem": { "$ref": "#/definitions/colorValue" },
+        "markdownListEnumeration": { "$ref": "#/definitions/colorValue" },
+        "markdownImage": { "$ref": "#/definitions/colorValue" },
+        "markdownImageText": { "$ref": "#/definitions/colorValue" },
+        "markdownCodeBlock": { "$ref": "#/definitions/colorValue" },
+        "syntaxComment": { "$ref": "#/definitions/colorValue" },
+        "syntaxKeyword": { "$ref": "#/definitions/colorValue" },
+        "syntaxFunction": { "$ref": "#/definitions/colorValue" },
+        "syntaxVariable": { "$ref": "#/definitions/colorValue" },
+        "syntaxString": { "$ref": "#/definitions/colorValue" },
+        "syntaxNumber": { "$ref": "#/definitions/colorValue" },
+        "syntaxType": { "$ref": "#/definitions/colorValue" },
+        "syntaxOperator": { "$ref": "#/definitions/colorValue" },
+        "syntaxPunctuation": { "$ref": "#/definitions/colorValue" }
+      },
+      "required": ["primary", "secondary", "accent", "text", "textMuted", "background"],
+      "additionalProperties": false
+    }
+  },
+  "required": ["theme"],
+  "additionalProperties": false,
+  "definitions": {
+    "colorValue": {
+      "oneOf": [
+        {
+          "type": "string",
+          "pattern": "^#[0-9a-fA-F]{6}$",
+          "description": "Hex color value (same for dark and light)"
+        },
+        {
+          "type": "integer",
+          "minimum": 0,
+          "maximum": 255,
+          "description": "ANSI color code (0-255, same for dark and light)"
+        },
+        {
+          "type": "string",
+          "enum": ["none"],
+          "description": "No color (uses terminal default)"
+        },
+        {
+          "type": "string",
+          "pattern": "^[a-zA-Z][a-zA-Z0-9_]*$",
+          "description": "Reference to another color in the theme or defs"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "dark": {
+              "oneOf": [
+                {
+                  "type": "string",
+                  "pattern": "^#[0-9a-fA-F]{6}$",
+                  "description": "Hex color value for dark mode"
+                },
+                {
+                  "type": "integer",
+                  "minimum": 0,
+                  "maximum": 255,
+                  "description": "ANSI color code for dark mode"
+                },
+                {
+                  "type": "string",
+                  "enum": ["none"],
+                  "description": "No color (uses terminal default)"
+                },
+                {
+                  "type": "string",
+                  "pattern": "^[a-zA-Z][a-zA-Z0-9_]*$",
+                  "description": "Reference to another color for dark mode"
+                }
+              ]
+            },
+            "light": {
+              "oneOf": [
+                {
+                  "type": "string",
+                  "pattern": "^#[0-9a-fA-F]{6}$",
+                  "description": "Hex color value for light mode"
+                },
+                {
+                  "type": "integer",
+                  "minimum": 0,
+                  "maximum": 255,
+                  "description": "ANSI color code for light mode"
+                },
+                {
+                  "type": "string",
+                  "enum": ["none"],
+                  "description": "No color (uses terminal default)"
+                },
+                {
+                  "type": "string",
+                  "pattern": "^[a-zA-Z][a-zA-Z0-9_]*$",
+                  "description": "Reference to another color for light mode"
+                }
+              ]
+            }
+          },
+          "required": ["dark", "light"],
+          "additionalProperties": false,
+          "description": "Separate colors for dark and light modes"
+        }
+      ]
+    }
+  }
+}

package/public/web-app-manifest-192x192.png

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/web-app-manifest-192x192.png

package/public/web-app-manifest-512x512.png

@@ -0,0 +1 @@
+../../../ui/src/assets/favicon/web-app-manifest-512x512.png

package/script/generate-sitemap.ts

@@ -0,0 +1,103 @@
+#!/usr/bin/env bun
+import { readdir, writeFile } from "fs/promises"
+import { join, dirname } from "path"
+import { fileURLToPath } from "url"
+import { config } from "../src/config.js"
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const BASE_URL = config.baseUrl
+const PUBLIC_DIR = join(__dirname, "../public")
+const ROUTES_DIR = join(__dirname, "../src/routes")
+const DOCS_DIR = join(__dirname, "../../../web/src/content/docs")
+
+interface SitemapEntry {
+  url: string
+  priority: number
+  changefreq: string
+}
+
+async function getMainRoutes(): Promise<SitemapEntry[]> {
+  const routes: SitemapEntry[] = []
+
+  // Add main static routes
+  const staticRoutes = [
+    { path: "/", priority: 1.0, changefreq: "daily" },
+    { path: "/enterprise", priority: 0.8, changefreq: "weekly" },
+    { path: "/brand", priority: 0.6, changefreq: "monthly" },
+    { path: "/zen", priority: 0.8, changefreq: "weekly" },
+  ]
+
+  for (const route of staticRoutes) {
+    routes.push({
+      url: `${BASE_URL}${route.path}`,
+      priority: route.priority,
+      changefreq: route.changefreq,
+    })
+  }
+
+  return routes
+}
+
+async function getDocsRoutes(): Promise<SitemapEntry[]> {
+  const routes: SitemapEntry[] = []
+
+  try {
+    const files = await readdir(DOCS_DIR)
+
+    for (const file of files) {
+      if (!file.endsWith(".mdx")) continue
+
+      const slug = file.replace(".mdx", "")
+      const path = slug === "index" ? "/docs/" : `/docs/${slug}`
+
+      routes.push({
+        url: `${BASE_URL}${path}`,
+        priority: slug === "index" ? 0.9 : 0.7,
+        changefreq: "weekly",
+      })
+    }
+  } catch (error) {
+    console.error("Error reading docs directory:", error)
+  }
+
+  return routes
+}
+
+function generateSitemapXML(entries: SitemapEntry[]): string {
+  const urls = entries
+    .map(
+      (entry) => `  <url>
+    <loc>${entry.url}</loc>
+    <changefreq>${entry.changefreq}</changefreq>
+    <priority>${entry.priority}</priority>
+  </url>`,
+    )
+    .join("\n")
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${urls}
+</urlset>`
+}
+
+async function main() {
+  console.log("Generating sitemap...")
+
+  const mainRoutes = await getMainRoutes()
+  const docsRoutes = await getDocsRoutes()
+
+  const allRoutes = [...mainRoutes, ...docsRoutes]
+
+  console.log(`Found ${mainRoutes.length} main routes`)
+  console.log(`Found ${docsRoutes.length} docs routes`)
+  console.log(`Total: ${allRoutes.length} routes`)
+
+  const xml = generateSitemapXML(allRoutes)
+
+  const outputPath = join(PUBLIC_DIR, "sitemap.xml")
+  await writeFile(outputPath, xml, "utf-8")
+
+  console.log(`✓ Sitemap generated at ${outputPath}`)
+}
+
+main()

package/src/app.css

@@ -0,0 +1 @@
+@import "./style/index.css";

package/src/app.tsx

@@ -0,0 +1,27 @@
+import { MetaProvider, Title, Meta } from "@solidjs/meta"
+import { Router } from "@solidjs/router"
+import { FileRoutes } from "@solidjs/start/router"
+import { Suspense } from "solid-js"
+import { Favicon } from "@jonsoc/ui/favicon"
+import { Font } from "@jonsoc/ui/font"
+import "@ibm/plex/css/ibm-plex.css"
+import "./app.css"
+
+export default function App() {
+  return (
+    <Router
+      explicitLinks={true}
+      root={(props) => (
+        <MetaProvider>
+          <Title>jonsoc</Title>
+          <Meta name="description" content="JonsOC - The open source coding agent." />
+          <Favicon />
+          <Font />
+          <Suspense>{props.children}</Suspense>
+        </MetaProvider>
+      )}
+    >
+      <FileRoutes />
+    </Router>
+  )
+}

package/src/asset/brand/opencode-logo-dark.svg

@@ -0,0 +1,16 @@
+<svg width="240" height="300" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86283)">
+<mask id="mask0_1401_86283" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
+<path d="M240 0H0V300H240V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86283)">
+<path d="M180 240H60V120H180V240Z" fill="#4B4646"/>
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#F1ECEC"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86283">
+<rect width="240" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/asset/brand/opencode-logo-light.svg

@@ -0,0 +1,16 @@
+<svg width="240" height="300" viewBox="0 0 240 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1401_86274)">
+<mask id="mask0_1401_86274" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="240" height="300">
+<path d="M240 0H0V300H240V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1401_86274)">
+<path d="M180 240H60V120H180V240Z" fill="#CFCECD"/>
+<path d="M180 60H60V240H180V60ZM240 300H0V0H240V300Z" fill="#211E1E"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1401_86274">
+<rect width="240" height="300" fill="white"/>
+</clipPath>
+</defs>
+</svg>