---
rootPath: "../"
---
{% extends "base.njk" %}
{% block title %}Changelog — Houston{% endblock %}
{% block favicon %}<link rel="icon" type="image/svg+xml" href="../favicon.svg">{% endblock %}
{% block meta %}
<meta name="description" content="Every Houston release, what changed, and how it affects you. Plain language, no jargon.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://gethouston.ai/changelog/">
<meta property="og:title" content="Changelog — Houston">
<meta property="og:description" content="Every Houston release, what changed, and how it affects you.">
<meta property="og:site_name" content="Houston">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Changelog — Houston">
<meta name="twitter:description" content="Every Houston release, what changed, and how it affects you.">
{% endblock %}
{% block inlineStyles %}
<style>
  :root {
    --background: #ffffff;
    --foreground: #0d0d0d;
    --secondary: #f9f9f9;
    --muted-foreground: #5d5d5d;
    --border: #e5e5e5;
    --gray-50: #f9f9f9;
    --gray-100: #ececec;
    --gray-200: #e3e3e3;
    --gray-300: #cdcdcd;
    --gray-400: #b4b4b4;
    --gray-500: #9b9b9b;
    --gray-600: #676767;
    --gray-700: #424242;
    --gray-950: #0d0d0d;
    --border-light: rgba(13,13,13,0.05);
    --border-medium: rgba(0,0,0,0.15);
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: ui-sans-serif, -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
    color: var(--foreground);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
  }
  a { color: inherit; text-decoration: none; }

  /* Top nav — mirrors landing */
  body { padding-top: 65px; }
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 16px 40px;
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, background 0.2s;
  }
  nav.scrolled { border-bottom-color: var(--border-light); }
  .nav-logo {
    font-family: 'General Sans', sans-serif;
    font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
    color: var(--gray-950);
  }
  .nav-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; gap: 32px; align-items: center;
  }
  .nav-center a { font-size: 14px; color: var(--gray-700); }
  .nav-center a:hover { color: var(--gray-950); }
  .nav-right { display: flex; align-items: center; gap: 12px; }
  .nav-right a { font-size: 14px; color: var(--gray-700); }
  .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 0 16px; height: 36px; border-radius: 10px;
    font-size: 14px; font-weight: 500;
    border: 1px solid transparent; cursor: pointer;
    transition: all 0.15s;
  }
  .btn-primary {
    background: var(--gray-950); color: white; border-color: var(--gray-950);
  }
  .btn-primary:hover { background: black; }

  /* Page header */
  .page-header {
    max-width: 760px; margin: 0 auto;
    padding: 80px 40px 48px;
    text-align: center;
  }
  .page-eyebrow {
    font-size: 13px; font-weight: 500; color: var(--gray-500);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 16px;
  }
  .page-header h1 {
    font-family: 'General Sans', sans-serif;
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 600; letter-spacing: -0.035em; line-height: 1.05;
    color: var(--gray-950);
    margin-bottom: 20px;
  }
  .page-header p {
    font-size: 18px; color: var(--gray-600);
    max-width: 560px; margin: 0 auto;
  }
  .page-header .links {
    margin-top: 24px;
    display: inline-flex; align-items: center; gap: 16px;
    font-size: 13px; color: var(--gray-500);
  }
  .page-header .links a {
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-300);
    transition: border-color 0.15s, color 0.15s;
  }
  .page-header .links a:hover {
    color: var(--gray-950);
    border-bottom-color: var(--gray-950);
  }

  /* Timeline rail */
  .timeline {
    max-width: 760px; margin: 0 auto;
    padding: 0 40px 120px;
    position: relative;
  }
  .timeline::before {
    content: "";
    position: absolute;
    left: 60px; top: 16px; bottom: 16px;
    width: 1px; background: var(--border);
  }
  @media (max-width: 720px) {
    .timeline::before { left: 24px; }
  }

  .release {
    position: relative;
    padding: 16px 0 56px 120px;
  }
  @media (max-width: 720px) {
    .release { padding-left: 56px; }
  }
  .release-marker {
    position: absolute;
    left: 53px; top: 22px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--gray-300);
    z-index: 1;
  }
  @media (max-width: 720px) {
    .release-marker { left: 17px; }
  }
  .release.is-latest .release-marker {
    border-color: var(--gray-950);
    background: var(--gray-950);
    box-shadow: 0 0 0 4px rgba(13,13,13,0.06);
  }

  .release-meta {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .release-version {
    font-family: 'General Sans', sans-serif;
    font-size: 28px; font-weight: 600; letter-spacing: -0.03em;
    color: var(--gray-950);
    line-height: 1;
  }
  .release-date {
    font-size: 13px; color: var(--gray-500);
  }
  .release-badge {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--gray-950); color: white;
  }
  .release-badge.beta {
    background: var(--gray-100); color: var(--gray-700);
  }

  .release-body {
    font-size: 15.5px; color: var(--gray-700);
    line-height: 1.65;
  }
  .release-body h1, .release-body h2, .release-body h3, .release-body h4 {
    font-family: 'General Sans', sans-serif;
    color: var(--gray-950);
    font-weight: 600; letter-spacing: -0.015em; line-height: 1.3;
    margin: 28px 0 12px;
  }
  .release-body h1 { font-size: 22px; margin-top: 0; }
  .release-body h2 { font-size: 18px; }
  .release-body h3 { font-size: 16px; }
  .release-body h4 { font-size: 15px; }
  .release-body > :first-child { margin-top: 0; }
  .release-body p {
    margin: 0 0 14px;
  }
  .release-body ul, .release-body ol {
    margin: 0 0 14px 24px;
    padding: 0;
  }
  .release-body li {
    margin-bottom: 8px;
  }
  .release-body strong {
    color: var(--gray-950); font-weight: 600;
  }
  .release-body a {
    color: var(--gray-950);
    border-bottom: 1px solid var(--gray-300);
  }
  .release-body a:hover { border-bottom-color: var(--gray-950); }
  .release-body code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13.5px;
    padding: 2px 6px;
    background: var(--gray-100);
    border-radius: 4px;
  }
  .release-body pre {
    background: var(--gray-50);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    font-size: 13px;
    margin: 0 0 14px;
  }
  .release-body pre code {
    background: transparent; padding: 0;
  }
  .release-body hr {
    border: 0; border-top: 1px solid var(--border-light);
    margin: 24px 0;
  }
  .release-body blockquote {
    border-left: 3px solid var(--gray-200);
    padding-left: 16px;
    color: var(--gray-600);
    margin: 0 0 14px;
  }

  .release-actions {
    display: inline-flex; gap: 16px; align-items: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--gray-500);
  }
  .release-actions a {
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-300);
    transition: border-color 0.15s, color 0.15s;
  }
  .release-actions a:hover {
    color: var(--gray-950);
    border-bottom-color: var(--gray-950);
  }

  .empty {
    max-width: 480px; margin: 80px auto;
    padding: 48px;
    text-align: center;
    background: var(--gray-50);
    border-radius: 16px;
    color: var(--gray-600);
  }
  .empty p { margin-bottom: 16px; }
</style>
{% endblock %}
{% block body %}
<nav>
  <a href="../" class="nav-logo">Houston</a>
  <div class="nav-center">
    <a href="../#agents">Agents</a>
    <a href="../#features">Features</a>
    <a href="../changelog/">Changelog</a>
    <a href="../startups/">For Startups</a>
  </div>
  <div class="nav-right">
    <a class="btn btn-primary" href="../#download">Download</a>
  </div>
</nav>

<div class="page-header">
  <div class="page-eyebrow">Changelog</div>
  <h1>What's new in Houston</h1>
  <p>Every release. Plain language. What changed and how it affects you.</p>
  <div class="links">
    <a href="https://github.com/gethouston/houston/releases" target="_blank" rel="noopener noreferrer">Releases on GitHub →</a>
  </div>
</div>

<div class="timeline">
  {% if changelog and changelog.length %}
    {% for release in changelog %}
      <article class="release {% if loop.first %}is-latest{% endif %}" id="{{ release.tag }}">
        <div class="release-marker"></div>
        <div class="release-meta">
          <div class="release-version">{{ release.tag }}</div>
          <div class="release-date">{{ release.publishedDate }}</div>
          {% if loop.first and not release.isPrerelease %}<span class="release-badge">Latest</span>{% endif %}
          {% if release.isPrerelease %}<span class="release-badge beta">Beta</span>{% endif %}
        </div>
        <div class="release-body">
          {{ release.body | markdown | safe }}
        </div>
        <div class="release-actions">
          <a href="{{ release.url }}" target="_blank" rel="noopener noreferrer">View on GitHub</a>
          {% if release.dmgAsset %}<a href="{{ release.dmgAsset.browser_download_url }}">Download DMG</a>{% endif %}
        </div>
      </article>
    {% endfor %}
  {% else %}
    <div class="empty">
      <p>The changelog couldn't load right now.</p>
      <p><a href="https://github.com/gethouston/houston/releases" target="_blank" rel="noopener noreferrer" style="border-bottom: 1px solid currentColor;">Read the release notes on GitHub →</a></p>
    </div>
  {% endif %}
</div>

{% include "footer-landing.njk" %}

<script>
  (function() {
    var nav = document.querySelector('nav');
    if (!nav) return;
    function check() {
      if (window.scrollY > 10) nav.classList.add('scrolled');
      else nav.classList.remove('scrolled');
    }
    window.addEventListener('scroll', check, { passive: true });
    check();
  })();
</script>
{% endblock %}