langchain-evolution-deck/slides/section5-ecosystem/slide-09.js

// Slide 09: LangSmith Studio -- visual debugger for LangGraph
// Content + visual mock slide: graph canvas, run timeline, state inspector.

const ds = require('./design-system');

function createSlide(pres, theme) {
  const slide = pres.addSlide();
  ds.helpers.slideBase(slide, pres, theme);

  ds.helpers.addHeader(slide, pres, theme, {
    eyebrow: 'STAGE 5: ECOSYSTEM',
    section: 'LangGraph Studio',
    title: 'Визуальный дебаг графа',
    sectionNumber: 5,
  });

  // Lead paragraph
  slide.addText(
    'Studio -- это desktop/web IDE для LangGraph. Показывает граф как граф, ' +
    'а не как свалку логов. Запускается локально через `langgraph dev`, ' +
    'либо хостится на LangGraph Platform.',
    {
      x: 0.5, y: 1.5, w: 9.0, h: 0.65,
      fontFace: ds.helpers.withFallback(theme.fonts.ui),
      fontSize: 13,
      color: theme.palette.text.secondary,
      align: 'left', valign: 'top',
      margin: 0,
    }
  );

  // Left card: graph canvas mock
  const gx = 0.5;
  const gy = 2.25;
  const gw = 4.5;
  const gh = 2.6;

  slide.addShape(pres.ShapeType.roundRect, {
    x: gx, y: gy, w: gw, h: gh,
    fill: { color: theme.palette.bg.code },
    line: { color: theme.palette.border.subtle, width: 1 },
    rectRadius: 0.1,
  });
  slide.addText('GRAPH CANVAS', {
    x: gx + 0.15, y: gy + 0.1, w: gw - 0.3, h: 0.25,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 10, bold: true,
    color: theme.palette.accent.tertiary,
    charSpacing: 4, margin: 0,
  });

  // Mock nodes in the graph
  const nodes = [
    { label: '__start__', x: gx + 0.2, y: gy + 0.5, color: theme.palette.accent.tertiary },
    { label: 'router',    x: gx + 0.2, y: gy + 1.1, color: theme.palette.accent.primary },
    { label: 'agent',     x: gx + 1.6, y: gy + 1.7, color: theme.palette.accent.primary },
    { label: 'tools',     x: gx + 3.0, y: gy + 1.7, color: theme.palette.accent.primary },
    { label: 'END',       x: gx + 3.0, y: gy + 0.5, color: theme.palette.accent.tertiary },
  ];
  nodes.forEach((n) => {
    slide.addShape(pres.ShapeType.roundRect, {
      x: n.x, y: n.y, w: 1.2, h: 0.45,
      fill: { color: theme.palette.bg.elevated },
      line: { color: n.color, width: 1.5 },
      rectRadius: 0.06,
    });
    slide.addText(n.label, {
      x: n.x, y: n.y, w: 1.2, h: 0.45,
      fontFace: ds.helpers.withFallback(theme.fonts.code),
      fontSize: 10, bold: true,
      color: n.color,
      align: 'center', valign: 'middle', margin: 0,
    });
  });

  // Right card: run timeline mock
  const tx = 5.2;
  const ty = 2.25;
  const tw = 4.3;
  const th = 2.6;

  slide.addShape(pres.ShapeType.roundRect, {
    x: tx, y: ty, w: tw, h: th,
    fill: { color: theme.palette.bg.code },
    line: { color: theme.palette.border.subtle, width: 1 },
    rectRadius: 0.1,
  });
  slide.addText('RUN INSPECTOR', {
    x: tx + 0.15, y: ty + 0.1, w: tw - 0.3, h: 0.25,
    fontFace: ds.helpers.withFallback(theme.fonts.ui),
    fontSize: 10, bold: true,
    color: theme.palette.accent.tertiary,
    charSpacing: 4, margin: 0,
  });

  const steps = [
    { t: '0ms',     label: '__start__',        color: theme.palette.accent.tertiary },
    { t: '+12ms',   label: 'router',           color: theme.palette.accent.primary },
    { t: '+840ms',  label: 'agent (LLM call)', color: theme.palette.accent.secondary },
    { t: '+1.2s',   label: 'tools[search]',    color: theme.palette.accent.primary },
    { t: '+1.4s',   label: 'agent (LLM call)', color: theme.palette.accent.secondary },
    { t: '+2.1s',   label: 'END',              color: theme.palette.accent.tertiary },
  ];
  steps.forEach((s, i) => {
    const y = ty + 0.45 + i * 0.32;
    slide.addText(s.t, {
      x: tx + 0.15, y: y, w: 0.7, h: 0.28,
      fontFace: ds.helpers.withFallback(theme.fonts.code),
      fontSize: 9,
      color: theme.palette.text.muted,
      valign: 'middle', margin: 0,
    });
    slide.addText(s.label, {
      x: tx + 0.9, y: y, w: tw - 1.05, h: 0.28,
      fontFace: ds.helpers.withFallback(theme.fonts.code),
      fontSize: 11, bold: true,
      color: s.color,
      valign: 'middle', margin: 0,
    });
  });

  ds.helpers.addSourceLine(slide, pres, theme, {
    source: 'langchain-ai.github.io/langgraph/concepts/langgraph_studio/',
  });
  ds.helpers.addPageNumber(slide, pres, theme, 9);
}

module.exports = { createSlide };