@noodleseed/agent-kit 0.14.0 → 0.15.0

package/skills/claude-code/examples/food-ordering/src/views/widget-style.css

@@ -0,0 +1,682 @@
+:root {
+  color-scheme: light dark;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  --nw-bg: #ffffff;
+  --nw-surface: #f7f7f5;
+  --nw-surface-strong: #ffffff;
+  --nw-text: #1f2328;
+  --nw-muted: #677079;
+  --nw-border: #d9dee3;
+  --nw-accent: #0f8f5f;
+  --nw-accent-strong: #047857;
+  --nw-accent-soft: #e8f7ef;
+  --nw-info: #1d6feb;
+  --nw-info-soft: #eaf2ff;
+  --nw-warn: #b7791f;
+  --nw-danger: #c2410c;
+  --nw-shadow: 0 18px 50px rgb(15 23 42 / 12%);
+  --nw-radius: 8px;
+}
+
+.dark,
+[data-theme="dark"] {
+  --nw-bg: #111820;
+  --nw-surface: #16212a;
+  --nw-surface-strong: #101820;
+  --nw-text: #f4f7f8;
+  --nw-muted: #a4b0ba;
+  --nw-border: #33414c;
+  --nw-accent: #25c385;
+  --nw-accent-strong: #19a974;
+  --nw-accent-soft: #123a2b;
+  --nw-info: #4c9aff;
+  --nw-info-soft: #132b4d;
+  --nw-warn: #f0b35b;
+  --nw-danger: #fb7b54;
+  --nw-shadow: 0 18px 50px rgb(0 0 0 / 28%);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--nw-bg);
+  color: var(--nw-text);
+}
+
+button,
+input,
+select {
+  font: inherit;
+}
+
+.nw-shell {
+  min-height: 100vh;
+  padding: 14px;
+  background: var(--nw-bg);
+  color: var(--nw-text);
+}
+
+.nw-card {
+  width: min(100%, 560px);
+  margin: 0 auto;
+  border: 1px solid var(--nw-border);
+  border-radius: var(--nw-radius);
+  background: var(--nw-surface-strong);
+  box-shadow: var(--nw-shadow);
+  overflow: hidden;
+}
+
+.nw-card-wide {
+  width: min(100%, 720px);
+}
+
+.nsr-card {
+  width: min(100%, 560px);
+  margin: 0 auto;
+  border: 1px solid var(--nw-border);
+  border-radius: var(--nw-radius);
+  background: var(--nw-surface-strong);
+  box-shadow: var(--nw-shadow);
+  overflow: hidden;
+}
+
+.nsr-card-wide {
+  width: min(100%, 720px);
+}
+
+.nw-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px;
+  border-bottom: 1px solid var(--nw-border);
+}
+
+.nsr-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px;
+  border-bottom: 1px solid var(--nw-border);
+}
+
+.nw-icon {
+  display: inline-grid;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 8px;
+  background: linear-gradient(145deg, var(--nw-accent), var(--nw-accent-strong));
+  color: white;
+}
+
+.nsr-icon {
+  display: inline-grid;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+  place-items: center;
+  border-radius: 8px;
+  background: linear-gradient(145deg, var(--nw-accent), var(--nw-accent-strong));
+  color: white;
+}
+
+.nw-icon svg,
+.nsr-icon svg,
+.nw-button svg,
+.nw-meta svg {
+  width: 16px;
+  height: 16px;
+  stroke: currentColor;
+  stroke-width: 2;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.nw-title-block {
+  min-width: 0;
+  flex: 1;
+}
+
+.nsr-title-block {
+  min-width: 0;
+  flex: 1;
+}
+
+.nw-title {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.nsr-title {
+  margin: 0;
+  font-size: 16px;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.nw-subtitle {
+  margin: 4px 0 0;
+  color: var(--nw-muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.nsr-subtitle {
+  margin: 4px 0 0;
+  color: var(--nw-muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.nw-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+  padding: 3px 9px;
+  border: 1px solid var(--nw-border);
+  border-radius: 999px;
+  background: var(--nw-surface);
+  color: var(--nw-text);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.nsr-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+  padding: 3px 9px;
+  border: 1px solid var(--nw-border);
+  border-radius: 999px;
+  background: var(--nw-surface);
+  color: var(--nw-text);
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.nw-chip::before {
+  width: 7px;
+  height: 7px;
+  border-radius: 99px;
+  background: var(--nw-accent);
+  content: "";
+}
+
+.nsr-chip::before {
+  width: 7px;
+  height: 7px;
+  border-radius: 99px;
+  background: var(--nw-accent);
+  content: "";
+}
+
+.nw-tabs {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 1px;
+  border-bottom: 1px solid var(--nw-border);
+  background: var(--nw-border);
+}
+
+.nsr-tabs {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 1px;
+  border-bottom: 1px solid var(--nw-border);
+  background: var(--nw-border);
+}
+
+.nw-tab {
+  min-width: 0;
+  min-height: 34px;
+  border: 0;
+  background: var(--nw-surface-strong);
+  color: var(--nw-muted);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: capitalize;
+  cursor: pointer;
+}
+
+.nsr-tab {
+  min-width: 0;
+  min-height: 34px;
+  border: 0;
+  background: var(--nw-surface-strong);
+  color: var(--nw-muted);
+  font-size: 12px;
+  font-weight: 700;
+  text-transform: capitalize;
+  cursor: pointer;
+}
+
+.nw-tab[aria-current="step"] {
+  color: var(--nw-text);
+  background: var(--nw-accent-soft);
+}
+
+.nsr-tab[aria-current="step"] {
+  color: var(--nw-text);
+  background: var(--nw-accent-soft);
+}
+
+.nw-body {
+  display: grid;
+  gap: 14px;
+  padding: 14px;
+}
+
+.nw-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.75fr);
+  gap: 14px;
+}
+
+.nw-section-title {
+  margin: 0 0 8px;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.nw-section-head {
+  display: grid;
+  gap: 2px;
+}
+
+.nw-section-detail {
+  margin: 0;
+  color: var(--nw-muted);
+  font-size: 12px;
+}
+
+.nw-menu-list,
+.nw-summary-list,
+.nw-feature-list {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.nw-menu-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 10px;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--nw-border);
+  border-radius: var(--nw-radius);
+  background: var(--nw-bg);
+  color: var(--nw-text);
+  text-align: left;
+  cursor: pointer;
+}
+
+.nw-menu-item[aria-pressed="true"] {
+  border-color: var(--nw-accent);
+  background: var(--nw-accent-soft);
+}
+
+.nw-menu-name,
+.nw-feature-name {
+  display: block;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.nw-menu-desc,
+.nw-feature-desc {
+  display: block;
+  margin-top: 3px;
+  color: var(--nw-muted);
+  font-size: 12px;
+  line-height: 1.35;
+}
+
+.nw-price {
+  align-self: center;
+  color: var(--nw-text);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.nw-status {
+  align-self: center;
+  color: var(--nw-muted);
+  font-size: 12px;
+  font-weight: 800;
+  white-space: nowrap;
+}
+
+.nw-status-ok {
+  color: var(--nw-accent-strong);
+}
+
+.nw-field-grid {
+  display: grid;
+  grid-template-columns: 1fr 120px;
+  gap: 10px;
+}
+
+.nw-field {
+  display: grid;
+  gap: 5px;
+  color: var(--nw-muted);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.nsr-field-label {
+  color: var(--nw-muted);
+}
+
+.nsr-stepper {
+  display: grid;
+  grid-template-columns: 34px minmax(42px, 1fr) 34px;
+  width: 100%;
+  min-height: 34px;
+  border: 1px solid var(--nw-border);
+  border-radius: 7px;
+  overflow: hidden;
+  background: var(--nw-bg);
+}
+
+.nsr-stepper button {
+  border: 0;
+  background: var(--nw-surface);
+  color: var(--nw-text);
+  cursor: pointer;
+}
+
+.nsr-stepper button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.nsr-stepper-value {
+  display: grid;
+  place-items: center;
+  color: var(--nw-text);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.nw-input,
+.nw-select {
+  min-width: 0;
+  width: 100%;
+  min-height: 34px;
+  padding: 7px 9px;
+  border: 1px solid var(--nw-border);
+  border-radius: 7px;
+  background: var(--nw-bg);
+  color: var(--nw-text);
+  outline: none;
+}
+
+.nw-input:focus,
+.nw-select:focus,
+.nw-button:focus-visible,
+.nw-menu-item:focus-visible {
+  border-color: var(--nw-info);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nw-info) 24%, transparent);
+}
+
+.nw-modifier-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.nw-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px;
+  border: 1px solid var(--nw-border);
+  border-radius: 7px;
+  background: var(--nw-bg);
+  color: var(--nw-text);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.nsr-choice {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px;
+  border: 1px solid var(--nw-border);
+  border-radius: 7px;
+  background: var(--nw-bg);
+  color: var(--nw-text);
+  font-size: 12px;
+  font-weight: 650;
+}
+
+.nw-summary {
+  display: grid;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid var(--nw-border);
+  border-radius: var(--nw-radius);
+  background: var(--nw-surface);
+}
+
+.nw-summary-compact {
+  align-self: end;
+}
+
+.nw-summary-row {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid color-mix(in srgb, var(--nw-border) 70%, transparent);
+}
+
+.nw-summary-row:last-child {
+  padding-bottom: 0;
+  border-bottom: 0;
+}
+
+.nw-summary-row dt {
+  color: var(--nw-muted);
+  font-size: 12px;
+}
+
+.nw-line-note {
+  display: block;
+  margin-top: 2px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.nw-summary-row dd {
+  margin: 0;
+  text-align: right;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.nw-total dd {
+  font-size: 18px;
+}
+
+.nw-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.nsr-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.nw-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 8px 12px;
+  border: 1px solid var(--nw-border);
+  border-radius: 7px;
+  background: var(--nw-bg);
+  color: var(--nw-text);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.nw-button-primary {
+  border-color: var(--nw-accent-strong);
+  background: linear-gradient(145deg, var(--nw-accent), var(--nw-accent-strong));
+  color: white;
+}
+
+.nw-button-info {
+  border-color: var(--nw-info);
+  background: var(--nw-info);
+  color: white;
+}
+
+.nw-button:disabled {
+  cursor: wait;
+  opacity: 0.65;
+}
+
+.nw-note {
+  margin: 0;
+  padding: 10px;
+  border: 1px solid var(--nw-border);
+  border-radius: var(--nw-radius);
+  background: var(--nw-surface);
+  color: var(--nw-muted);
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.nw-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--nw-border);
+  color: var(--nw-muted);
+  font-size: 12px;
+}
+
+.nsr-footer {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 14px;
+  border-top: 1px solid var(--nw-border);
+  color: var(--nw-muted);
+  font-size: 12px;
+}
+
+.nw-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.nw-feature {
+  display: grid;
+  grid-template-columns: 24px minmax(0, 1fr);
+  gap: 10px;
+  padding: 10px;
+  border: 1px solid var(--nw-border);
+  border-radius: var(--nw-radius);
+  background: var(--nw-bg);
+}
+
+.nw-check {
+  display: inline-grid;
+  width: 22px;
+  height: 22px;
+  place-items: center;
+  border-radius: 6px;
+  background: var(--nw-accent);
+  color: white;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.nw-check svg {
+  width: 14px;
+  height: 14px;
+  stroke: currentColor;
+  stroke-width: 3;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (max-width: 560px) {
+  .nw-shell {
+    padding: 10px;
+  }
+
+  .nw-grid,
+  .nw-field-grid,
+  .nw-modifier-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .nw-tabs {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .nsr-tabs {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .nw-header {
+    align-items: flex-start;
+  }
+
+  .nsr-header {
+    align-items: flex-start;
+  }
+
+  .nw-chip {
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nsr-chip {
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .nw-button {
+    flex: 1 1 140px;
+  }
+}

package/skills/claude-code/examples/food-ordering/test/server.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import app from '../src/server.js';
+
+describe('food-ordering example', () => {
+  it('exports a Noodle server definition', () => {
+    expect(typeof app.toManifest).toBe('function');
+  });
+
+  it('emits a complete ordering app manifest with cart state and app-only helpers', async () => {
+    const manifest = (await app.toManifest()) as {
+      server: {
+        name: string;
+      };
+      handoff?: { allowedDomains?: string[] };
+      state?: { handles?: Record<string, { kind: string; scope: string }> };
+      connectors?: Record<string, { id: string; version: string }>;
+      tools: Array<{
+        name: string;
+        visibility?: string[];
+        output?: unknown;
+      }>;
+      widgets?: Array<{
+        name: string;
+        tool: string;
+        view?: { component?: string; entry?: string };
+      }>;
+    };
+
+    expect(manifest.server.name).toBe('food_ordering');
+    expect(manifest.state?.handles?.cart).toMatchObject({
+      kind: 'cart',
+      scope: 'caller',
+    });
+    expect(manifest.handoff?.allowedDomains).toEqual(['https://orders.example.com']);
+    expect(manifest.connectors?.state).toEqual({ id: 'noodle_state', version: '1.0.0' });
+
+    const tools = new Map(manifest.tools.map((tool) => [tool.name, tool]));
+    expect(manifest.widgets?.find((widget) => widget.tool === 'open_ordering')?.view).toMatchObject(
+      {
+        component: 'ordering-flow',
+        entry: './views/ordering-flow.tsx',
+      },
+    );
+    for (const helper of [
+      'search_stores',
+      'load_menu',
+      'load_item',
+      'read_cart',
+      'sync_cart',
+      'prepare_checkout',
+    ]) {
+      expect(tools.get(helper)?.visibility).toEqual(['app']);
+    }
+    expect(JSON.stringify(tools.get('open_ordering'))).toContain('featuredItems');
+    expect(JSON.stringify(tools.get('sync_cart'))).toContain('revision');
+    expect(manifest.widgets?.map((widget) => widget.name)).toContain('capabilities_card');
+  });
+});