@oddkin/ai 0.0.0-stage → 1.0.0-beta.1

package/dist/prod/task-plan/task-plan.define.js

@@ -0,0 +1,3 @@
+import { define } from "@oddkin/core/element";
+import { taskPlanDefinition } from "./task-plan.definition.js";
+define(taskPlanDefinition);

package/dist/prod/task-plan/task-plan.definition.js

@@ -0,0 +1,14 @@
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinTaskPlan } from "./task-plan.js";
+import { taskPlanStyles } from "./task-plan.styles.js";
+import { taskPlanTemplate } from "./task-plan.template.js";
+const taskPlanDefinition = compose({
+  name: "odd-task-plan",
+  element: OddkinTaskPlan,
+  template: taskPlanTemplate,
+  styles: [aiBaseStyles, taskPlanStyles]
+});
+export {
+  taskPlanDefinition
+};

package/dist/prod/task-plan/task-plan.js

@@ -0,0 +1,63 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { planInputEvent } from "../events.js";
+import { format, strings } from "../internal/strings.js";
+const TASK_PLAN_STRINGS = {
+  label: "Plan",
+  progress: "{done} of {total} steps done",
+  parallel: "Running in parallel",
+  blocked: "Blocked: {reason}",
+  needsInput: "Needs your input: {request}",
+  respond: "Respond",
+  pending: "Pending",
+  active: "In progress",
+  done: "Done",
+  failed: "Failed",
+  "needs-input": "Needs input",
+  skipped: "Skipped"
+}, SYMBOL = {
+  pending: "\u25CB",
+  active: "\u25D4",
+  done: "\u2713",
+  failed: "\u2715",
+  blocked: "\u2298",
+  skipped: "\u2013",
+  "needs-input": "?"
+};
+class OddkinTaskPlan extends OddkinElement.with({
+  plan: prop.object({ description: "The plan record (replace to update)." }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = { "odd-plan-input-request": planInputEvent };
+  /** @internal */
+  get _strings() {
+    return strings(TASK_PLAN_STRINGS, this.strings);
+  }
+  /** @internal */
+  _status(status, reason) {
+    const t = this._strings;
+    return status === "blocked" ? format(t.blocked, { reason: reason ?? "" }) : t[status];
+  }
+  /** @internal */
+  _symbol(status) {
+    return SYMBOL[status];
+  }
+  /** @internal */
+  _progress() {
+    const steps = this.plan?.steps ?? [];
+    return {
+      done: steps.filter((s) => s.status === "done" || s.status === "skipped").length,
+      total: steps.length
+    };
+  }
+  /** @internal */
+  _respond = (event) => {
+    const stepId = event.currentTarget.dataset.step;
+    this.plan && stepId && this.emit(planInputEvent, { planId: this.plan.planId, stepId });
+  };
+}
+export {
+  OddkinTaskPlan,
+  TASK_PLAN_STRINGS
+};

package/dist/prod/task-plan/task-plan.recipe.js

@@ -0,0 +1,17 @@
+import { defineLayoutRecipe, row, stack } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const taskPlanRecipe = defineLayoutRecipe({
+  name: "task-plan",
+  regions: {
+    base: stack({ gap: token("space.sm") }),
+    progress: row({ gap: token("space.xs"), wrap: !0 }),
+    steps: stack({ gap: token("space.xs") }),
+    tasks: stack({ gap: token("space.xs") }),
+    step: row({ gap: token("space.xs"), align: "baseline" }),
+    task: row({ gap: token("space.xs"), align: "baseline" }),
+    body: stack({ gap: "0.125rem" })
+  }
+});
+export {
+  taskPlanRecipe
+};

package/dist/prod/task-plan/task-plan.recipe.styles.js

@@ -0,0 +1,55 @@
+import { unsafeCSS } from "@oddkin/core/styles";
+const taskPlanRecipeStyles = unsafeCSS(`@layer odd.layout.base {
+  .base {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-sm);
+    min-inline-size: 0;
+  }
+  .progress {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--odd-space-xs);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+  .steps {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+  .tasks {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+  .step {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--odd-space-xs);
+    flex-wrap: nowrap;
+    min-inline-size: 0;
+  }
+  .task {
+    display: flex;
+    flex-direction: row;
+    align-items: baseline;
+    gap: var(--odd-space-xs);
+    flex-wrap: nowrap;
+    min-inline-size: 0;
+  }
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-inline-size: 0;
+  }
+}
+`);
+export {
+  taskPlanRecipeStyles
+};

package/dist/prod/task-plan/task-plan.styles.js

@@ -0,0 +1,53 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { taskPlanRecipeStyles } from "./task-plan.recipe.styles.js";
+const taskPlanStyles = css`
+  ${taskPlanRecipeStyles}
+  .title {
+    margin: 0;
+    font-weight: ${token("font.weight.semibold")};
+  }
+  progress {
+    inline-size: min(100%, 16rem);
+  }
+  .steps,
+  .tasks {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .task {
+    font-size: ${token("font.size.sm")};
+  }
+  .symbol {
+    inline-size: 1.25em;
+    flex: none;
+    text-align: center;
+    color: ${token("color.text.secondary")};
+  }
+  [data-status='done'] > .symbol {
+    color: ${token("color.success.foreground")};
+  }
+  [data-status='failed'] > .symbol,
+  [data-status='blocked'] > .symbol {
+    color: ${token("color.danger.foreground")};
+  }
+  [data-status='active'] > .body > .step-title,
+  [data-status='needs-input'] > .body > .step-title {
+    font-weight: ${token("font.weight.semibold")};
+  }
+  .detail,
+  .request {
+    font-size: ${token("font.size.sm")};
+  }
+  .parallel {
+    margin: ${token("space.2xs")} 0 0;
+  }
+  .tasks {
+    padding-inline-start: ${token("space.xs")};
+    border-inline-start: ${token("border.width.default")} solid ${token("color.border.default")};
+  }
+`;
+export {
+  taskPlanStyles
+};

package/dist/prod/task-plan/task-plan.template.js

@@ -0,0 +1,58 @@
+import { html, repeat } from "@oddkin/core/template";
+import { format } from "../internal/strings.js";
+const taskPlanTemplate = (host) => {
+  const t = host._strings, plan = host.plan;
+  if (!plan)
+    return html``;
+  const { done, total } = host._progress(), progressText = format(t.progress, { done, total });
+  return html`<section class="base" part="base" aria-labelledby="title">
+    <p id="title" class="title">${plan.title || t.label}</p>
+    <div part="progress" class="progress">
+      <progress .max=${Math.max(total, 1)} .value=${done} aria-label=${progressText}></progress>
+      <span class="muted">${progressText}</span>
+    </div>
+    <ol part="steps" class="steps">
+      ${repeat(plan.steps, (step) => step.id, (step) => html`<li class="step" data-status=${step.status}>
+            <span class="symbol" aria-hidden="true">${host._symbol(step.status)}</span>
+            <div class="body">
+              <span class="step-title">${step.title}</span>
+              <span class="visually-hidden">, ${host._status(step.status, step.blocker)}</span>
+              <span class="muted" aria-hidden="true"
+                >${host._status(step.status, step.blocker)}</span
+              >
+              <span class="detail" ?hidden=${!step.detail}>${step.detail ?? ""}</span>
+              ${step.status === "needs-input" && step.inputRequest ? html`<span class="request"
+                      >${format(t.needsInput, { request: step.inputRequest })}
+                      <button
+                        class="text-button"
+                        type="button"
+                        data-step=${step.id}
+                        @click=${host._respond}
+                      >
+                        ${t.respond}
+                      </button></span
+                    >` : null}
+              ${step.tasks?.length ? html`<p class="muted parallel">${t.parallel}</p>
+                      <ul class="tasks">
+                        ${step.tasks.map((task) => html`<li class="task" data-status=${task.status}>
+                              <span class="symbol" aria-hidden="true"
+                                >${host._symbol(task.status)}</span
+                              >
+                              <span
+                                >${task.title}<span class="visually-hidden"
+                                  >, ${host._status(task.status)}</span
+                                ></span
+                              >
+                              <span class="muted" aria-hidden="true"
+                                >${host._status(task.status)}</span
+                              >
+                            </li>`)}
+                      </ul>` : null}
+            </div>
+          </li>`)}
+    </ol>
+  </section>`;
+};
+export {
+  taskPlanTemplate
+};

package/dist/prod/tool-call/index.js

@@ -0,0 +1,11 @@
+import { OddkinToolCall, TOOL_CALL_STRINGS } from "./tool-call.js";
+import { toolCallTemplate } from "./tool-call.template.js";
+import { toolCallStyles } from "./tool-call.styles.js";
+import { toolCallDefinition } from "./tool-call.definition.js";
+export {
+  OddkinToolCall,
+  TOOL_CALL_STRINGS,
+  toolCallDefinition,
+  toolCallStyles,
+  toolCallTemplate
+};

package/dist/prod/tool-call/tool-call.define.js

@@ -0,0 +1,3 @@
+import { define } from "@oddkin/core/element";
+import { toolCallDefinition } from "./tool-call.definition.js";
+define(toolCallDefinition);

package/dist/prod/tool-call/tool-call.definition.js

@@ -0,0 +1,16 @@
+import { compose } from "@oddkin/core/element";
+import { actionApprovalDefinition } from "../action-approval/action-approval.definition.js";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinToolCall } from "./tool-call.js";
+import { toolCallStyles } from "./tool-call.styles.js";
+import { toolCallTemplate } from "./tool-call.template.js";
+const toolCallDefinition = compose({
+  name: "odd-tool-call",
+  element: OddkinToolCall,
+  template: toolCallTemplate,
+  styles: [aiBaseStyles, toolCallStyles],
+  dependencies: { approval: actionApprovalDefinition }
+});
+export {
+  toolCallDefinition
+};

package/dist/prod/tool-call/tool-call.js

@@ -0,0 +1,57 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { toolRetryEvent } from "../events.js";
+import { strings } from "../internal/strings.js";
+const TOOL_CALL_STRINGS = {
+  "input-streaming": "Preparing arguments\u2026",
+  "input-available": "Arguments ready; not run yet",
+  "awaiting-approval": "Waiting for approval",
+  executing: "Running\u2026",
+  "output-available": "Finished",
+  "output-error": "Failed",
+  denied: "Not run: denied",
+  cancelled: "Cancelled",
+  arguments: "Arguments",
+  result: "Result",
+  error: "Error",
+  retry: "Retry",
+  details: "Details"
+};
+class OddkinToolCall extends OddkinElement.with({
+  tool: prop.object({ description: "The tool call record." }),
+  approval: prop.object({
+    description: "Approval bound to this call, when one was requested."
+  }),
+  capabilities: prop.object({ description: "Passed to the nested approval." }),
+  renderOutput: prop.object({
+    description: "Host renderer for results (`{ render(tool) }`)."
+  }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = { "odd-tool-retry": toolRetryEvent };
+  /** @internal */
+  get _strings() {
+    return strings(TOOL_CALL_STRINGS, this.strings);
+  }
+  /** @internal */
+  _retry = () => {
+    const tool = this.tool;
+    tool?.status === "output-error" && tool.retryable && this.emit(toolRetryEvent, { toolCallId: tool.toolCallId });
+  };
+  /** @internal Formatted arguments: streamed text while generating, then the parsed input. */
+  _arguments() {
+    const tool = this.tool;
+    return tool ? tool.input !== void 0 ? JSON.stringify(tool.input, null, 2) : tool.inputText ?? "" : "";
+  }
+  /** @internal */
+  _output() {
+    const tool = this.tool;
+    if (!(!tool || tool.output === void 0))
+      return this.renderOutput?.render(tool) ?? JSON.stringify(tool.output, null, 2);
+  }
+}
+export {
+  OddkinToolCall,
+  TOOL_CALL_STRINGS
+};

package/dist/prod/tool-call/tool-call.recipe.js

@@ -0,0 +1,13 @@
+import { defineLayoutRecipe, row, stack } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const toolCallRecipe = defineLayoutRecipe({
+  name: "tool-call",
+  regions: {
+    summary: row({ gap: token("space.xs"), wrap: !0 }),
+    body: stack({ gap: token("space.xs") }),
+    failure: row({ gap: token("space.xs"), wrap: !0 })
+  }
+});
+export {
+  toolCallRecipe
+};

package/dist/prod/tool-call/tool-call.recipe.styles.js

@@ -0,0 +1,29 @@
+import { unsafeCSS } from "@oddkin/core/styles";
+const toolCallRecipeStyles = unsafeCSS(`@layer odd.layout.base {
+  .summary {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--odd-space-xs);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+  .body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-xs);
+    min-inline-size: 0;
+  }
+  .failure {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--odd-space-xs);
+    flex-wrap: wrap;
+    min-inline-size: 0;
+  }
+}
+`);
+export {
+  toolCallRecipeStyles
+};

package/dist/prod/tool-call/tool-call.styles.js

@@ -0,0 +1,55 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { toolCallRecipeStyles } from "./tool-call.recipe.styles.js";
+const toolCallStyles = css`
+  ${toolCallRecipeStyles}
+  :host {
+    display: grid;
+    gap: ${token("space.xs")};
+  }
+  .base {
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("radius.md")};
+    background: ${token("color.surface.default")};
+  }
+  .summary {
+    min-block-size: ${token("target.min")};
+    padding: ${token("space.xs")} ${token("space.sm")};
+    cursor: pointer;
+  }
+  .name {
+    font-family: ${token("font.family.mono")};
+    font-size: ${token("font.size.sm")};
+    font-weight: ${token("font.weight.semibold")};
+  }
+  .purpose {
+    flex-basis: 100%;
+  }
+  .body {
+    padding: 0 ${token("space.sm")} ${token("space.sm")};
+  }
+  .label {
+    margin: 0 0 ${token("space.2xs")};
+    font-size: ${token("font.size.xs")};
+    font-weight: ${token("font.weight.semibold")};
+    color: ${token("color.text.secondary")};
+  }
+  .code {
+    margin: 0;
+    max-block-size: 16rem;
+    padding: ${token("space.xs")};
+    overflow: auto;
+    border-radius: ${token("radius.sm")};
+    background: ${token("color.surface.sunken")};
+    font-family: ${token("font.family.mono")};
+    font-size: ${token("font.size.xs")};
+    white-space: pre-wrap;
+  }
+  .failure {
+    padding: ${token("space.xs")} ${token("space.sm")};
+    border-block-start: ${token("border.width.default")} solid ${token("color.danger.foreground")};
+  }
+`;
+export {
+  toolCallStyles
+};

package/dist/prod/tool-call/tool-call.template.js

@@ -0,0 +1,46 @@
+import { html } from "@oddkin/core/template";
+const TONE = {
+  "output-available": "success",
+  "output-error": "danger",
+  denied: "danger",
+  executing: "active",
+  "input-streaming": "active",
+  "awaiting-approval": "active"
+}, toolCallTemplate = (host) => {
+  const t = host._strings, tool = host.tool;
+  if (!tool)
+    return html``;
+  const output = host._output(), args = host._arguments();
+  return html`<div part="base" class="base" data-status=${tool.status}>
+      <details class="details">
+        <summary part="summary" class="summary">
+          <span class="name">${tool.title || tool.toolName}</span>
+          <span class="status" data-tone=${TONE[tool.status] ?? ""}>${t[tool.status]}</span>
+          <span class="purpose muted" ?hidden=${!tool.purpose}>${tool.purpose ?? ""}</span>
+        </summary>
+        <div class="body">
+          <div part="arguments" class="section" ?hidden=${!args}>
+            <p class="label">${t.arguments}</p>
+            <pre class="code" tabindex="0">${args}</pre>
+          </div>
+          <div part="result" class="section" ?hidden=${output === void 0}>
+            <p class="label">${t.result}</p>
+            ${typeof output == "string" ? html`<pre class="code" tabindex="0">${output}</pre>` : output}
+          </div>
+        </div>
+      </details>
+      ${tool.status === "output-error" ? html`<div class="failure" role="group" aria-label=${t.error}>
+              <span class="error">${tool.error?.message ?? t["output-error"]}</span>
+              ${tool.retryable ? html`<button class="text-button" type="button" @click=${host._retry}>
+                      ${t.retry}
+                    </button>` : null}
+            </div>` : null}
+    </div>
+    ${host.approval ? html`<odd-action-approval
+            .approval=${host.approval}
+            .capabilities=${host.capabilities}
+          ></odd-action-approval>` : null}`;
+};
+export {
+  toolCallTemplate
+};

package/dist/prod/transcript/index.js

@@ -0,0 +1,11 @@
+import { OddkinTranscript, TRANSCRIPT_STRINGS } from "./transcript.js";
+import { transcriptTemplate } from "./transcript.template.js";
+import { transcriptStyles } from "./transcript.styles.js";
+import { transcriptDefinition } from "./transcript.definition.js";
+export {
+  OddkinTranscript,
+  TRANSCRIPT_STRINGS,
+  transcriptDefinition,
+  transcriptStyles,
+  transcriptTemplate
+};

package/dist/prod/transcript/transcript.define.js

@@ -0,0 +1,3 @@
+import { define } from "@oddkin/core/element";
+import { transcriptDefinition } from "./transcript.definition.js";
+define(transcriptDefinition);

package/dist/prod/transcript/transcript.definition.js

@@ -0,0 +1,14 @@
+import { compose } from "@oddkin/core/element";
+import { aiBaseStyles } from "../internal/base.styles.js";
+import { OddkinTranscript } from "./transcript.js";
+import { transcriptStyles } from "./transcript.styles.js";
+import { transcriptTemplate } from "./transcript.template.js";
+const transcriptDefinition = compose({
+  name: "odd-transcript",
+  element: OddkinTranscript,
+  template: transcriptTemplate,
+  styles: [aiBaseStyles, transcriptStyles]
+});
+export {
+  transcriptDefinition
+};

package/dist/prod/transcript/transcript.js

@@ -0,0 +1,32 @@
+import { OddkinElement, prop } from "@oddkin/core/element";
+import { transcriptChangeEvent } from "../events.js";
+import { strings } from "../internal/strings.js";
+const TRANSCRIPT_STRINGS = {
+  label: "Transcript",
+  listening: "Hearing",
+  empty: "Nothing transcribed yet.",
+  edit: "Edit segment {index}"
+};
+class OddkinTranscript extends OddkinElement.with({
+  segments: prop.array({ description: "Final (and interim) segments." }),
+  interim: prop.string({ default: "", attribute: !1, description: "Current interim text." }),
+  editable: prop.boolean({ reflect: !0, description: "Final segments can be corrected." }),
+  strings: prop.object({
+    description: "Localized string overrides."
+  })
+}) {
+  static events = { "odd-transcript-change": transcriptChangeEvent };
+  /** @internal */
+  get _strings() {
+    return strings(TRANSCRIPT_STRINGS, this.strings);
+  }
+  /** @internal */
+  _onEdit = (event) => {
+    const area = event.target, segmentId = area.dataset.id;
+    segmentId && this.emit(transcriptChangeEvent, { segmentId, text: area.value });
+  };
+}
+export {
+  OddkinTranscript,
+  TRANSCRIPT_STRINGS
+};

package/dist/prod/transcript/transcript.recipe.js

@@ -0,0 +1,9 @@
+import { defineLayoutRecipe, stack } from "@oddkin/components/layout";
+import { token } from "@oddkin/tokens/refs";
+const transcriptRecipe = defineLayoutRecipe({
+  name: "transcript",
+  regions: { list: stack({ gap: token("space.2xs") }) }
+});
+export {
+  transcriptRecipe
+};

package/dist/prod/transcript/transcript.recipe.styles.js

@@ -0,0 +1,13 @@
+import { unsafeCSS } from "@oddkin/core/styles";
+const transcriptRecipeStyles = unsafeCSS(`@layer odd.layout.base {
+  .list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--odd-space-2xs);
+    min-inline-size: 0;
+  }
+}
+`);
+export {
+  transcriptRecipeStyles
+};

package/dist/prod/transcript/transcript.styles.js

@@ -0,0 +1,30 @@
+import { css } from "@oddkin/core/styles";
+import { token } from "@oddkin/tokens/refs";
+import { transcriptRecipeStyles } from "./transcript.recipe.styles.js";
+const transcriptStyles = css`
+  ${transcriptRecipeStyles}
+  p {
+    margin: 0;
+  }
+  .list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  textarea {
+    inline-size: 100%;
+    padding: ${token("space.2xs")} ${token("space.xs")};
+    border: ${token("border.width.default")} solid ${token("color.border.default")};
+    border-radius: ${token("control.radius")};
+    background: ${token("color.surface.default")};
+    color: inherit;
+    font: inherit;
+  }
+  .interim {
+    color: ${token("color.text.secondary")};
+    font-style: italic;
+  }
+`;
+export {
+  transcriptStyles
+};

package/dist/prod/transcript/transcript.template.js

@@ -0,0 +1,26 @@
+import { html, repeat } from "@oddkin/core/template";
+import { live } from "@oddkin/core/helpers/live";
+import { format } from "../internal/strings.js";
+const transcriptTemplate = (host) => {
+  const t = host._strings, editable = host.editable, finals = host.segments.filter((s) => s.final), interim = host.interim || host.segments.filter((s) => !s.final).map((s) => s.text).join(" ");
+  return html`<div class="base" role="group" aria-label=${t.label}>
+    <p class="muted" ?hidden=${!!finals.length || !!interim}>${t.empty}</p>
+    <ol part="list" class="list" ?hidden=${!finals.length}>
+      ${repeat(finals, (s) => s.id, (s, i) => html`<li class="segment">
+            ${editable ? html`<textarea
+                    rows="2"
+                    data-id=${s.id}
+                    aria-label=${format(t.edit, { index: i + 1 })}
+                    .value=${live(s.text)}
+                    @change=${host._onEdit}
+                  ></textarea>` : html`<span>${s.text}</span>`}
+          </li>`)}
+    </ol>
+    <p part="interim" class="interim" ?hidden=${!interim}>
+      <span class="muted">${t.listening}: </span>${interim}
+    </p>
+  </div>`;
+};
+export {
+  transcriptTemplate
+};

package/dist/prod/usage-meter/index.js

@@ -0,0 +1,11 @@
+import { OddkinUsageMeter, USAGE_STRINGS } from "./usage-meter.js";
+import { usageMeterTemplate } from "./usage-meter.template.js";
+import { usageMeterStyles } from "./usage-meter.styles.js";
+import { usageMeterDefinition } from "./usage-meter.definition.js";
+export {
+  OddkinUsageMeter,
+  USAGE_STRINGS,
+  usageMeterDefinition,
+  usageMeterStyles,
+  usageMeterTemplate
+};