cacheplane
diff --git a/‎apps/website/src/components/landing/SocialProof.tsx‎
Lines changed: 63 additions & 0 deletions b/‎apps/website/src/components/landing/SocialProof.tsx‎
Lines changed: 63 additions & 0 deletions
diff --git a/‎cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts‎
Lines changed: 13 additions & 0 deletions b/‎cockpit/deep-agents/filesystem/angular/src/app/filesystem.component.ts‎
Lines changed: 13 additions & 0 deletions
diff --git a/‎cockpit/deep-agents/planning/angular/src/app/planning.component.ts‎
Lines changed: 90 additions & 0 deletions b/‎cockpit/deep-agents/planning/angular/src/app/planning.component.ts‎
Lines changed: 90 additions & 0 deletions
diff --git a/‎cockpit/deep-agents/planning/angular/src/environments/environment.development.ts‎
Lines changed: 3 additions & 0 deletions b/‎cockpit/deep-agents/planning/angular/src/environments/environment.development.ts‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎cockpit/deep-agents/planning/angular/src/environments/environment.ts‎
Lines changed: 3 additions & 0 deletions b/‎cockpit/deep-agents/planning/angular/src/environments/environment.ts‎
Lines changed: 3 additions & 0 deletions
diff --git a/‎cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts‎
Lines changed: 13 additions & 0 deletions b/‎cockpit/deep-agents/sandboxes/angular/src/app/sandboxes.component.ts‎
Lines changed: 13 additions & 0 deletions
@@ -2,11 +2,14 @@
 import { motion } from 'framer-motion';
 import { tokens } from '../../../lib/design-tokens';
 
+<<<<<<< HEAD
+=======
 /**
  * Companies displayed as social proof — sourced from the LangChain ecosystem.
  * These represent the types of companies building with LangChain/LangGraph,
  * the same ecosystem Angular Agent Framework serves.
  */
+>>>>>>> origin/main
 const COMPANIES = [
   'Klarna',
   'Elastic',
@@ -19,15 +22,23 @@ const COMPANIES = [
   'Cisco',
   'Workday',
   'ServiceNow',
+<<<<<<< HEAD
+  'Monday',
+=======
   'Monday.com',
+>>>>>>> origin/main
 ];
 
 /** Duplicate for seamless infinite scroll */
 const SCROLL_ITEMS = [...COMPANIES, ...COMPANIES];
 
 export function SocialProof() {
   return (
+<<<<<<< HEAD
+    <section style={{ padding: '36px 0', overflow: 'hidden' }}>
+=======
     <section style={{ padding: '24px 0', overflow: 'hidden' }}>
+>>>>>>> origin/main
       <motion.div
         initial={{ opacity: 0 }}
         whileInView={{ opacity: 1 }}
@@ -38,27 +49,54 @@ export function SocialProof() {
         <p style={{
           textAlign: 'center',
           fontFamily: 'var(--font-mono,"JetBrains Mono",monospace)',
+<<<<<<< HEAD
+          fontSize: '0.62rem',
+=======
           fontSize: '0.6rem',
+>>>>>>> origin/main
           textTransform: 'uppercase',
           letterSpacing: '0.12em',
           fontWeight: 700,
           color: tokens.colors.textMuted,
+<<<<<<< HEAD
+          marginBottom: 22,
+=======
           marginBottom: 16,
+>>>>>>> origin/main
         }}>
           Built for teams shipping with LangChain
         </p>
 
         {/* Scrolling logo strip */}
         <div style={{
           position: 'relative',
+<<<<<<< HEAD
+          maxWidth: 1060,
+          margin: '0 auto',
+          borderRadius: 20,
+=======
           maxWidth: 900,
           margin: '0 auto',
           borderRadius: 16,
+>>>>>>> origin/main
           background: tokens.glass.bg,
           backdropFilter: `blur(${tokens.glass.blur})`,
           WebkitBackdropFilter: `blur(${tokens.glass.blur})`,
           border: `1px solid ${tokens.glass.border}`,
           overflow: 'hidden',
+<<<<<<< HEAD
+          padding: '32px 0',
+        }}>
+          {/* Fade edges */}
+          <div style={{
+            position: 'absolute', left: 0, top: 0, bottom: 0, width: 100, zIndex: 1,
+            background: 'linear-gradient(to right, rgba(248,249,252,0.9), transparent)',
+            pointerEvents: 'none',
+          }} />
+          <div style={{
+            position: 'absolute', right: 0, top: 0, bottom: 0, width: 100, zIndex: 1,
+            background: 'linear-gradient(to left, rgba(248,249,252,0.9), transparent)',
+=======
           padding: '16px 0',
         }}>
           {/* Fade edges */}
@@ -70,6 +108,7 @@ export function SocialProof() {
           <div style={{
             position: 'absolute', right: 0, top: 0, bottom: 0, width: 60, zIndex: 1,
             background: 'linear-gradient(to left, rgba(244,240,255,0.95), transparent)',
+>>>>>>> origin/main
             pointerEvents: 'none',
           }} />
 
@@ -79,14 +118,33 @@ export function SocialProof() {
             style={{
               display: 'flex',
               alignItems: 'center',
+<<<<<<< HEAD
+              gap: 72,
+              width: 'max-content',
+              paddingLeft: 48,
+              paddingRight: 48,
+=======
               gap: 48,
               width: 'max-content',
+>>>>>>> origin/main
             }}
           >
             {SCROLL_ITEMS.map((company, i) => (
               <span
                 key={`${company}-${i}`}
                 style={{
+<<<<<<< HEAD
+                  fontFamily: 'var(--font-inter, Inter, system-ui, sans-serif)',
+                  fontSize: 'clamp(20px, 1.6vw, 26px)',
+                  fontWeight: 800,
+                  color: tokens.colors.textPrimary,
+                  opacity: 0.18,
+                  whiteSpace: 'nowrap',
+                  letterSpacing: '-0.02em',
+                  userSelect: 'none',
+                  lineHeight: 1,
+                  padding: '4px 0',
+=======
                   fontFamily: 'var(--font-garamond,"EB Garamond",Georgia,serif)',
                   fontSize: 'clamp(14px, 1.1vw, 17px)',
                   fontWeight: 700,
@@ -95,6 +153,7 @@ export function SocialProof() {
                   opacity: 0.6,
                   letterSpacing: '0.02em',
                   userSelect: 'none',
+>>>>>>> origin/main
                 }}
               >
                 {company}
@@ -110,7 +169,11 @@ export function SocialProof() {
           100% { transform: translateX(-50%); }
         }
         .logo-scroll-track {
+<<<<<<< HEAD
+          animation: logo-scroll 35s linear infinite;
+=======
           animation: logo-scroll 30s linear infinite;
+>>>>>>> origin/main
         }
         .logo-scroll-track:hover {
           animation-play-state: paused;
 
@@ -1,9 +1,15 @@
 import { Component, computed } from '@angular/core';
+<<<<<<< HEAD
+import { ChatComponent } from '@cacheplane/chat';
+import { agent } from '@cacheplane/angular';
+import { environment } from '../environments/environment';
+=======
 import { ChatComponent, views } from '@cacheplane/chat';
 import { signalStateStore } from '@cacheplane/render';
 import { agent } from '@cacheplane/angular';
 import { environment } from '../environments/environment';
 import { FilePreviewComponent } from './views/file-preview.component';
+>>>>>>> origin/main
 
 /**
  * Represents a file operation extracted from agent tool calls.
@@ -32,7 +38,11 @@ interface FileOperation {
   imports: [ChatComponent],
   template: `
     <div class="flex h-screen">
+<<<<<<< HEAD
+      <chat [ref]="stream" class="flex-1 min-w-0" />
+=======
       <chat [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
+>>>>>>> origin/main
       <aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
              style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
@@ -72,12 +82,15 @@ export class FilesystemComponent {
     assistantId: environment.streamingAssistantId,
   });
 
+<<<<<<< HEAD
+=======
   readonly ui = views({
     'file-preview': FilePreviewComponent,
   });
 
   readonly uiStore = signalStateStore({});
 
+>>>>>>> origin/main
   /**
    * Reactive list of file operations derived from the message history.
    *
 
@@ -1,3 +1,30 @@
+<<<<<<< HEAD
+import { Component, computed } from '@angular/core';
+import { ChatComponent } from '@cacheplane/chat';
+import { agent } from '@cacheplane/angular';
+import { environment } from '../environments/environment';
+
+/**
+ * Represents a single step in an agent-generated plan.
+ */
+interface PlanStep {
+  title: string;
+  status: 'pending' | 'in_progress' | 'complete';
+}
+
+/**
+ * PlanningComponent demonstrates agent task decomposition.
+ *
+ * The agent receives a complex task, breaks it into ordered steps,
+ * and executes them sequentially. The sidebar displays a live checklist
+ * of plan steps derived from the `plan` array in the graph state.
+ *
+ * Key integration points:
+ * - `stream.value()` exposes the full graph state, including the `plan` array
+ * - `planSteps` is derived from `stream.value()` for reactive sidebar rendering
+ * - Step status icons update in real time as the agent progresses
+ */
+=======
 import { Component } from '@angular/core';
 import { ChatComponent, views } from '@cacheplane/chat';
 import { signalStateStore } from '@cacheplane/render';
@@ -6,10 +33,72 @@ import { environment } from '../environments/environment';
 import { PlanChecklistComponent } from './views/plan-checklist.component';
 import { CheckboxRowComponent } from './views/checkbox-row.component';
 
+>>>>>>> origin/main
 @Component({
   selector: 'app-planning',
   standalone: true,
   imports: [ChatComponent],
+<<<<<<< HEAD
+  template: `
+    <div class="flex h-screen">
+      <chat [ref]="stream" class="flex-1 min-w-0" />
+      <aside class="w-72 shrink-0 border-l overflow-y-auto p-4 space-y-2"
+             style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
+        <h3 class="text-xs font-semibold uppercase tracking-wide"
+            style="color: var(--chat-text-muted, #777);">Plan</h3>
+        @if (planSteps().length === 0) {
+          <p class="text-sm italic" style="color: var(--chat-text-muted, #777);">No plan yet</p>
+        }
+        @for (step of planSteps(); track step.title) {
+          <div class="flex items-start gap-2 rounded-md px-2 py-1.5 text-sm"
+               style="background: var(--chat-bg-hover, #222);">
+            <span class="mt-0.5 shrink-0 text-base leading-none">
+              @if (step.status === 'complete') {
+                <span style="color: #22c55e;">&#10003;</span>
+              } @else if (step.status === 'in_progress') {
+                <span class="inline-block animate-spin" style="color: var(--chat-text-muted, #777);">&#9696;</span>
+              } @else {
+                <span style="color: var(--chat-border-light, #444);">&#9675;</span>
+              }
+            </span>
+            <span style="color: var(--chat-text, #e0e0e0);">{{ step.title }}</span>
+          </div>
+        }
+      </aside>
+    </div>
+  `,
+})
+export class PlanningComponent {
+  /**
+   * The streaming resource connected to the planning graph.
+   *
+   * The graph returns a `plan` array alongside messages in its state.
+   * Each plan entry has a `title` and `status` that drive the sidebar checklist.
+   */
+  protected readonly stream = agent({
+    apiUrl: environment.langGraphApiUrl,
+    assistantId: environment.streamingAssistantId,
+  });
+
+  /**
+   * Reactive list of plan steps derived from the graph state.
+   *
+   * The Python graph stores the plan as `state.plan` — an array of objects
+   * with `title` and `status` fields. This signal re-computes whenever
+   * the stream state changes.
+   */
+  protected readonly planSteps = computed<PlanStep[]>(() => {
+    const val = this.stream.value() as Record<string, unknown>;
+    const plan = val?.['plan'];
+    if (!Array.isArray(plan)) return [];
+    return plan.map((step: Record<string, unknown>) => ({
+      title: String(step['title'] ?? ''),
+      status: (['pending', 'in_progress', 'complete'].includes(step['status'] as string)
+        ? step['status']
+        : 'pending') as PlanStep['status'],
+    }));
+  });
+=======
   template: `<chat [ref]="stream" [views]="ui" [store]="uiStore" class="block h-screen" />`,
 })
 export class PlanningComponent {
@@ -24,4 +113,5 @@ export class PlanningComponent {
   });
 
   readonly uiStore = signalStateStore({});
+>>>>>>> origin/main
 }
@@ -8,5 +8,8 @@ export const environment = {
   production: false,
   langGraphApiUrl: 'http://localhost:4310/api',
   streamingAssistantId: 'planning',
+<<<<<<< HEAD
+=======
   planningAssistantId: 'planning',
+>>>>>>> origin/main
 };
@@ -8,5 +8,8 @@ export const environment = {
   production: true,
   langGraphApiUrl: '/api',
   streamingAssistantId: 'planning',
+<<<<<<< HEAD
+=======
   planningAssistantId: 'planning',
+>>>>>>> origin/main
 };
@@ -1,9 +1,15 @@
 import { Component, computed } from '@angular/core';
+<<<<<<< HEAD
+import { ChatComponent } from '@cacheplane/chat';
+import { agent } from '@cacheplane/angular';
+import { environment } from '../environments/environment';
+=======
 import { ChatComponent, views } from '@cacheplane/chat';
 import { signalStateStore } from '@cacheplane/render';
 import { agent } from '@cacheplane/angular';
 import { environment } from '../environments/environment';
 import { CodeExecutionComponent } from './views/code-execution.component';
+>>>>>>> origin/main
 
 /**
  * Represents a parsed code execution: the code that was run and its output.
@@ -30,7 +36,11 @@ interface CodeExecution {
   imports: [ChatComponent],
   template: `
     <div class="flex h-screen">
+<<<<<<< HEAD
+      <chat [ref]="stream" class="flex-1 min-w-0" />
+=======
       <chat [ref]="stream" [views]="ui" [store]="uiStore" class="flex-1 min-w-0" />
+>>>>>>> origin/main
       <aside class="w-80 shrink-0 border-l overflow-y-auto p-4 space-y-3"
              style="border-color: var(--chat-border, #333); background: var(--chat-bg, #171717); color: var(--chat-text, #e0e0e0);">
         <h3 class="text-xs font-semibold uppercase tracking-wide"
@@ -66,12 +76,15 @@ export class SandboxesComponent {
     assistantId: environment.streamingAssistantId,
   });
 
+<<<<<<< HEAD
+=======
   readonly ui = views({
     'code-execution': CodeExecutionComponent,
   });
 
   readonly uiStore = signalStateStore({});
 
+>>>>>>> origin/main
   /**
    * Derived signal: extracts code executions from the message stream.
    *