agent-canvas 0.1.44 → 0.2.0

package/daemon/client/FileViewer.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState, useContext, useCallback, useRef, useMemo } from "react";
 import { SessionContext } from "#canvas/runtime";
 import type { AnnotationContext } from "#canvas/runtime";
-import { useAnnotations } from "./AnnotationProvider";
-import { wrapRangeWithMark } from "./highlightRange";
+import { useAnnotations } from "@fabrika/canvas-kernel/client";
+import { wrapRangeWithMark } from "@fabrika/annotations";
 import { LANG_MAP } from "../langMap";
-import { generateAnnotationId } from "./utils";
-import { useTextAnnotation } from "./useTextAnnotation";
+import { generateAnnotationId } from "@fabrika/annotations";
+import { useTextAnnotation } from "@fabrika/annotations";
 import { FS_AVAILABLE } from "./clientApi";
 
 /** Walk up from a node to find the parent line div with data-line-num */

package/daemon/client/OverviewView.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useContext, useMemo, useRef, useEffect, useCallback } from "react";
 import { SessionContext } from "#canvas/runtime";
-import { PlanRenderer } from "./PlanRenderer";
+import { PlanRenderer } from "@fabrika/canvas-kernel/client";
 import { ComparePanelRenderer } from "./CompareView";
-import { ActiveViewContext, RevisionContext, type CanvasFileInfo, type RevisionInfo } from "./App";
+import { ActiveViewContext, RevisionContext, type CanvasFileInfo, type RevisionInfo } from "@fabrika/canvas-kernel/client";
 import { extractBlockTree, matchBlocks, buildUnifiedDom } from "./unifiedDiff";
 import { runDomDiff } from "./domDiff";
 

package/daemon/client/RevisionSelect.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef, useContext } from "react";
-import { RevisionContext, RevisionInfo } from "./App";
+import { RevisionContext, RevisionInfo } from "@fabrika/canvas-kernel/client";
 
 /** Format a revision for the trigger button: label or "Round N" */
 function revisionButtonLabel(r: RevisionInfo) {

package/daemon/client/canvas-runtime.ts

@@ -0,0 +1 @@
+export * from "@fabrika/canvas-kernel/runtime";

package/daemon/client/clientApi.ts

@@ -28,6 +28,7 @@ import {
   ENCRYPTION_META,
   type EncryptionMeta,
 } from "./shareCrypto";
+import type { CanvasHost } from "@fabrika/canvas-kernel/client";
 
 declare global {
   interface Window {
@@ -334,3 +335,20 @@ export const FS_AVAILABLE: boolean = !MODE.isShared;
 
 /** Is live WebSocket session updates available? */
 export const WS_AVAILABLE: boolean = !MODE.isShared;
+
+// --- Kernel host binding ----------------------------------------------------
+
+/**
+ * What the kernel's annotation surface needs from this host. agent-canvas
+ * serves canvases in two modes, so these cannot use the kernel's local-only
+ * defaults: shared canvases come from the worker (and may be encrypted).
+ */
+export const canvasHost: CanvasHost = {
+  get sessionId() {
+    return getIdentifier();
+  },
+  isShared: MODE.isShared,
+  fsAvailable: FS_AVAILABLE,
+  uploadUrl,
+  loadCanvasModule,
+};

package/daemon/client/components/index.ts

@@ -1,17 +1,4 @@
-export { Section } from "./Section";
-export { Item, Task } from "./Task";
-export { CodeBlock } from "./CodeBlock";
-export { Callout } from "./Callout";
-export { Note } from "./Note";
-export { Table } from "./Table";
-export { Checklist } from "./Checklist";
-export { Priority } from "./Priority";
-export { FilePreview } from "./FilePreview";
-export { Mermaid } from "./Mermaid";
-export { Diff } from "./Diff";
-export { Choice, MultiChoice } from "./Choice";
-export { UserInput, RangeInput } from "./UserInput";
+// agent-canvas's canvas component set: the kernel's components plus the ones
+// only this host can back (SecretInput needs the daemon's secret endpoints).
+export * from "@fabrika/canvas-kernel/components";
 export { SecretInput } from "./SecretInput";
-export { ImageView } from "./Image";
-export { Markdown } from "./Markdown";
-export { useFeedback } from "#canvas/runtime";

package/daemon/client/styles.css

@@ -1,458 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');
-
-@import "tailwindcss";
-@import "./theme.css";
+/* agent-canvas's Tailwind entry.
+   The kernel's stylesheet brings Tailwind, the theme and the kernel's own
+   @source glob; this adds the globs for the chrome that lives in this host. */
+@import "@fabrika/canvas-kernel/styles.css";
 @source "./**/*.{tsx,ts,jsx,js}";
-
-/* ── Non-theme CSS variables (not used by Tailwind utilities, just custom CSS) ── */
-:root {
-  --color-shadow: rgba(0, 0, 0, 0.25);
-  --color-scrollbar: rgba(255, 248, 240, 0.06);
-  --color-scrollbar-hover: rgba(255, 248, 240, 0.12);
-  --color-folder-fill: rgba(196, 154, 58, 0.15);
-  --color-folder-fill-active: rgba(196, 154, 58, 0.25);
-  --color-folder-stroke: rgba(196, 154, 58, 0.5);
-  --color-folder-stroke-active: #c49a3a;
-  --color-hljs-base: #c4beb7;
-  --color-hljs-keyword: #d2a6ff;
-  --color-hljs-string: #a8cc8c;
-  --color-hljs-comment: #847d75;
-  --color-hljs-number: #e8a87c;
-  --color-hljs-variable: #7ec8e3;
-  --color-hljs-function: #dbc074;
-  --color-hljs-punctuation: #a09a92;
-}
-
-[data-theme="light"] {
-  /* Override Tailwind theme vars */
-  --color-bg-base: #faf5e6;
-  --color-bg-surface: #f3edd8;
-  --color-bg-elevated: #ebe4ce;
-  --color-bg-code: #f0ebd5;
-  --color-bg-input: rgba(80, 60, 10, 0.05);
-  --color-bg-elevated-half: rgba(235, 228, 206, 0.5);
-
-  --color-text-primary: #2a2520;
-  --color-text-secondary: #5a5550;
-  --color-text-tertiary: #9a9390;
-  --color-text-code: #4a4540;
-  --color-text-disabled: #c5c0b8;
-  --color-text-inverse: #faf6ef;
-
-  --color-border-subtle: rgba(80, 60, 30, 0.08);
-  --color-border-medium: rgba(80, 60, 30, 0.10);
-  --color-border-hover: rgba(80, 60, 30, 0.15);
-  --color-border-strong: rgba(80, 60, 30, 0.20);
-
-  --color-accent-green: #3a8a5a;
-  --color-accent-green-muted: rgba(58, 138, 90, 0.10);
-  --color-accent-amber: #a07820;
-  --color-accent-amber-muted: rgba(160, 120, 32, 0.10);
-  --color-accent-red: #b84a4a;
-  --color-accent-red-muted: rgba(184, 74, 74, 0.08);
-  --color-accent-blue: #4a7eb4;
-  --color-accent-blue-muted: rgba(74, 126, 180, 0.08);
-
-  --color-highlight-bg: rgba(200, 160, 30, 0.15);
-  --color-highlight-border: rgba(200, 160, 30, 0.40);
-  --color-highlight-annotation: rgba(200, 160, 30, 0.18);
-  --color-highlight-active: rgba(200, 160, 30, 0.35);
-  --color-highlight-selected: rgba(200, 160, 30, 0.10);
-
-  --color-badge-bg: rgba(160, 120, 32, 0.15);
-  --color-btn-primary: #2a2520;
-  --color-btn-primary-text: #faf6ef;
-
-  /* Override non-theme vars */
-  --color-shadow: rgba(80, 60, 30, 0.10);
-  --color-scrollbar: rgba(80, 60, 30, 0.08);
-  --color-scrollbar-hover: rgba(80, 60, 30, 0.15);
-  --color-folder-fill: rgba(160, 120, 32, 0.12);
-  --color-folder-fill-active: rgba(160, 120, 32, 0.22);
-  --color-folder-stroke: rgba(160, 120, 32, 0.4);
-  --color-folder-stroke-active: #a07820;
-  --color-hljs-base: #4a4540;
-  --color-hljs-keyword: #7c3aed;
-  --color-hljs-string: #2e7d32;
-  --color-hljs-comment: #9a9390;
-  --color-hljs-number: #c45a20;
-  --color-hljs-variable: #1976d2;
-  --color-hljs-function: #8a6d00;
-  --color-hljs-punctuation: #6b6560;
-}
-
-/* ── Base styles ── */
-@layer base {
-  body {
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    background-color: var(--color-bg-base);
-    color: var(--color-text-primary);
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-}
-
-code, pre, .font-mono {
-  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
-}
-
-/* Annotation inline marks */
-mark[data-annotation-id] {
-  background: var(--color-highlight-annotation);
-  border-bottom: 1.5px solid var(--color-highlight-bg);
-  border-radius: 2px;
-  cursor: pointer;
-  transition: background 150ms ease, box-shadow 150ms ease;
-  color: inherit;
-  padding: 1px 0;
-}
-
-mark[data-annotation-id].mark-active {
-  background: var(--color-highlight-active);
-  border-bottom: 2px solid var(--color-highlight-border);
-  box-shadow: 0 0 0 1px var(--color-highlight-border);
-}
-
-@keyframes ann-flash {
-  0%, 100% { background: var(--color-highlight-annotation); }
-  25%, 75% { background: var(--color-highlight-active); }
-}
-
-.ann-flash {
-  animation: ann-flash 0.6s ease 2;
-}
-
-/* Annotation highlight (legacy) */
-.annotation-highlight {
-  background: var(--color-highlight-bg);
-  border-bottom: 2px solid var(--color-highlight-border);
-  border-radius: 2px;
-  cursor: pointer;
-  transition: background 150ms ease;
-}
-
-.annotation-highlight:hover,
-.annotation-highlight.active {
-  background: var(--color-highlight-active);
-}
-
-/* Selection color */
-::selection {
-  background-color: var(--color-highlight-active);
-  color: var(--color-text-primary);
-}
-
-/* Focus ring */
-*:focus-visible {
-  outline: 2px solid var(--color-accent-blue);
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-
-textarea:focus-visible {
-  outline: none;
-}
-
-/* Transitions */
-button, a, [role="button"] {
-  transition: all 150ms ease;
-}
-
-/* Scrollbar */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background: var(--color-scrollbar);
-  border-radius: 3px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--color-scrollbar-hover);
-}
-
-/* Diff highlights for compare view */
-.diff-added {
-  background-color: color-mix(in srgb, var(--color-accent-green) 25%, transparent);
-  border-radius: 2px;
-  padding-inline: 1px;
-  padding-block: 1px;
-}
-.diff-removed {
-  background-color: color-mix(in srgb, var(--color-accent-red) 25%, transparent);
-  border-radius: 2px;
-  padding-inline: 1px;
-  padding-block: 1px;
-  text-decoration: line-through;
-  text-decoration-color: var(--color-accent-red);
-}
-
-/* Block-level diff highlights for unified compare view */
-.diff-block-removed {
-  background: color-mix(in srgb, var(--color-accent-red) 8%, transparent);
-  border-left: 3px solid var(--color-accent-red);
-  opacity: 0.7;
-}
-.diff-block-added {
-  background: color-mix(in srgb, var(--color-accent-green) 8%, transparent);
-  border-left: 3px solid var(--color-accent-green);
-}
-.diff-row-removed td {
-  background: color-mix(in srgb, var(--color-accent-red) 10%, transparent);
-  text-decoration: line-through;
-  text-decoration-color: var(--color-accent-red);
-  opacity: 0.6;
-}
-.diff-row-added td {
-  background: color-mix(in srgb, var(--color-accent-green) 10%, transparent);
-}
-.diff-item-removed {
-  background: color-mix(in srgb, var(--color-accent-red) 10%, transparent);
-  text-decoration: line-through;
-  text-decoration-color: var(--color-accent-red);
-  opacity: 0.6;
-}
-.diff-item-added {
-  background: color-mix(in srgb, var(--color-accent-green) 10%, transparent);
-}
-.diff-block-label {
-  position: absolute;
-  top: 4px;
-  right: 8px;
-  font-size: 10px;
-  font-weight: 500;
-  text-transform: uppercase;
-  padding: 1px 6px;
-  border-radius: 3px;
-  pointer-events: none;
-}
-
-/* Plan update flash */
-@keyframes plan-refresh {
-  0%   { opacity: 0.6; }
-  100% { opacity: 1; }
-}
-
-.plan-updated {
-  animation: plan-refresh 300ms ease;
-}
-
-/* Range input styling */
-input[type="range"] {
-  height: 20px;
-  -webkit-appearance: none;
-  appearance: none;
-  background: transparent;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--color-accent-amber);
-  cursor: pointer;
-  border: 2px solid var(--color-bg-base);
-  margin-top: -5px;
-}
-
-input[type="range"]::-moz-range-thumb {
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--color-accent-amber);
-  cursor: pointer;
-  border: 2px solid var(--color-bg-base);
-}
-
-input[type="range"]::-webkit-slider-runnable-track {
-  height: 4px;
-  border-radius: 2px;
-  background: transparent;
-}
-
-input[type="range"]::-moz-range-track {
-  height: 4px;
-  border-radius: 2px;
-  background: transparent;
-}
-
-/* Prose (Markdown component) */
-.prose-canvas {
-  color: var(--color-text-secondary);
-  font-size: 0.875rem;
-  line-height: 1.7;
-}
-
-.prose-canvas h1, .prose-canvas h2, .prose-canvas h3,
-.prose-canvas h4, .prose-canvas h5, .prose-canvas h6 {
-  color: var(--color-text-primary);
-  font-weight: 600;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  line-height: 1.3;
-}
-
-.prose-canvas h1 { font-size: 1.5rem; }
-.prose-canvas h2 { font-size: 1.25rem; }
-.prose-canvas h3 { font-size: 1.1rem; }
-
-.prose-canvas h1:first-child, .prose-canvas h2:first-child,
-.prose-canvas h3:first-child {
-  margin-top: 0;
-}
-
-.prose-canvas p {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-.prose-canvas p:first-child {
-  margin-top: 0;
-}
-
-.prose-canvas a {
-  color: var(--color-accent-blue);
-  text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--color-accent-blue) 40%, transparent);
-  text-underline-offset: 2px;
-}
-
-.prose-canvas a:hover {
-  text-decoration-color: var(--color-accent-blue);
-}
-
-.prose-canvas strong {
-  color: var(--color-text-primary);
-  font-weight: 600;
-}
-
-.prose-canvas code {
-  font-size: 0.8em;
-  background: var(--color-bg-code);
-  color: var(--color-text-code);
-  padding: 0.15em 0.4em;
-  border-radius: 4px;
-}
-
-.prose-canvas pre {
-  background: var(--color-bg-code);
-  border-radius: 8px;
-  padding: 1em;
-  overflow-x: auto;
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-.prose-canvas pre code {
-  background: transparent;
-  padding: 0;
-  font-size: 0.8rem;
-}
-
-.prose-canvas ul, .prose-canvas ol {
-  padding-left: 1.5em;
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.prose-canvas ul { list-style-type: disc; }
-.prose-canvas ol { list-style-type: decimal; }
-.prose-canvas li { margin-top: 0.25em; }
-.prose-canvas li > ul, .prose-canvas li > ol { margin-top: 0.25em; margin-bottom: 0; }
-
-.prose-canvas blockquote {
-  border-left: 3px solid var(--color-border-strong);
-  padding-left: 1em;
-  margin-left: 0;
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-  color: var(--color-text-tertiary);
-}
-
-.prose-canvas hr {
-  border: none;
-  border-top: 1px solid var(--color-border-subtle);
-  margin: 1.5em 0;
-}
-
-.prose-canvas table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-  font-size: 0.8rem;
-}
-
-.prose-canvas th, .prose-canvas td {
-  border: 1px solid var(--color-border-subtle);
-  padding: 0.5em 0.75em;
-  text-align: left;
-}
-
-.prose-canvas th {
-  background: var(--color-bg-elevated);
-  color: var(--color-text-primary);
-  font-weight: 600;
-}
-
-.prose-canvas img {
-  max-width: 100%;
-  border-radius: 8px;
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-/* highlight.js overrides */
-.hljs {
-  background: transparent !important;
-  color: var(--color-hljs-base) !important;
-}
-
-pre code.hljs {
-  padding: 0 !important;
-}
-
-.hljs-keyword, .hljs-selector-tag, .hljs-built_in, .hljs-name, .hljs-tag {
-  color: var(--color-hljs-keyword) !important;
-}
-
-.hljs-string, .hljs-title, .hljs-section, .hljs-attribute, .hljs-literal,
-.hljs-template-tag, .hljs-template-variable, .hljs-type {
-  color: var(--color-hljs-string) !important;
-}
-
-.hljs-comment, .hljs-quote, .hljs-deletion, .hljs-meta {
-  color: var(--color-hljs-comment) !important;
-}
-
-.hljs-number, .hljs-regexp, .hljs-addition {
-  color: var(--color-hljs-number) !important;
-}
-
-.hljs-variable, .hljs-attr {
-  color: var(--color-hljs-variable) !important;
-}
-
-.hljs-function .hljs-title, .hljs-title.function_ {
-  color: var(--color-hljs-function) !important;
-}
-
-.hljs-params {
-  color: var(--color-hljs-base) !important;
-}
-
-.hljs-property {
-  color: var(--color-hljs-variable) !important;
-}
-
-.hljs-punctuation {
-  color: var(--color-hljs-punctuation) !important;
-}

package/daemon/dist/annotations-runtime.js

@@ -0,0 +1 @@
+import{createContext as t,useContext as o}from"react";var i=t(null),r=t(""),e=t({sessionId:"",isShared:!1,fsAvailable:!1,uploadUrl:null});function s(){let n=o(i);if(!n)throw Error("useAnnotations requires an AnnotationProvider");return n}function l(){return o(e)}export{i as AnnotationCtx,e as AnnotationHostContext,r as SessionContext,l as useAnnotationHost,s as useAnnotations};